Local by FlywheelのWordPressをエックスサーバーに移行する手順

Local by FlywheelのWordPressをエックスサーバーに移行する手順

WordPress

Local by Flywheelでローカル環境にWordPressを構築したけど、どうやってサイトを公開するのか疑問ですよね?

レンタルサーバーに同じサイトを一から作り直してもいいですが、とても手間が掛かってしまいます。
そんな時は、ローカル環境で構築したWordPressをレンタルサーバーに移行(コピー)することをオススメします。

今回は、僕がレンタルサーバーの中で一番おすすめしているエックスサーバーに移行する手順を解説します。

エックスサーバーをおすすめする6つの理由
ホームページやブログを運用するためには、レンタルサーバーを契約する必要があります。数多くのレンタルサーバーがあるため、どのレンタルサーバーにしようか迷われる方も…
ryob.net

エックスサーバーに独自ドメインを追加していることを前提に解説していきます。
まだ独自ドメインを追加していない場合は、以下の記事を参考にして独自ドメインを追加してください。

エックスドメインで取得したドメインをエックスサーバーに追加する手順
Webサイトやブログを立ち上げるためには、ドメインとレンタルサーバーの契約が必要です。それぞれの契約が完了したら、取得したドメインをレンタルサーバーに追加しない…
ryob.net

それでは、Local by Flywheelで構築したWordPressを、エックスサーバーに移行する手順を解説していきます。

【ステップ1】Local by Flywheelのデータベースをエクスポートする

まずはLocal by Flywheelで構築したWordPressのデータベースをエクスポートします。

Local by Flywheelの「DATABASE」タブを開き、「ADMINER」ボタンをクリックします。

ADMINERを開く

ブラウザで「Adminer」のコントロールパネルが表示されるので、サイドメニューの「エクスポート」をクリックします。

エクスポートをクリックする

エクスポートページが表示されます。
「出力」の項目で「保存」にチェックを入れ、「エクスポート」ボタンをクリックすると「local.sql」というファイルがダウンロードされます。

データベースをエクスポートする

以上でLocal by Flywheelのデータベースのエクスポートは完了です。

【ステップ2】エックスサーバーでデータベースを作成する

Local by Flywheelでエクスポートしたデータベースをインポートするためのデータベースを作成します。

エックスサーバーのサーバーパネルにログインし、「MySQL設定」をクリックします。

MySQL設定をクリックする

「MySQL追加」タブを開き、「MySQLデータベース名」に任意のデータベース名を入力します。
データベース名を入力したら「確認画面に進む」ボタンをクリックします。

データベース名を入力する

エックスサーバーのデータベース名は「サーバーID_任意のデータベース名」という形式になります。
データベース名に間違いが無ければ「追加する」ボタンをクリックします。

データベースを追加する

データベースを作成できたので、データベースのユーザーIDとパスワードを設定します。

「MySQLユーザー追加」タブを開き、任意のユーザーIDとパスワードを入力して「確認画面へ進む」ボタンをクリックします。

MySQLユーザー名とパスワードを入力する

エックスサーバーのMySQLユーザーIDも「サーバーID_任意のユーザーID」という形式になります。
ユーザーIDとパスワードに間違いが無ければ「追加する」ボタンをクリックします。

MySQLユーザーを追加する

MySQLユーザーを作成できたら、このユーザーにデータベースのアクセス権を追加します。

「MySOL一覧」タブを開きます。
先ほど作成したデータベースの「アクセス権未所有ユーザー」から、先ほど作成したMySQLユーザーを選択して「追加」ボタンをクリックします。

MySQLユーザーのアクセス権を追加する

アクセス権の追加が完了したら、データベースの管理画面であるphpMyAdminにログインしてみましょう。

サーバーパネルの「phpmyadmin(MySQL5.7)」をクリックします。

phpmyadminを開く

先ほど作成したMySQLユーザーのIDとパスワードを入力して「ログイン」ボタンをクリックします。

phpmyadminにログインする

phpMyAdminのサイドメニューに、先ほど作成したデータベース名が表示されていれば、データベースの作成は完了です。

データベース名を確認

【ステップ3】エックスサーバーにデータベースをインポートする

Local by Flywheelからエクスポートしたデータベースを、エックスサーバーにインポートします。

エックスサーバーのphpMyAdminにログインし、【ステップ2】で作成したデータベース名をクリックしてください。

データベース名をクリックする

「インポート」タブを開き、「アップロードファイル」の「ファイルを選択」ボタンをクリックします。

ファイルを選択する

Local by Flywheelからエクスポートした「local.sql」ファイルを選択して「開く」ボタンをクリックします。

データベースファイルを選択する

ファイルを選択したら、ページ下部の「実行」ボタンをクリックします。

データベースのインポートを実行する

「インポートは正常に終了しました。」というメッセージが表示されればインポート成功です。

