WordPress

【徹底解説】ローカル(MAMP)で構築したWordPressサイトをエックスサーバーへ移行する全手順

 

こんにちは、イケゾーです。

WordPressで作成したサイトを、自分のブログサイトにアップロードして動作確認する方法を徹底解説します。ローカル環境で作成したサイトを本番環境でテストする際や、納品前のチェックでは必須なので、ぜひ習得してください。

 

教本やスクールはコーディングは教えてくれるけど、サーバーの部分の教材って少ないんですよね。仕事をする上で避けて通れない部分を徹底解説していこうと思います。

僕も最初はかなり理解に時間がかかったので、ゆっくり進めていただければと思います。

 

ローカル(MAMP)で構築したWordPressサイトをエックスサーバーへ移行する全手順

この記事では、MAMPで作成したWordPressエックスサーバーにアップロードします。

この記事でできること

  • 既存のブログサイト「IkezoooBlog」があり、その直下に新たに「Ikezooomall」サイトをアップロードします。
  • URLは「https://ikezooo.com」の下に「https://ikezooo.com/ikezooomall/」と設置します。

 

それぞれのドメインに置き換えて、進めてください。

 

この記事はこんな人におすすめ!

  • WordPressサイトを自分のブログサイトにアップして動作確認したい
  • エックスサーバーにWordPressサイトを移行したい

 

 

ワードプレスおすすめ参考書
【WordPress(ワードプレス)初心者におすすめ本】「仕事の現場でサッと使える! デザイン教科書」のレビュー

続きを見る

当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

 

エックスサーバーでWordPressをインストールする

エックスサーバーの移行先のドメインでWordPressを新規インストールします。

エックスサーバーにログイン▶︎サーバー管理

 

サーバーパネル▶︎WordPress簡単インストール

 

インストール先のドメインを選択して図のように入力します。

 

WordPressインストールを選択して下記のように入力、確認画面へ進む▶︎インストール

 

WordPressの新規インストールが完了しました。
ユーザ名やパスワードは後で使うので、必ずメモするかスクショしておきましょう

 

サイトURLにアクセスして、WordPressの初期画面が表示されることを確認します。

 

サイトのソースを表示をすると、下記のようなHTMLコードになっています。後ほど使うのでスクショしておきましょう。

移行先のドメインにWordPressの準備ができました
イケゾー

 

MAMPからSQLデータをエクスポートする

まずは、固定ページや投稿ページの情報をエクスポートします。これはMAMPのMySQLに保存してあります。

 

MAMPを起動して、「TOOL」▶︎「PHPMyAdmin」をクリックします。

 

ローカルで作成した移行したいデータベースを選択し、「Export」を選択します。

条件を図のように設定し「go」をクリックすると、「(サイト名).sql」ファイルがダウンロードされます。

「.sql」ファイルにはローカルで作成したデータベースの中身が入ってるよ
イケゾー

 

MAMPの「wp-config.php」を編集する

次に、MAMPに保存したデータを移行していきます。

データを本番環境へ移行する前に、MAMPの中の「wp-config.php」を本番環境用に編集します。

 

Finderで「wp-config.php」を開き、下記の記述を見つけます。

アプリケーション▶︎MAMP▶︎htdocs▶︎サイト名(ikezooomall)▶︎wp-config.php

 

下のようなSQL設定部分の記述を探してください。

変更前

// ** MySQL 設定 - この情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define( 'DB_NAME', 'ikezooomall' );

/** MySQL データベースのユーザー名 */
define( 'DB_USER', 'root' );

/** MySQL データベースのパスワード */
define( 'DB_PASSWORD', 'root' );

/** MySQL のホスト名 */
define( 'DB_HOST', 'localhost' );

 

この部分をWordPressインストールでスクショした内容に書き換えます。

変更後

// ** MySQL 設定 - この情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define( 'DB_NAME', 'ここに入力' );

/** MySQL データベースのユーザー名 */
define( 'DB_USER', 'ここに入力' );

/** MySQL データベースのパスワード */
define( 'DB_PASSWORD', 'ここに入力' );

/** MySQL のホスト名 */
define( 'DB_HOST', 'ここに入力' );

 

データベース名、ユーザ名、パスワードは下記のスクショを元に入力します。

 

ホスト名は、サーバーパネル▶︎MySQL設定より確認して入力します。

これで本番環境で使える設定ができたね
イケゾー

 

MAMPのデータをエックスサーバーに移行する

次に、ローカルMAMPのデータをエックスサーバにアップロードします。

