Help us understand the problem. What is going on with this article?

CloudFront 適用済みの WordPress サイトを、Shifter へ移行する。

0.はじめに

こちらの記事でも触れていますが、

先日、WordPress

こちらの AWS の構成から、

Qiita_02_1024x640.001.jpeg


こちらの Shifter の構成に移行したんですが、

Qiita_02_1024x640.002.jpeg

結構大変だったので、移行の手順などをまとめました。

ご参考になれば ♪♪♪

😄😄😄

1. 移行元サイトから、All-in-One WP Migration を使っての WordPress データファイル(〜.wpress)のエクスポート

  1. 左側ペインから「All-in-One WP Migration」タブを選択し、「ファイル」でクリックする。
    • 01_01.png
  2. ダイアログが表示されるので、ちょっと待ちます。
    • 01_02.png
  3. ダウンロードの準備が完了したら、「ダウンロード」ボタンを押下します。
    • xxxxxxxxxxxx-YYYYMMDD-HHMMSS-****.wpress
    • 01_03.png

2. Shifter での、移行先サイトを作成 と ダウンロードしたデータファイル(〜.wpress)のインポート

  1. Shifter にログインし、Static サイトの一覧を表示します。

  2. 「Create NewStatic Site」ボタンを押下します。
    • 02_01.png
  3. 適当なプランの「Select」ボタンを押下します。
    • 02_02.png
  4. ダイアログが表示されるので、以下の項目を設定し、「Create」ボタンを押下します。
    • Site Name : ※任意
    • Team : ※任意
    • 02_03.png
  5. しばらくすると、Static サイトが作成されるので、「Settings」タブを選択し、以下の設定を行います。
    • Create Backup : 有効
    • Delete protection : 有効
    • FireShot Capture 408 - Shifter Dashboard - go.getshifter.io.png
  6. 「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
    • Artifact Title : ※任意 (ex : 「新規追加」)
  7. WordPress を起動後、「Dashboard」ボタンを押下し、ダッシュボードを表示します。

  8. 左側ペインから「Plugins」→「Add New」を選択し、All-in-One WP Migration をインストールします。
    • 02_05.png
  9. インストール後、有効化します。
    • 02_06.png
  10. All-in-One WP Migration で、ダウンロードしたファイル(〜.wpress)をインポートします。
    • 02_07.png
  11. 確認ダイアログが表示されるので、「I HAVE ENOUGH DISK SPACE」ボタンを押下します。
    • FireShot Capture 412 - Import ‹ affectionate-albattani5531.on.getshifter.io — WordPress_ - 397ba106-c327-4fbf-b86b-d02400aadfab.app.getshifter.io.png
    • FireShot Capture 413 - Import ‹ affectionate-albattani5531.on.getshifter.io — WordPress_ - 397ba106-c327-4fbf-b86b-d02400aadfab.app.getshifter.io.png
  12. 確認ダイアログが表示されるので、「PROCEED」ボタンを押下します。
    • FireShot Capture 414 - Import ‹ affectionate-albattani5531.on.getshifter.io — WordPress_ - 397ba106-c327-4fbf-b86b-d02400aadfab.app.getshifter.io.png
    • FireShot Capture 415 - Import ‹ affectionate-albattani5531.on.getshifter.io — WordPress_ - 397ba106-c327-4fbf-b86b-d02400aadfab.app.getshifter.io.png
  13. 完了ダイアログが表示されるので、「FINISH」ボタンを押下します。
    • FireShot Capture 416 - Import ‹ affectionate-albattani5531.on.getshifter.io — WordPress_ - 397ba106-c327-4fbf-b86b-d02400aadfab.app.getshifter.io.png
  14. Shifter で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
    • Artifact Title : ※任意 (ex : 「データ移行後」)

3. パーマリンクの再設定

どうやら、パーマリンクの再設定は移行されないみたいなので、元サイトと同様の設定をします。
もしかしたら、Custom Post Type Permalinks を利用している為かも…。

  • FireShot Capture 427 - パーマリンク設定 ‹ 現場クラウド Conne — WordPress_ - 19229627-c030-4254-a009-ed928aa57dc9.app.getshifter.io.png
  1. 「パーマリンクの設定 - 共通設定」において、元サイトと同様の設定をします。

  2. 「パーマリンクの設定 - カスタム投稿タイプのパーマリンク設定」において、元サイトと同様の設定をし、さらに以下の設定もします。
    • 「カスタマイズされたカスタムタクソノミーのパーマリンクを使用する。」 : ☑︎
  3. Shifter で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
    • Artifact Title : ※任意 (ex : 「パーマリンクの再設定」)

4. WordPress テーマの再インストール