データベースのインポートが完了

「構造」タブを開くと、テーブルが作成されていることを確認することが出来ます。

データベースのテーブルを確認

以上で、エックスサーバーへのデータベースのインポートは完了です。

【ステップ4】wp-config.phpを編集する

WordPressのファイルをアップロードする前に、wp-config.phpというファイルを編集する必要があります。
wp-config.phpにはWordPressで使用しているデータベースの情報が記載してあります。
Local by FlywheelでインストールしたWordPressのwp-config.phpには、Local by Flywheelのデータベース情報が記載してあるので、【ステップ2】で作成したエックスサーバーのデータベース情報に書き換えないといけません。

まずはLocal by FlywheelでインストールしたWordPressのフォルダをデスクトップにコピーします。
なぜデスクトップにコピーするのかと言いますと、Local by Flywheelのwp-config.phpを編集してしまうと、Local by Flywheelでインストールしたローカル環境のWordPressが使えなくなってしまうためです。

Local by FlywheelのWordPressファイルは以下の場所にあります。

/Users/ユーザー名/Local Sites/Local by Flywheelで指定したフォルダ/app/public

このpublicフォルダをデスクトップにコピーしてください。

デスクトップにコピーしたpublicフォルダ内のwp-config.phpを開き、以下の箇所を編集します。

// ** MySQL settings ** //
/** The name of the database for WordPress */
define( 'DB_NAME', 'local' );

/** MySQL database username */
define( 'DB_USER', 'root' );

/** MySQL database password */
define( 'DB_PASSWORD', 'root' );

/** MySQL hostname */
define( 'DB_HOST', 'localhost' );

/** Database Charset to use in creating database tables. */
define( 'DB_CHARSET', 'utf8' );

/** The Database Collate type. Don't change this if in doubt. */
define( 'DB_COLLATE', '' );

DB_NAMElocalの部分を【ステップ2】で作成したデータベース名に変更します。
DB_USERrootの部分を【ステップ2】で作成したMySQLユーザーIDに変更します。
DB_PASSWORDrootの部分を【ステップ2】で作成したMySQLユーザーのパスワードに変更します。
DB_HOSTlocalhostの部分をエックスサーバーのMySQLホスト名に変更します。
DB_CHARSETDB_COLLATEは変更する必要はありません。

エックスサーバーのMySQLホスト名はサーバーパネルで確認できます。
サーバーパネルにログインして「MySQL設定」をクリックします。

MySQL設定をクリックする

「MySQL一覧」タブのページ最下部の「MySQL5.7 ホスト名」がエックスサーバーのMySQLホスト名です。

MySQLホスト名を確認する

編集後のwp-config.phpは以下のようになります。(データベース名などの情報はサンプルです。)

// ** MySQL settings ** //
/** The name of the database for WordPress */
define( 'DB_NAME', 'serverid_dbname' );

/** MySQL database username */
define( 'DB_USER', 'serverid_dbuser' );

/** MySQL database password */
define( 'DB_PASSWORD', 'password' );

/** MySQL hostname */
define( 'DB_HOST', 'mysql0000.xserver.jp' );

/** Database Charset to use in creating database tables. */
define( 'DB_CHARSET', 'utf8' );

/** The Database Collate type. Don't change this if in doubt. */
define( 'DB_COLLATE', '' );

以上でwp-config.phpの編集は完了です。

【ステップ5】エックスサーバーにWordPressのファイルをアップロードする

WordPressのファイルをアップロードするために、FTPソフトでエックスサーバーにアクセスします。
FTPソフトでのアクセス方法については公式のマニュアルを確認してください。

https://www.xserver.ne.jp/manual/man_ftp_setting.php

【ステップ4】でデスクトップにコピーしたpublicフォルダ内のファイルを全て、エックスサーバーの以下のディレクトリにアップロードしてください。
publicフォルダをアップロードするのではなく、publicフォルダ内のファイルをアップロードするので、間違わないように注意してください。

/home/サーバーID/独自ドメイン名/public_html/

仮にサーバーIDが「serverid」で、WordPressを移行する独自ドメインが「demosite.com」だった場合は以下のようなディレクトリになります。

/home/serverid/demosite.com/public_html/

WordPressファイルのアップロードが完了したら、本番のサイトURLにアクセスします。
以下の画像のように、CSSが反映されていないWordPressのトップページが表示されれば、データベースのインポートとファイルのアップロードは成功です。

WordPressのトップページを確認する

もしWordPressのトップページが表示されない場合は、今までのステップで間違いが無いか確認してみてください。

【ステップ6】データベース内のサイトURLを書き換える

Local by Flywheelからエクスポートしたデータベースをエックスサーバーにインポートしましたが、データベース内のサイトURLはローカル環境のURLのままです。
このままではエックスサーバーのWordPressが正常に動作しないので、データベース内のサイトURLを本番のサイトURLに書き換えないといけません。

