ローカルのwordpressをxdomainの無料サーバに移行する！

ローカルでwordpressの開発をして、無料のレンタルサーバーに移行するときに苦戦したので、移行の手順をメモしときます。

# 環境

- macOS High Sierra
- ローカルのwordpress環境があります
- xdomainの無料レンタルサーバの環境をこれから構築します

※この情報は 2018/05/09 現在の情報です。

# 手順

1. xdomainのアカウントを作る
2. レンタルサーバ上で新たにデータベースを作成する
3. ローカルのwordpressとデータベースを他の場所へコピーする
4. `search replace DB`をローカルで実行し、文字列を置換
5. ローカルのデータベースをエクスポートする
6. エクスポートしたデータベースの内容を修正
7. レンタルサーバにデータベースをインポート
8. ローカルのwp-configを修正する
9. FileZillaでローカルのwordpressのファイル群をアップロード

個々のステップはそこまで難しいわけではないので、1つずつ確実にやっていきましょう。

# 1. xdomainのアカウントを作る

まず、xdomainのアカウントを以下から作成します。
[無料レンタルサーバー新規お申し込み | ドメイン取得＆無料レンタルサーバー Xdomain(エックスドメイン)](https://www.xdomain.ne.jp/register/server.php)

アカウントを作ってログインできたら、左側の項目の「無料レンタルサーバー」をクリックします。

<img width="1049" alt="スクリーンショット 2018-05-09 9.09.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/155a4388-6c66-17fe-116f-175bac52aeb3.png">

次に、サーバーIDを入力します。サーバーIDはサイトのドメインの一部になるので、よく考えて付けましょう。
サーバーIDを「hogehoge」とした場合、初期ドメインは、「hogehoge.php.xdomain.jp」のようになります。

サーバーIDについては以下参照。
[会員IDとサーバーID](https://www.xdomain.ne.jp/manual/man_member_about_id.php)

サーバーIDの設定が終わって、再び左側のメニューの「無料レンタルサーバー」をクリックすると、以下のような画面に変わっていると思います。

<img width="1051" alt="スクリーンショット 2018-05-09 9.24.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/d3746669-525a-4236-d297-bec514980335.png">

3つ選択肢がありますが、今回はローカルのwordpressをレンタルサーバーに持ってくるので、真ん中の項目の「PHP・MySQLサーバー」を使います。

「利用を開始する」を押すと、初期設定が完了します。もう一度「無料レンタルサーバー」に戻ると、「管理パネルログイン」というボタンがでできますので、それをクリックしましょう。

<img width="1025" alt="スクリーンショット 2018-05-09 9.31.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/698e79f5-5b3e-06d7-1520-fedb535ffa75.png">


# 2. レンタルサーバ上で新たにデータベースを作成する

管理パネルにログインできましたら、新規にデータベースを作成します。
以下の画面が出ていると思うので、「データベース」の項目の「MySQLの設定」をクリックします。

<img width="1044" alt="スクリーンショット 2018-05-09 9.33.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/054ea843-e748-1cc5-9245-e3d8ef08da9f.png">

## MySQLの追加

次に上のメニューから、「MySQLの追加」を選択して、新しいデータベースをサーバ上に作ります。

<img width="1011" alt="スクリーンショット 2018-05-09 9.42.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/295d0fbf-cba6-594a-d80d-b6a1309579bc.png">

※ データベース名についてですが、アンダーバーは使用できないようですので、英数字だけで構成するようにしましょう。
文字コードはUTF8で構いません。

## MySQLユーザーの追加

続いてMySQLにログインできるユーザーを追加します。上のメニューの「MySQLユーザー設定」をクリックして、任意のユーザー名を入力しましょう。

※データベースユーザ名は合計16文字以内

## データベース名などをメモしておく

ここで設定したものは、後で`wp-config`を編集する時に必要となりますので、以下の画面から確認してどこかにメモしておきましょう。

メモが必要なもの

1. データベース名
2. データベースユーザー名
3. データベースユーザーのパスワード
4. MySQLのホスト名

<img width="1012" alt="スクリーンショット 2018-05-09 10.12.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/b555b26d-8389-d044-6804-2cc3f90a9c6d.png">

※データベース名は**サーバーIDとアンダーバーを含めた文字列**ですので注意してください。ユーザー名も同様です。

# 3. 先にローカルのwordpressとデータベースを他の場所へコピーする。

次はローカルでの作業です。
データのバックアップも含めて、wordpressとデータベースをコピーしていきます。

## ローカルのwordpressを別の場所へコピー

まず、wordpressのデータを、**MAMPのhtdocs内**の他の場所にフォルダごとコピーしましょう。なぜMAMPのhtdocsn内かというと、次のステップでphpのスクリプトを実行する必要があるためです。
また、後から`wp-config`も書き換えるので、間違えて元々のファイルを編集しないように違う場所にコピーしましょう。

## ローカルのデータベースをphpmyadminでコピー

`localhost:8888/phpmyadmin`のように、phpmyadminにアクセスして、データベースを複製しておきましょう。

まず、以下の画面で、左側の項目からコピーするデータベースを選択します。

<img width="955" alt="スクリーンショット 2018-05-09 7.13.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/6dd0f883-fb17-8f02-d4dd-e9cd820cce54.png">

選択したら、上の項目の「操作」を選択します。

<img width="911" alt="スクリーンショット 2018-05-09 7.15.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/bef2dd8f-a8d3-da26-7f6d-895059b58a7b.png">

次に、下の方にある「copy database to」でデータベースを複製します。ここで注意したいのが以下の2点です。

- 「構造とデータ」の両方をコピーする必要がある
- データベース名は、**レンタルサーバで新規に作ったデータベース名と同じ**にする

<img width="954" alt="スクリーンショット 2018-05-09 10.46.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/4be807e5-09f0-63e7-1d1b-9700f7b6dab0.png">

# 4. `search replace DB`をローカルで実行し、文字列を置換

次に、`localhost:ポート番号`という文字列をレンタルサーバーのドメイン名に置換します。これをしないとページが表示されなくなってしまいます。
データベース内の文字列を正しく置換するために、[Search Replace DB](https://interconnectit.com/products/search-and-replace-for-wordpress-databases/)というphpのスクリプトを使います。

まず[Search Replace DB](https://interconnectit.com/products/search-and-replace-for-wordpress-databases/)をダウンロードしてください。

ダウンロードしたら、wordpressのフォルダ内に入れます。

<img width="663" alt="スクリーンショット 2018-05-10 20.50.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/f3d4fde6-6d3d-5112-7c44-2cc7bdbf38c6.png">

そして以下のようなURLにブラウザからアクセスします。

```
http://localhost:ポート番号/（フォルダ名）/Search-Replace-DB-master/
```

すると以下のような画面が出てきます。データベースユーザーやパスワードはすでに表示されていると思います。

<img width="1375" alt="スクリーンショット 2018-05-10 20.54.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/f52a2cb3-248a-5060-8887-1aff99d40835.png">


注意点として、置換するデータベースは**コピーしたデータベース名**を入力してください。恐らく何も変更しないと元のデータベースが書き換えられてしまいます。

次に置換する文字列ですが、まず、「localhost:ポート番号/(フォルダ名)」から「レンタルサーバーのドメイン名」に置換します。

ドメイン名の確認方法は、「ドメイン設定」から以下のように確認できます。

<img width="983" alt="スクリーンショット 2018-05-09 11.40.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/553d74c4-5c94-9f9a-c464-22f21517bd30.png">

ここで注意ですが、**`http://`と末尾のスラッシュはつけないでください**。
以下参照です。
[WordPress移行時にURLをSQLで直接一括置換はダメ！ 「Search and Replace for WordPress Databases Script」を使おう](https://www.infoscoop.org/blogjp/2014/08/14/use-search-and-replace-for-wordpress-when-moving/)

入力ができたら、まず「dry run」で試しに実行してから「live run」で本当に書き換えをします。（live runをやってしまったら元には戻せません。）

<img width="1416" alt="スクリーンショット 2018-05-10 21.13.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/6c1bc131-6d91-a409-72c6-1fabbcb04782.png">

live runが実行し終われば、置換が完了です。

# 5. ローカルのデータベースをエクスポートする

続いて、編集したデータベースをエクスポートしましょう。phpmyadminから、コピーしたデータベースを選択してそれから上のメニューのエクスポートをクリックします。

<img width="953" alt="スクリーンショット 2018-05-09 12.00.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/9ce6bc1b-38aa-2a97-1af8-02974f647e1b.png">

するとエクスポートの設定の画面が開かれます。ここではエクスポートの設定を細かく指定したいので、Export Methodのところは、「詳細」を選択します。

<img width="409" alt="スクリーンショット 2018-05-09 12.03.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/31364bac-4efd-371c-a0c6-3990ba252a75.png">

出力のところは、「出力をファイルに保存する」を選択してください。

<img width="1023" alt="スクリーンショット 2018-05-09 12.03.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/24c66d82-5d8d-58d3-ef24-b726e03d34b2.png">

**次の設定が最も注意するべき設定です!!**
「他のデータベースシステムまたは古い MySQL サーバとの互換性:」のところを「NONE」から「**MYSQL40**」に変更してください。これをしないと、レンタルサーバーのデータベースにインポートしようとした時に、「Unknown collation: 'utf8_unicode_ci'」のようなエラーが出ます。

<img width="722" alt="スクリーンショット 2018-05-09 14.00.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/e92872f0-2078-9327-411d-8379478488fa.png">

その他の設定はこのような感じです。

<img width="818" alt="スクリーンショット 2018-05-09 12.04.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/3529dee9-99e6-d299-8c67-4108dbbad55d.png">

<img width="968" alt="スクリーンショット 2018-05-09 12.04.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/5e7dc8ec-f94b-bcbc-60bc-2808a2b55277.png">

あとは一番下の「実行」を押せば、無事エクスポートできたと思います。

# 6. エクスポートしたデータベースの内容を修正

エクスポートしたデータベースのこのままアップロードしてもいいのですが、恐らく以下のエラーになると思います。

<img width="422" alt="スクリーンショット 2018-05-09 12.26.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/ca69925f-72dc-b31b-ea86-ed57cf4b41f6.png">

このエラーを回避するために、エクスポートしたデータベース中の「utf8mb4」という文字列を「utf8」に置換する必要があります。

エディタもしくはプログラムでその文字列を一括置換してあげましょう。
私はrubyを使って置換しました。（面倒だったので一行で書きました。。）

```ruby
File.write("書き込むファイル.sql",File.read("読み込むファイル.sql").gsub("utf8mb4","utf8"))
```

ちなみにアップロードするときはファイル名はあまり考慮しなくていいので、適当な名前のファイルにしても大丈夫です。

# 7. レンタルサーバにデータベースをインポート

データベースの設定から、phpmyadminを開きます。

<img width="1025" alt="スクリーンショット 2018-05-09 12.14.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/46c0afb5-7ab8-4fbf-4499-429eb6469ac2.png">

次にデータベースを選択します。先ほどレンタルサーバー上で作ったデータベースをクリックします。

（※もしも、同じMySQLホスト名を複数使っている場合は、一回phpmyadminをログアウトする必要があります。）

<img width="748" alt="スクリーンショット 2018-05-09 12.41.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/f832a52b-4c20-cf27-bd79-67557844246f.png">

次に、上のメニューから「インポート」を選択します。

次の画面に行ったら、インポートするファイルを選択して、実行をクリックします。

<img width="839" alt="スクリーンショット 2018-05-09 23.10.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/d92e5629-7e6c-55fe-271b-15f175b518ed.png">

ここで注意したいのは、SQL互換モードを**MySQL40**にすることです！

これでインポートすれば、正常にインポートされるはずです。

# 8. ローカルのwp-configを修正する

wordpressからMySQLにアクセスできるように、ローカルの`wp-config.php`を編集します。

[データベース名などをメモしておく
](#データベース名などをメモしておく
) のところでメモした4つの項目を以下のところに入れていきましょう。

```php
/** WordPress のためのデータベース名 */
define('DB_NAME', 'xxxx_yyy');

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

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

/** MySQL のホスト名 */
define('DB_HOST', 'mysql1.php.xdomain.ne.jp');
```

# 9. FileZillaでローカルのwordpressのファイル群をアップロード

最後に、ローカルのwordpressをレンタルサーバーにアップロードします。

## レンタルサーバーのFTPの情報を確認する

レンタルサーバー内の左側のメニューにある、「FTPアカウント設定」をクリックします。
ここで、FTPにアクセスするために、FTPパスワードを設定する必要があるので、「編集」のボタンをクリックしてFTPパスワードを設定してください。

<img width="1002" alt="スクリーンショット 2018-05-10 7.37.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/430b31a9-b1c0-2f77-7ff2-8bb8fc4a27f3.png">

なお、次のステップで以下の3つの情報を使うので、メモしておきましょう。

1. FTPホスト
2. FTPユーザー（アカウント名）
3. FTPパスワード

<img width="1002" alt="スクリーンショット 2018-05-10 7.37.55--2.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/7282804c-b819-0ab7-d701-b2e9276c8651.png">


## FileZillaのインストールと接続設定

パスワードが設定できたら、次は、ファイルを転送するために**FileZilla**をローカルにインストールします。
以下のページからダウンロードしてください。
[FileZilla - The free FTP solution](https://filezilla-project.org/)

FileZillaをインストールして起動します。

次に、「ファイル」>「サイトマネージャー」をクリックするとウィンドウが表示されます。

<img width="886" alt="スクリーンショット 2018-05-10 7.58.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/f98f1627-b6fa-75e8-f432-330fb59b6036.png">

左の方にあるボタンの「新しいサイト」をクリックして、接続するFTPサーバーの情報を入力していきます。前のステップでメモした3つの項目をここに入力していきましょう。
また、「ログオンの種類」は「通常」を選択しましょう。

<img width="889" alt="スクリーンショット 2018-05-10 9.25.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/6675310d-1416-02f1-9301-88dc59ab7ac8.png">

これでレンタルサーバーに接続できたと思います。

## ローカルのwordpressをアップロード

アップロードする前に、レンタルサーバー内にある「default_page.png」と「index.html」を削除しましょう。この操作はFileZilla内でできます。

<img width="1188" alt="スクリーンショット 2018-05-10 9.38.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/63ba89a1-c799-2a8f-2e19-8d8851ffe963.png">

あとはローカルのwordpressをレンタルサーバー内にコピーしましょう。ローカルのwordpressのファイルを選択して、レンタルサーバーの方へドラック＆ドロップします。ここで注意したいのが、**「search replace DB master」フォルダは絶対にアップロードしない**ということです。これをアップロードしてしまうと、他の人にデータベースの内容を書き換えられてしまう恐れがあるので、絶対にアップロードしないように気をつけましょう。

（ちなみに`.DS_Store`もアップロードする必要はないですね。）

<img width="1195" alt="スクリーンショット 2018-05-10 9.39.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/aa2e0883-75ca-ea1e-d86c-1915970ec3b9.png">

これでデータの移行が全て完了です！

# ページを表示してみる

ページのドメインは、先ほど説明したように、ドメインの設定から見れます。

<img width="983" alt="スクリーンショット 2018-05-09 11.40.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/136124/553d74c4-5c94-9f9a-c464-22f21517bd30.png">

このドメインにアクセスすれば、正しくページが表示されるはずです！

# 参考

- [WordPress移転(移行)手順 | レンタルサーバー【エックスサーバー】](https://www.xserver.ne.jp/manual/man_install_transfer_wordpress.php)
- [無料レンタルサーバー新規お申し込み | ドメイン取得＆無料レンタルサーバー Xdomain(エックスドメイン)](https://www.xdomain.ne.jp/register/server.php)
- [会員IDとサーバーID](https://www.xdomain.ne.jp/manual/man_member_about_id.php)
- [WordPressを丸ごとコピーして同じサーバ内で同一サイトを作る手順
](https://plugmize.jp/archives/blog/20160720_wordpress_copy.html)
- [WordPress移行時にURLをSQLで直接一括置換はダメ！ 「Search and Replace for WordPress Databases Script」を使おう](https://www.infoscoop.org/blogjp/2014/08/14/use-search-and-replace-for-wordpress-when-moving/)
- [Unknown collation: 'utf8mb4_unicode_ci'　のエラーの原因](http://yachin29.hatenablog.com/entry/2017/06/27/175210)
- [FileZilla の使い方 - WordPress Codex 日本語版](https://wpdocs.osdn.jp/FileZilla_%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9)
- [WordPress移行時にURLをSQLで直接一括置換はダメ！ 「Search and Replace for WordPress Databases Script」を使おう](https://www.infoscoop.org/blogjp/2014/08/14/use-search-and-replace-for-wordpress-when-moving/)

# あとがき

色々とググったり試行錯誤してやっとできました。上手くページが表示された時は、よっしゃ！って感じで嬉しかったです。次は、dockerでwordpressを使うのとかやってみたいです。