ここでは、本番環境に簡単にアクセスでき、ファイル送信ができるFTPソフト「FileZilla」を使用して進めます。

 

FileZillaでエックスサーバに接続

FileZillaからエックスサーバーに接続します。

 

エックスサーバー契約時に届いたメール「【Xserver】□重要□サーバーアカウント設定完了のお知らせ」のFTP情報を確認します。

 

FileZillaを起動し、メールに記載されていたFTP情報を入力してクイック接続をクリックします。

FileZillaを使ってサーバ上のファイルを操作できるようになりました
イケゾー

 

データファイルを全て移行

それでは実際にデータを移行していきましょう。

 

FileZillaの簡単な説明ですが、画面左側がローカルPC、画面右側がサーバーのデータが表示されています。画面上の左→右へファイルをドラッグ&ドロップしてファイルを移行していきます。

 

アプリケーション▶︎MAMP▶︎htdocs▶︎サイト名(ikezooomall) の中身全てを、移行先のpublic_htmlに移行します。

WordPress新規インストールによって、既にデータが作られているので、ファイルは上書きをしてください。

アップロードには少し時間がかかるよ。ここで少し休憩・・・
イケゾー

 

エックスサーバーのデータベースにSQLデータをインポートする

ここまででデータファイルは移行できたので、残りは固定ページや投稿ページのデータをインポートしていきます。

前の手順でダウンロードした「.sql」ファイルをエックスサーバーにアップロードします。

 

データベースの初期データを全削除

データベース作成時に初期データが作成されるので、これを削除します。

 

サーバーパネル▶︎phpmyadminをクリックします

左に表示されているデータベース名が、移行先のデータベース名となっているか確認します。

異なる場合は一度ログアウトして、ログインしましょう。この時のユーザ名とパスワードはスクショしたものです。

 

移行先のデータベース名をクリックして、構造タブをクリックします。
すべてチェックするを選択し、削除をクリックします。

「このデータベースにはテーブルがありません」と表示されれば無事完了です。

 

MAPMからエクスポートしたSQLデータをインポート

空のデータベースに、「.sql」ファイルをインポートします。

 

「インポート」タブをクリック、ファイル選択で「.sql」ファイルを選択し「実行」します。

「インポートは正常に終了しました」と表示されれば無事完了です。

ここまで出来たらあともう一歩で完成だよ
イケゾー

 

SQLファイルのパス名を本番環境用に置換する

先程インポートした「.sql」ファイルの中身は、ローカル環境用の記述がされたままなので、本番環境ではうまく表示が出来ません。

ブラウザで確認してみると、cssやjsが上手く動いていない状態になっています。

ページのソースを表示してみると、href属性が「https://localhost:8888/ikezooomall...」となっており、ローカル環境のままですね。

 

パスを正しく「localhost:8888」→「ikezooo.com」置換する必要があります。「sql」ファイルの中身を本番環境用に書き換える必要があります。

書き換え方法ですが、直接書き換えても良いのですが、Codex推奨の「Serch Replace DB master」を使用していきます。このツールを使用すると、置換の抜けや漏れが防げるのでおすすめです。

 

Serch Replace DB master

「Serch Replace DB master」は指定したファイルの中身を置換するツールです。

今回は、アップロードした「.sql」ファイルの中身を一括置換するために使用します。

 

公式サイトより「Serch-Replace-DB-master」ファイルをダウンロードします。
>>ダウンロードはこちら

 

WordPressサイトのフォルダ直下に「Serch-Replace-DB-master」をアップロードします。

 

ブラウザでURL「サイトのURL/Search-Replace-DB-master」にアクセスします。下記の画面になれば成功です。

これは、先ほど設置した「Serch-Replace-DB-master」ファイルにアクセスしています。こちらの画面で、置換する内容を設定して実行します。

 

 

データベースに接続する「Database Details」を入力し、接続成功表示が出ることを確認します。

 

置換する値を入力します。僕の場合は「localhost:8888」→「ikezooo.com」です。

 

最後に「delete me」をクリックして、「Serch-Replace-DB-master」ファイル一式を削除します。

これで作業は全て終了したよ、あとは動作確認
イケゾー

 

動作確認

では、ブラウザで管理画面にログインできるか確認しましょう。

URL:末尾に「/wp-admin」

ログイン情報:MAMPで使用していたユーザ名とパスワード

ログインできれば無事に移行が完了できました。

ふう、お疲れ様でした
イケゾー

 

まとめ

無事にサーバーへの移行ができましたでしょうか。少し難しく感じる部分もあるかもしれませんが、一つ一つ丁寧に進めましょう。

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-WordPress