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

０．はじめに

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

• Shifter 移行後の WordPress テーマの GitHub を使ったリリース管理とその適用について試してみた。 - Qiita

先日、WordPress を

こちらの AWS の構成から、

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

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

ご参考になれば ♪♪♪

😄😄😄

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

• ※ 参考 :
  • WordPressサイトをShifterに移行する時のポイント #JP_Getshifter | Gatespace's Blog

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

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

1. Shifter にログインし、Static サイトの一覧を表示します。
   
   
   
2. 「Create NewStatic Site」ボタンを押下します。
   • 
3. 適当なプランの「Select」ボタンを押下します。
   • 
4. ダイアログが表示されるので、以下の項目を設定し、「Create」ボタンを押下します。
   • Site Name : ※任意
   • Team : ※任意
   • 
5. しばらくすると、Static サイトが作成されるので、「Settings」タブを選択し、以下の設定を行います。
   • Create Backup : 有効
   • Delete protection : 有効
   • 
6. 「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
   • Artifact Title : ※任意 (ex : 「新規追加」)
7. WordPress を起動後、「Dashboard」ボタンを押下し、ダッシュボードを表示します。
   
   
   
8. 左側ペインから「Plugins」→「Add New」を選択し、All-in-One WP Migration をインストールします。
   • 
9. インストール後、有効化します。
   • 
10. All-in-One WP Migration で、ダウンロードしたファイル(〜.wpress)をインポートします。
    • 
11. 確認ダイアログが表示されるので、「I HAVE ENOUGH DISK SPACE」ボタンを押下します。
    • 
    • 
12. 確認ダイアログが表示されるので、「PROCEED」ボタンを押下します。
    • 
    • 
13. 完了ダイアログが表示されるので、「FINISH」ボタンを押下します。
    • 
14. Shifter で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
    • Artifact Title : ※任意 (ex : 「データ移行後」)

３． パーマリンクの再設定

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

• 

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

４． WordPress テーマの再インストール

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

• Shifter 移行後の WordPress テーマの GitHub を使ったリリース管理とその適用について試してみた。 - Qiita

1. いったん、現在のテーマ以外のテーマを有効にし、現在のテーマは削除します。
   
   
   
2. 「Add New from GitHub」を選択後、以下の設定を行い、「今すぐインストール」ボタンを押下します。
   • GitHub repo URL : [インストール元の GitHub リポジトリ URL]
     • 例) [e-mail]:xxxx/sample-theme.git
   • GitHub token (option) : [Personal access tokens]
     • ※プライベートリポジトリの場合
   • 
   • ※参考
     • Shifter Github Plugin/Theme Installer プラグインを公開しました - 株式会社デジタルキューブ
3. Shifter で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
   • Artifact Title : ※任意 (ex : テーマの再インストール」)

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

５−１． 不要なプラグインの停止

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

• Incompatible and unrecommended WordPress plugins on Shifter | Shifter Documentation

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 : 「不要なプラグインの停止」)

５−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 フィードの対応」)

５−３． All in One SEO Pack の Google Analytics のトラッキングコードの再設定

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

1. 以下の記事を参考に、設定します。
   • All in one SEO PackでGoogleアナリティクスを導入する方法｜アクセス解析ツール「AIアナリスト」ブログ
2. Shifter で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
   • Artifact Title : ※任意 (ex : 「Google Analytics のトラッキングコードの再設定」)

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

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

• Artifact Title : ※任意 (ex : 「Jetpack by WordPress.com の削除」)

■ Facebook のフィード

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

• 超簡単！WordPressのサイドバーにFacebookのタイムラインを埋め込む方法 | 0から始めるワードプレス・マーケティング
• WordPressのカスタムHTMLにFBを埋め込むとエラーになる理由！ | 社会不適合者のWEBフリーランス生活

■ 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>

５−５． Shifter の embed の設定

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

• Shifterで静的化したサイトにカテゴリ・タグのフィードと外部埋め込み用(embed)ページが含まれるようになりました。 - 株式会社デジタルキューブ

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

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

６−１． Shifter で、移行するドメインを追加し、DNS レコードを設定する。

1. Shifter の 「Domain」 の設定で、以下を設定し、「Submit」ボタンを押下する。
   • Add a domain
     • Domain : [サイトのドメイン]
   • 
2. 「Manage Domains」 にサイトのドメインが追加されることを確認し、「Check」ボタンを押下します。
   • 
3. 「Domain configuration」 ダイアログが表示されるので、以下を確認します。
   • Name : _xxxxxxxx.xxxx.example.com.
   • Type : 「CNAME」
   • Value : _xxxxxxxx.xxxxxxxx.acm-validations.aws.
   • 
4. 確認した DNS レコードを設定します。
   • NAME : _xxxxxxxx.xxxx
     • ※ _xxxxxxxx.xxxx.example.com. のサブドメインからの右側部分
   • TYPE : 「CNAME」
   • TTL : ※任意
   • VALUE : xxxxxxxx.xxxxxxxx.acm-validations.aws
     • ※ 先頭の 「_(アンダースコア)」 を付与するとエラーになるので、削除。
       • DNS 検証の問題のトラブルシューティング - AWS Certificate Manager
     • ※ 最後の 「.(ドット)」 は削除。
   • 
5. ある程度待つと DNS レコードの設定が反映されるので、Shifter の 「Domain」 の設定で、追加したドメインの Status が 青色背景色の 「Verified」 になることを確認します。

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

９９．ハマりポイント

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

• 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 ではエラーとなることが多く、ここでもかなりハマりました…。

ＸＸ．まとめ

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

この場を借りて、

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

😭😭😭

感謝 ♪♪♪

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

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

👋👋👋