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

# ０．はじめに

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

* [Shifter 移行後の WordPress テーマの GitHub を使ったリリース管理とその適用について試してみた。 \- Qiita](https://qiita.com/kusokamayarou/items/7901a93ea788962cce22)

先日、[WordPress](https://wordpress.com) を

こちらの [AWS](https://aws.amazon.com/jp/) の構成から、

![Qiita_02_1024x640.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/8571547e-5c38-c616-dcfb-b781fab1125b.jpeg)

<br>

こちらの [Shifter](https://go.getshifter.io) の構成に移行したんですが、

![Qiita_02_1024x640.002.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/2fdf0a22-6535-0f75-dae1-0bb1d7cacf12.jpeg)

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

ご参考になれば ♪♪♪

😄😄😄

# １． 移行元サイトから、[All\-in\-One WP Migration](https://ja.wordpress.org/plugins/all-in-one-wp-migration/) を使っての [WordPress](https://wordpress.com) データファイル(〜.wpress)のエクスポート

* ※ 参考 :
    * [WordPressサイトをShifterに移行する時のポイント \#JP\_Getshifter \| Gatespace's Blog](https://gatespace.jp/2019/09/11/shifter-migration/)

1. 左側ペインから「All-in-One WP Migration」タブを選択し、「ファイル」でクリックする。
    * ![01_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/c4f50717-ad05-f80e-092e-98b2922be789.png)
1. ダイアログが表示されるので、ちょっと待ちます。
    * ![01_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/d1eee5fb-ca00-b57c-a7ea-934a68facf94.png)
1. ダウンロードの準備が完了したら、「ダウンロード」ボタンを押下します。
    * xxxxxxxxxxxx-YYYYMMDD-HHMMSS-****.wpress
    * ![01_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/ca81725e-8ecf-9598-7a49-518bbf559523.png)

# ２． [Shifter](https://go.getshifter.io) での、移行先サイトを作成 と ダウンロードしたデータファイル(〜.wpress)のインポート

1. [Shifter](https://go.getshifter.io/admin/sites) にログインし、Static サイトの一覧を表示します。
<br><br>
1. 「Create NewStatic Site」ボタンを押下します。
    * ![02_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/48fdaf80-0f96-4193-f2ea-d39c60a8226b.png)
1. 適当なプランの「Select」ボタンを押下します。
    * ![02_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/5bf66ec7-8649-f6f1-dd60-5613f40baa05.png)
1. ダイアログが表示されるので、以下の項目を設定し、「Create」ボタンを押下します。
    * Site Name : ※任意
    * Team : ※任意
    * ![02_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/75dde468-c5c3-5057-3538-3d9cc32e1610.png)
1. しばらくすると、Static サイトが作成されるので、「Settings」タブを選択し、以下の設定を行います。
    * Create Backup : 有効
    * Delete protection : 有効
    * ![FireShot Capture 408 - Shifter Dashboard - go.getshifter.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/b6fb5858-74a7-0ea7-9963-b104cba062f8.png)
1. 「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
    * Artifact Title : ※任意 (ex : 「新規追加」)
1. [WordPress](https://wordpress.com) を起動後、「Dashboard」ボタンを押下し、ダッシュボードを表示します。
<br><br>
1. 左側ペインから「Plugins」→「Add New」を選択し、[All\-in\-One WP Migration](https://ja.wordpress.org/plugins/all-in-one-wp-migration/) をインストールします。
    * ![02_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/e96a35ec-0ffd-dbdc-4299-9e8d50d42d0b.png)
1. インストール後、有効化します。
    * ![02_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/49473723-494f-576b-bbc2-769b4d0f9a06.png)
1. All-in-One WP Migration で、ダウンロードしたファイル(〜.wpress)をインポートします。
    * ![02_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/35c8595f-83ab-87e9-4d66-1db18dfb4041.png)
1. 確認ダイアログが表示されるので、「I HAVE ENOUGH DISK SPACE」ボタンを押下します。
    * ![FireShot Capture 412 - Import ‹ affectionate-albattani5531.on.getshifter.io — WordPress_ - 397ba106-c327-4fbf-b86b-d02400aadfab.app.getshifter.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/7131b41e-96d0-6609-254e-1534e9583aba.png)
    * ![FireShot Capture 413 - Import ‹ affectionate-albattani5531.on.getshifter.io — WordPress_ - 397ba106-c327-4fbf-b86b-d02400aadfab.app.getshifter.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/10742074-f650-62ee-eded-85e3920ff795.png)
1. 確認ダイアログが表示されるので、「PROCEED」ボタンを押下します。
    * ![FireShot Capture 414 - Import ‹ affectionate-albattani5531.on.getshifter.io — WordPress_ - 397ba106-c327-4fbf-b86b-d02400aadfab.app.getshifter.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/a797bf9b-ad2f-1540-a311-89e7743fc74a.png)
    * ![FireShot Capture 415 - Import ‹ affectionate-albattani5531.on.getshifter.io — WordPress_ - 397ba106-c327-4fbf-b86b-d02400aadfab.app.getshifter.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/77e9f817-9eb6-1cfb-b28d-35090bd77a56.png)
1. 完了ダイアログが表示されるので、「FINISH」ボタンを押下します。
    * ![FireShot Capture 416 - Import ‹ affectionate-albattani5531.on.getshifter.io — WordPress_ - 397ba106-c327-4fbf-b86b-d02400aadfab.app.getshifter.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/126d4d8e-82e4-480a-21b7-d496b38d77ea.png)
1. [Shifter](https://go.getshifter.io) で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
    * Artifact Title : ※任意 (ex : 「データ移行後」)

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

どうやら、パーマリンクの再設定は移行されないみたいなので、元サイトと同様の設定をします。
もしかしたら、[Custom Post Type Permalinks](https://ja.wordpress.org/plugins/custom-post-type-permalinks/) を利用している為かも…。

* ![FireShot Capture 427 - パーマリンク設定 ‹ 現場クラウド Conne — WordPress_ - 19229627-c030-4254-a009-ed928aa57dc9.app.getshifter.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/1649c210-4f58-93b7-7328-b695cfd21fd9.png)

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

# ４． [WordPress](https://wordpress.com) テーマの再インストール

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

* [Shifter 移行後の WordPress テーマの GitHub を使ったリリース管理とその適用について試してみた。 \- Qiita](https://qiita.com/kusokamayarou/items/7901a93ea788962cce22)

1. いったん、現在のテーマ以外のテーマを有効にし、現在のテーマは削除します。
<br><br>
1. 「Add New from GitHub」を選択後、以下の設定を行い、「今すぐインストール」ボタンを押下します。
    * GitHub repo URL : [インストール元の GitHub リポジトリ URL]
        * 例) git@github.com:xxxx/sample-theme.git
    * GitHub token (option) : [Personal access tokens]
        * ※プライベートリポジトリの場合
    * ![FireShot Capture 438 - Add New from GitHub ‹ 現場クラウド Conne — WordPress_ - 19229627-c030-4254-a009-ed928aa57dc9.app.getshifter.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/daa9ea4e-5faf-e9dc-ae18-64e8c9809041.png)
    * ※参考
        * [Shifter Github Plugin/Theme Installer プラグインを公開しました \- 株式会社デジタルキューブ](https://www.digitalcube.jp/shifter/10479/)
1. [Shifter](https://go.getshifter.io) で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
    * Artifact Title : ※任意 (ex : テーマの再インストール」)

# ５． データ移行後の [WordPress](https://wordpress.com) プラグインの各種設定

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

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

* [Incompatible and unrecommended WordPress plugins on Shifter \| Shifter Documentation](https://support.getshifter.io/en/articles/3086606-incompatible-and-unrecommended-wordpress-plugins-on-shifter)

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
1. [Shifter](https://go.getshifter.io) で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
    * Artifact Title : ※任意 (ex : 「不要なプラグインの停止」)

## ５−2． [Multi Feed Reader](https://wordpress.org/plugins/multi-feed-reader/) の RSS フィードの取得の不具合の対応

[Multi Feed Reader](https://wordpress.org/plugins/multi-feed-reader/) の RSS フィードが正常に表示されなかったりしたので、正直、この方法であってるか自信はないんですが…、対応します…。

1. [WP RSS Aggregator](https://ja.wordpress.org/plugins/wp-rss-aggregator/) をインストールします。
<br><br>
1. 「Feed Sources」に元サイトの [Multi Feed Reader](https://wordpress.org/plugins/multi-feed-reader/) で登録されていたフィードの URL を同様に追加します。
<br><br>
1. 「Settings」の「General」タブで、以下の設定を行います。
    * Update interval : 「Once every 15 minutes (15 minutes)」
1. [Shifter](https://go.getshifter.io) で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
    * Artifact Title : ※任意 (ex : 「Multi Feed Reader の RSS フィードの対応」)

## ５−３． [All in One SEO Pack](https://ja.wordpress.org/plugins/all-in-one-seo-pack/) の [Google Analytics](https://analytics.google.com/analytics/web/) のトラッキングコードの再設定

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

1. 以下の記事を参考に、設定します。
    * [All in one SEO PackでGoogleアナリティクスを導入する方法｜アクセス解析ツール「AIアナリスト」ブログ](https://wacul-ai.com/blog/access-analysis/google-analytics-setting/wordpress-all-in-one-seo-pack/)
1. [Shifter](https://go.getshifter.io) で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
    * Artifact Title : ※任意 (ex : 「[Google Analytics](https://analytics.google.com/analytics/web/) のトラッキングコードの再設定」)

## ５−４． [Jetpack by WordPress\.com](https://ja.wordpress.org/plugins/jetpack/) プラグインの削除 と SNS 絡みの機能の代替設定

以下の対応をした後に、[Jetpack by WordPress\.com](https://ja.wordpress.org/plugins/jetpack/) プラグインを削除し、[Shifter](https://go.getshifter.io) で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。

* Artifact Title : ※任意 (ex : 「[Jetpack by WordPress\.com](https://ja.wordpress.org/plugins/jetpack/) の削除」)

### ■ [Facebook](https://facebook.com/) のフィード

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

* [超簡単！WordPressのサイドバーにFacebookのタイムラインを埋め込む方法 \| 0から始めるワードプレス・マーケティング](https://majisaka.site/facebook-pageplugin/)
* [WordPressのカスタムHTMLにFBを埋め込むとエラーになる理由！ \| 社会不適合者のWEBフリーランス生活](https://wp-technique.com/facebook-customhtml-error/)

### ■ [YouTube](https://www.youtube.com/) のインラインフレーム

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

↓↓↓

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

## ５−５． [Shifter](https://go.getshifter.io) の embed の設定

以下の記事を参考に、[Shifter](https://go.getshifter.io) の embed (リンクプレビュー) の Skip の設定を解除します。

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

# ６． 移行元のサイトから、 [Shifter](https://go.getshifter.io) のサイトへの、ドメインの切替

今回、DNS を [名づけてねっと](https://www.nadukete.net/) で管理しているので、DNS レコードの設定手順は、[名づけてねっと](https://www.nadukete.net/) 手順に沿っています。

## ６−１． [Shifter](https://go.getshifter.io) で、移行するドメインを追加し、DNS レコードを設定する。

1. [Shifter](https://go.getshifter.io) の 「Domain」 の設定で、以下を設定し、「Submit」ボタンを押下する。
    * Add a domain
        * Domain : [サイトのドメイン]
    * ![FireShot Capture 316 - Shifter Dashboard - go.getshifter.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/a685815e-140a-1e89-b946-3514defccd53.png)
1. 「Manage Domains」 にサイトのドメインが追加されることを確認し、「Check」ボタンを押下します。
    * ![FireShot Capture 317 - Shifter Dashboard - go.getshifter.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/8efec5d6-a3d1-1925-c44e-5eaa1c0669d1.png)
1. 「Domain configuration」 ダイアログが表示されるので、以下を確認します。
    * Name : _xxxxxxxx.xxxx.example.com.
    * Type : 「CNAME」
    * Value : _xxxxxxxx.xxxxxxxx.acm-validations.aws.
    * ![FireShot Capture 318 - Shifter Dashboard - go.getshifter.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/f9632209-4f05-47cd-dfe8-4a53e775935b.png)
1. 確認した DNS レコードを設定します。
    * NAME : _xxxxxxxx.xxxx
        * ※ _xxxxxxxx.xxxx.example.com. のサブドメインからの右側部分
    * TYPE : 「CNAME」
    * TTL : ※任意
    * VALUE : xxxxxxxx.xxxxxxxx.acm-validations.aws
        * ※ 先頭の 「_(アンダースコア)」 を付与するとエラーになるので、削除。
            * [DNS 検証の問題のトラブルシューティング \- AWS Certificate Manager](https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/troubleshooting-DNS-validation.html)
        * ※ 最後の 「.(ドット)」 は削除。
    * ![FireShot Capture 319 - ゾーン編集 - nadukete.online-navi.jp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/212f97a1-9159-2b08-4b17-767958018bce.png)
1. ある程度待つと DNS レコードの設定が反映されるので、[Shifter](https://go.getshifter.io) の 「Domain」 の設定で、追加したドメインの Status が 青色背景色の 「Verified」 になることを確認します。

## ６−２． [AWS](https://aws.amazon.com/jp/) の移行元サイトのドメインを別のドメインに変更する。

| 例) | 移行サイト (Shifter)| 移行後の旧サイト (AWS) |
|:--|:--|:--|
| ｻﾌﾞﾄﾞﾒｲﾝ |www|www-old|
| ﾎｽﾄ | www.example.com | www-old.example.com |
| URL | https://www.example.com | https://www-old.example.com |

1. 移行元の [WordPress](https://wordpress.com) サイトの 「設定」 から、以下の項目を変更し、「変更を保存」ボタンを押下します。
    * WordPress アドレス (URL) : [移行後の旧サイトのURL]
        * 例) : https://www-old.example.com 
    * サイトアドレス (URL) : [移行後の旧サイトのURL]
        * 例) : https://www-old.example.com 
    * ![FireShot Capture 444 - 一般設定 ‹ 現場クラウド Conne — WordPress - conne-old.genbasupport.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/8e083a26-c5a2-102d-e5b8-c6085b242863.png)
1. [AWS](https://aws.amazon.com/jp/) の [Application Load Balancer](https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/application/introduction.html) で、所定のロードバランサーのリスナーのルールにおいて、該当ドメインのルールの以下の項目を変更します。
    * ホスト : [移行後の旧サイトのホスト]
        * 例) : www-old.example.com
    * ![FireShot Capture 375 - ルール - EC2 Management Console - ap-northeast-1.console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/a217c6a0-7a71-edea-c736-ba5d56bf3d4f.png)
1. 登録されている [移行サイトのサブドメイン] の DNS レコードを [移行後の旧サイトのサブドメイン] として設定し直します。
    * 削除
        * NAME : [移行サイトのサブドメイン]
        * 例) : www	CNAME	300	xxxxxxxxxxxxxx.cloudfront.net
<br>↓
    * 追加
        * NAME : [移行後の旧サイトのサブドメイン]
        * TYPE : 削除した [移行サイトのサブドメイン] の TYPE
        * TTL : ※任意
        * VALUE : 削除した [移行サイトのサブドメイン] の VALUE
        * 例) : www-old	CNAME	300	xxxxxxxxxxxxxx.cloudfront.net
1. [AWS](https://aws.amazon.com/jp/) の [Amazon CloudFront](https://aws.amazon.com/jp/cloudfront/) で、所定の Distribution において、以下の項目を変更します。
    * Alternate Domain Names (CNAMEs) : [移行後の旧サイトのホスト]
        * 例) : www-old.example.com
    * ![FireShot Capture 374 - AWS CloudFront Management Console - console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/e45d671f-5e25-2681-023e-273154ddc600.png)
1. [Shifter](https://go.getshifter.io) の 「Domain」 の設定で、追加したドメインの 「Attach」ボタンを押下します。
   * ![FireShot Capture 321 - Shifter Dashboard - go.getshifter.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/23b2b96d-04b5-6d10-10ca-027a12e6782c.png)
1. 「Attach Domain」のダイアログが表示されるので、 「Attach Domain」ボタンを押下します。
   * ![FireShot Capture 323 - Shifter Dashboard - go.getshifter.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/d7162a3c-11d8-267c-b0a5-7a2ed6a9b9c0.png)
1. 正常にドメインがアタッチされると、以下の画面が表示されるので、以下の項目を確認します。
    * Record Value : 
        * 例) xxxxxxxx-xxxxxx0000.on.getshifter.io
    * ![FireShot Capture 324 - Shifter Dashboard - go.getshifter.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/96602756-c5bd-b09c-56b1-ccf589430d95.png)
1. [移行サイトのサブドメイン] の DNS レコードを設定します。
    * NAME : [移行サイトのサブドメイン]
    * TYPE : 「CNAME」
    * TTL : ※任意
    * VALUE : ※ ドメインのアタッチ後に確認した「Record Value」
        * 例) xxxxxxxx-xxxxxx0000.on.getshifter.io
1. [Shifter](https://go.getshifter.io) で「Overview」タブを選択し、「Generate Artifact」ボタンを押下します。
    * Artifact Title : ※任意 (ex : 「ドメイン切替後」)

# ９９．ハマりポイント

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

* [All\-in\-One WP Migration](https://ja.wordpress.org/plugins/all-in-one-wp-migration/) のインポートでは、データサイズによっては、正常にインポート出来なかったりするので、何度もインポートし直したり、分割してインポートしたり、結構時間取られました…。

* [All\-in\-One WP Migration](https://ja.wordpress.org/plugins/all-in-one-wp-migration/) のインポートでは、パーマリンクの設定が移行されないみたいで、それも最初に気付かずに、困りました…。

* [Shifter](https://go.getshifter.io) では、[Custom Post Type Permalinks](https://ja.wordpress.org/plugins/custom-post-type-permalinks/)の「カスタマイズされたカスタムタクソノミーのパーマリンクを使用する。」 にチェクしないと、正常にリンクが機能しなくて、ここでもかなりハマりました…。

* [Multi Feed Reader](https://wordpress.org/plugins/multi-feed-reader/) での RSS フィードが正常に表示されず、これも理由がわからず、かなりハマりました…。

* [Jetpack by WordPress.com](https://ja.wordpress.org/plugins/jetpack/) 絡みもかなりハマりました…。基本的に削除しないとマズいみたいです…。Generate 出来なくなったり、非常に困りました…。後、テーマに [Jetpack by WordPress.com](https://ja.wordpress.org/plugins/jetpack/) の処理が入っているものもあり…、そちらの対応も…。

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

* 後、全般的にテーマに不要な 「/」 がある場合、[Shifter](https://go.getshifter.io) ではエラーとなることが多く、ここでもかなりハマりました…。

# ＸＸ．まとめ

今回、[Shifter](https://go.getshifter.io) の [サポート](https://support.getshifter.io) の方々に非常にお世話になりました。

この場を借りて、

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

😭😭😭

感謝 ♪♪♪

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

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

👋👋👋