データベース内のサイトURLの書き換えには「Search Replace DB」というツールを使用します。
まずは公式サイトからSearch Replace DBをダウンロードしてください。

Search Replace DBの公式サイト

「Download Search Replace DB」というフォームがあるので、「Knowledge check」の3つのチェックボックスにチェックを入れ、「Name」と「Email」を入力して「Submit」ボタンをクリックします。

Search Replace DBのフォームに入力

入力したメールアドレスにメールが送られてくるので、本文のダウンロードリンクをクリックしてSearch Replace DBをダウンロードします。

Search Replace DBのダウンロードリンクをクリック

「Search-Replace-DB-4.1.1.zip」というzipファイルがダウンロードされるので、このファイルをダブルクリックして解凍します。
※4.1.1はバージョンを意味するので、ダウンロードした時期によって異なります。

Search-Replace-DB-4.1.1.zipを解凍すると、「Search-Replace-DB-4.1.1」というフォルダが出来上がります。
このフォルダを、先ほどWordPressファイルをアップロードしたエックスサーバーのディレクトリにアップロードします。

/home/サーバーID/独自ドメイン名/public_html/

Search Replace DBのファイルをアップロードしたら、Search Replace DBのコントロールパネルにアクセスします。
Search Replace DBのコントロールパネルのURLは以下の通りです。

本番のサイトURL/Search-Replace-DB-4.1.1/

※ダウンロードしたバージョンが異なる場合は、バージョンの部分を書き換えてください。

Search Replace DBのコントロールパネルが表示されたら、置き換えるドメインとデータベース情報を入力します。

「replace」にローカル環境のサイトURLを入力します。(末尾に/は不要です)
「with」に本番のサイトURLを入力します。(末尾に/は不要です)
「database name」に【ステップ2】で作成したデータベース名を入力します。
「username」に【ステップ2】で作成したMySQLユーザーIDを入力します。
「pass」に【ステップ2】で作成したMySQLユーザーのパスワードを入力します。
「host」にエックスサーバーのMySQLホスト名を入力します。

全ての項目を入力したら「Test connection」ボタンをクリックします。

データベースへの接続を確認

「Test connection」ボタンの横に「Success. You are connected.」というメッセージが表示されたら、データベースへのアクセスは成功です。

データベースへのアクセス成功を確認

実際にデータベースを書き換える前に、テストを行って書き換える内容に問題が無いか確認します。
「Do a safe test run」ボタンをクリックしてください。

データベース書き換えのテストランを実行

書き換える内容の一覧が表示されます。
「view changes」というリンクをクリックすると、書き換える内容の詳細が表示されるので、間違いが無いか確認します。

データベース書き換えの内容を確認
データベース書き換えの内容を確認

書き換える内容に間違いが無いことを確認したら「Search and Replace」ボタンをクリックします。

データベースの書き換えを実行

最終確認のアラートが表示されるので、「OK」ボタンをクリックするとエックスサーバーのデータベースの書き換えが実行されます。
このボタンをクリックすると後戻りは出来ないため、くれぐれも書き換える内容に間違いがないか確認してください。

データベースの書き換えを実行

データベースの書き換えが完了したら必ずSearch Replace DBを削除してください。

「delete me」ボタンをクリックすると、サーバーからSearch Replace DBのファイルが削除されます。

Search Replace DBを削除

以上で、エックスサーバーのデータベース内のサイトURLの書き換えは完了です。

【ステップ7】エックスサーバーのWordPressにログインする

データベースの書き換えが正常に完了したか確認するため、本番のサイトURLにアクセスします。
先ほどはCSSが適用されていなかったWordPressのトップページが、正常に表示されていればデータベースの書き換えが成功しています。

WordPressのトップページを確認

WordPressの管理画面にログインできるか確認します。
管理画面のURLは以下の通りです。

本番のサイトURL/wp-admin/

ユーザー名とパスワードを入力して「ログイン」ボタンをクリックします。
WordPressのユーザー名とパスワードは、Local by Flywheelで構築したWordPressと同じものです。

WordPressの管理画面にログイン

WordPressのダッシュボードが表示されればログイン成功です。

WordPressのダッシュボードが表示されればOK

以上でLocal by Flywheelで構築したWordPressをエックスサーバーに移行する作業は完了です。

Local by FlywheelのWordPressをエックスサーバーに移行する手順のまとめ

簡単にまとめると、Local by FlywheelのデータベースとWordPressファイルをエックスサーバーに移動し、エックスサーバーのデータベース内のサイトURLを書き換えるだけの作業です。

最初のうちは難しく感じるかもしれませんが、慣れれば15分ほどで終わらせることが出来るようになります。

以上、Local by Flywheelで構築したWordPressをエックスサーバーに移行する手順でした。