以下の記事の構成で WordPress テーマのリリース管理を行うので、改めてテーマを再インストールします。getshifter/shifter-github を使って、テーマを管理しないのであれば、当該作業は必要ないです。

  1. いったん、現在のテーマ以外のテーマを有効にし、現在のテーマは削除します。

  2. 「Add New from GitHub」を選択後、以下の設定を行い、「今すぐインストール」ボタンを押下します。
  3. Shifter で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
    • Artifact Title : ※任意 (ex : テーマの再インストール」)

5. データ移行後の WordPress プラグインの各種設定

5−1. 不要なプラグインの停止

以下の記事を参考に、不要なプラグインを停止します。 (削除は、ちょっと怖いので、ある程度運用を見てから…)

  1. 不要なプラグインを停止します。
    • AMIMOTO Plugin Dashboard
    • C3 Cloudfront Cache Controller
    • Companion Auto Update
    • Cron Logger
    • Nginx Cache Controller
    • Update Control
    • Wordfence Security
    • WordPress インポートツール
    • WP Crontrol
    • WP-Ban
    • WP-Cron Status Checker
  2. Shifter で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
    • Artifact Title : ※任意 (ex : 「不要なプラグインの停止」)

5−2. Multi Feed Reader の RSS フィードの取得の不具合の対応

Multi Feed Reader の RSS フィードが正常に表示されなかったりしたので、正直、この方法であってるか自信はないんですが…、対応します…。

  1. WP RSS Aggregator をインストールします。

  2. 「Feed Sources」に元サイトの Multi Feed Reader で登録されていたフィードの URL を同様に追加します。

  3. 「Settings」の「General」タブで、以下の設定を行います。
    • Update interval : 「Once every 15 minutes (15 minutes)」
  4. Shifter で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
    • Artifact Title : ※任意 (ex : 「Multi Feed Reader の RSS フィードの対応」)

5−3. All in One SEO PackGoogle Analytics のトラッキングコードの再設定

もしかしたら、私の勘違いかもしれませんが…、設定が外れてしまう気がするので…。

  1. 以下の記事を参考に、設定します。
  2. Shifter で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
    • Artifact Title : ※任意 (ex : 「Google Analytics のトラッキングコードの再設定」)

5−4. Jetpack by WordPress.com プラグインの削除 と SNS 絡みの機能の代替設定

以下の対応をした後に、Jetpack by WordPress.com プラグインを削除し、Shifter で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。

Facebook のフィード

以下の記事を参考に、追加されていた Jetpack by WordPress.com のウィジットを、カスタムHTMLのウィジット (インラインフレーム) に変更します。

YouTube のインラインフレーム

<p style="text-align: center;">[youtube https://www.youtube.com/watch?v=xxxxxxxx]</p>

↓↓↓

<p style="text-align: center;">[embed]https://www.youtube.com/watch?v=xxxxxxxx[/embed]</p>

5−5. Shifter の embed の設定

以下の記事を参考に、Shifter の embed (リンクプレビュー) の Skip の設定を解除します。

6. 移行元のサイトから、 Shifter のサイトへの、ドメインの切替

今回、DNS を 名づけてねっと で管理しているので、DNS レコードの設定手順は、名づけてねっと 手順に沿っています。

6−1. Shifter で、移行するドメインを追加し、DNS レコードを設定する。

  1. Shifter の 「Domain」 の設定で、以下を設定し、「Submit」ボタンを押下する。
    • Add a domain
      • Domain : [サイトのドメイン]
    • FireShot Capture 316 - Shifter Dashboard - go.getshifter.io.png
  2. 「Manage Domains」 にサイトのドメインが追加されることを確認し、「Check」ボタンを押下します。
    • FireShot Capture 317 - Shifter Dashboard - go.getshifter.io.png
  3. 「Domain configuration」 ダイアログが表示されるので、以下を確認します。
    • Name : _xxxxxxxx.xxxx.example.com.
    • Type : 「CNAME」
    • Value : _xxxxxxxx.xxxxxxxx.acm-validations.aws.
    • FireShot Capture 318 - Shifter Dashboard - go.getshifter.io.png
  4. 確認した DNS レコードを設定します。
    • NAME : _xxxxxxxx.xxxx
      • ※ _xxxxxxxx.xxxx.example.com. のサブドメインからの右側部分
    • TYPE : 「CNAME」
    • TTL : ※任意
    • VALUE : xxxxxxxx.xxxxxxxx.acm-validations.aws
    • FireShot Capture 319 - ゾーン編集 - nadukete.online-navi.jp.png
  5. ある程度待つと DNS レコードの設定が反映されるので、Shifter の 「Domain」 の設定で、追加したドメインの Status が 青色背景色の 「Verified」 になることを確認します。

6−2. AWS の移行元サイトのドメインを別のドメインに変更する。

例) 移行サイト (Shifter) 移行後の旧サイト (AWS)
サブドメイン www www-old
ホスト www.example.com www-old.example.com
URL https://www.example.com https://www-old.example.com
  1. 移行元の WordPress サイトの 「設定」 から、以下の項目を変更し、「変更を保存」ボタンを押下します。
  2. AWSApplication Load Balancer で、所定のロードバランサーのリスナーのルールにおいて、該当ドメインのルールの以下の項目を変更します。
    • ホスト : [移行後の旧サイトのホスト]
      • 例) : www-old.example.com
    • FireShot Capture 375 - ルール - EC2 Management Console - ap-northeast-1.console.aws.amazon.com.png
  3. 登録されている [移行サイトのサブドメイン] の DNS レコードを [移行後の旧サイトのサブドメイン] として設定し直します。
    • 削除
      • NAME : [移行サイトのサブドメイン]
      • 例) : www CNAME 300 xxxxxxxxxxxxxx.cloudfront.net
    • 追加
      • NAME : [移行後の旧サイトのサブドメイン]
      • TYPE : 削除した [移行サイトのサブドメイン] の TYPE
      • TTL : ※任意
      • VALUE : 削除した [移行サイトのサブドメイン] の VALUE
      • 例) : www-old CNAME 300 xxxxxxxxxxxxxx.cloudfront.net
  4. AWSAmazon CloudFront で、所定の Distribution において、以下の項目を変更します。
    • Alternate Domain Names (CNAMEs) : [移行後の旧サイトのホスト]
      • 例) : www-old.example.com
    • FireShot Capture 374 - AWS CloudFront Management Console - console.aws.amazon.com.png
  5. Shifter の 「Domain」 の設定で、追加したドメインの 「Attach」ボタンを押下します。
    • FireShot Capture 321 - Shifter Dashboard - go.getshifter.io.png
  6. 「Attach Domain」のダイアログが表示されるので、 「Attach Domain」ボタンを押下します。
    • FireShot Capture 323 - Shifter Dashboard - go.getshifter.io.png
  7. 正常にドメインがアタッチされると、以下の画面が表示されるので、以下の項目を確認します。
    • Record Value :
      • 例) xxxxxxxx-xxxxxx0000.on.getshifter.io
    • FireShot Capture 324 - Shifter Dashboard - go.getshifter.io.png
  8. [移行サイトのサブドメイン] の DNS レコードを設定します。
    • NAME : [移行サイトのサブドメイン]
    • TYPE : 「CNAME」
    • TTL : ※任意
    • VALUE : ※ ドメインのアタッチ後に確認した「Record Value」
      • 例) xxxxxxxx-xxxxxx0000.on.getshifter.io
  9. Shifter で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
    • Artifact Title : ※任意 (ex : 「ドメイン切替後」)

99.ハマりポイント

  • 今回は、結構ハマりました…。

  • All-in-One WP Migration のインポートでは、データサイズによっては、正常にインポート出来なかったりするので、何度もインポートし直したり、分割してインポートしたり、結構時間取られました…。

  • All-in-One WP Migration のインポートでは、パーマリンクの設定が移行されないみたいで、それも最初に気付かずに、困りました…。

  • Shifter では、Custom Post Type Permalinksの「カスタマイズされたカスタムタクソノミーのパーマリンクを使用する。」 にチェクしないと、正常にリンクが機能しなくて、ここでもかなりハマりました…。

  • Multi Feed Reader での RSS フィードが正常に表示されず、これも理由がわからず、かなりハマりました…。

  • Jetpack by WordPress.com 絡みもかなりハマりました…。基本的に削除しないとマズいみたいです…。Generate 出来なくなったり、非常に困りました…。後、テーマに Jetpack by WordPress.com の処理が入っているものもあり…、そちらの対応も…。

  • ドメインの切替では、当記事の順番で進めないと、設定が出来なくなったりして…、ここでも非常に時間が掛かりました…。

  • 後、全般的にテーマに不要な 「/」 がある場合、Shifter ではエラーとなることが多く、ここでもかなりハマりました…。

XX.まとめ

今回、Shifterサポート の方々に非常にお世話になりました。

この場を借りて、

どうもありがとうございました !!!

😭😭😭

感謝 ♪♪♪

🙇‍♂️🙇‍♂️🙇‍♂️

以上、ご参考になれば ♪♪♪

👋👋👋

kusokamayarou
鹿児島市の企業に勤めて、枕崎でテレワークしてる IT エンジニアです。 最近、自分で事業をしようとちょっとずつ動き始めました。
http://kusokamayarou.hatenablog.com/
genbasupport
建設業を支えるコミュニケーション&マネジメントのサービスを開発・運営するエンジニアチーム
http://www.genbasupport.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away