NetlifyでホスティングしていたGatsbyのwebページをCloudflare Pagesに移設した

### 前提条件
- Cloudflare のアカウントが作成済み。
- GitHub に静的ページのリポジトリが作成済み。
- Netlify で静的ページを運用している。

### 概要
以下の手順で構築した Netlify で運用中のwebページが存在しており、これを今回 Cloudflare Pages に移設しました。また、今回の移設に際して、DNSの運用をムームードメインからCloudflare DNSに変更しました。
- [Gatsbyを使ってNetlifyにブログを公開するまで](https://qiita.com/akase244/items/a2a3f9c1c983068ac064)
- [Zone Apex(Naked Domain)にCNAMEが設定できないのでANAME(ALIAS)を設定したい（Netlify + ムームードメイン版）](https://tech.innovator.jp.net/entry/2019/06/24/123206)
- [Netlifyへのデプロイ時に「Failed during stage 'building site': Build script returned non-zero exit code: 1」が発生したので対応方法を調べてみた](https://qiita.com/akase244/items/0eed6b8c941515417377)

### 手順
[Cloudflare Pages](https://developers.cloudflare.com/pages/) の [Framework guides](https://developers.cloudflare.com/pages/framework-guides/) の中にある [Gatsby](https://developers.cloudflare.com/pages/framework-guides/deploy-a-gatsby-site/) の手順に沿って作業を進める。

1. [Cloudflareのログイン画面](https://dash.cloudflare.com/login)からログインし、画面左側のメニューより、「コンピューティング (Workers)」→「Workers & Pages」のリンクにアクセスします。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/50c9cd93-fde3-4594-b7d0-e987d5d4b811.png)
2. 以下のように初期表示では「Workers」のタブが表示されていることを確認します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/fb3cea2d-2fac-43e3-aec8-a7988ef72659.png)
3. 「Pages」のタブに切り替えて、「Import an existing Git repository」の「始める」ボタンをクリックします。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/a83c7e62-6e16-4273-9cde-d31bc19080b3.png)
4. 今回は GitHub のリポジトリと連携させるので、「GitHubに接続」ボタンをクリックします。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/c5e7a812-3121-46ab-a7f1-540d8d663430.png)
5. 連携させたいGitHubのアカウントを選択します。
    ![Screenshot from 2025-05-06 15-16-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/c8f2065f-21a3-4b31-8012-5b96c47d5ea7.png)
6. 連携対象のGitHubのリポジトリを選択して、「Install & Authorize」ボタンをクリックします。
    ![Screenshot from 2025-05-06 15-20-34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/a883e103-30b4-4001-9a82-728667bb9b68.png)
7. 画面に表示されているリポジトリ名をクリックするとチェックマークが表示されるので、この状態になったら「セットアップの開始」ボタンをクリックします。
    ![Screenshot from 2025-05-06 15-25-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/aec513bc-ee70-42cb-924d-1f80e154ecad.png)
8. 「フレームワーク プリセット」から「Gatsby」を選択して、その他はデフォルト状態のままで「保存してデプロイする」ボタンをクリックします。
    ![Screenshot from 2025-05-06 15-30-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/9f158523-3e69-41d3-8a61-f5ea2de56500.png)
9. ビルドが始まるのでしばらく待ちます。
    ![Screenshot from 2025-05-06 15-34-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/27676f90-dcef-4ac1-be7a-4ae1e40aebb5.png)
10. ビルド中に「 `error:0308010C:digital envelope routines::unsupported` 」といったエラーが発生してデプロイに失敗しました。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/b4788d6f-b11f-49b4-8c14-92e6d4b9a4ec.png)
11. 恐らくビルド時に利用しているNodeのバージョンが高いためにこのようなエラーが発生していると考えられます。ログからNodeのバージョンを確認すると「18.17.1」であることがわかります。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/f42dc40c-d32e-42f4-b3d3-deb2c7b9a501.png)
12. Netlifyのデプロイ時のログからNodeのバージョンを確認すると「v16.20.2」であることがわかりました。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/3f6d64d8-64e3-41a8-82cb-f5841f164f67.png)
13. 環境変数の設定画面に戻り「NODE_VERSION」として「16.20.2」を指定し、再度「保存してデプロイする」ボタンをクリックします。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/fe629478-96f7-4bdc-b26f-893019f851ee.png)
14. 今度はNodeのバージョンが「16.20.2」でビルドされていることがわかります。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/e06d2098-1dde-4802-bf6e-274e25f00ada.png)
15. ビルドが成功したら、画面上に表示されているプレビュー用のURLにアクセスします。
    ![Screenshot from 2025-05-06 16-06-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/cb80b72e-c7e2-4265-865f-c9981faed007.png)
16. ブラウザにてwebページが正常に表示されることを確認します。
17. 「プロジェクトに進む」ボタンをクリックして、「Workers & Pages」のデプロイのタブが表示されていることを確認します。
    ![Screenshot from 2025-05-06 16-29-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/5801cec8-1ed1-4a2a-bf54-a13e4320c9e1.png)
18. 「カスタム ドメイン」のタブへ移動して、「カスタム ドメインを設定」ボタンをクリックします。
    ![Screenshot from 2025-05-06 16-34-39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/23522fcd-bdbc-4e2e-9b8d-8c2acefab6dd.png)
19. ドメイン名を入力して、「続行」ボタンをクリックします。
    ![Screenshot from 2025-05-06 16-37-29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/b11857c8-f064-456c-8544-fcdb59aa51a0.png)
20. 「DNS 管理を移行」の画面で「DNS移行を開始」ボタンをクリックします。
    ![Screenshot from 2025-05-06 16-42-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/7a5e5cdb-69f1-44d5-b586-964be7998d2f.png)
21. 対象のドメイン名を入力して、「続行」ボタンをクリックします。
    ![Screenshot from 2025-05-10 16-52-33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/2c5bacd9-37ff-4844-bc4c-b348be46347f.png)
22. プランの選択画面が表示されるので「Free」を選択します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/b5c492b0-a1b8-4d76-b885-31a502665408.png)
23. 「DNS レコードを確認する」の画面で現在ムームードメインで運用中のDNSレコードが読み込まれていることを確認します。
    ![Screenshot from 2025-05-10 17-00-53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/da5c998a-1146-4c4d-b13e-54bb569fc34b.png)
24. 既存のDNSレコードは利用しないため、全て削除します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/5ee85dd7-c436-49c3-878d-960974c8994a.png)
25. 「レコードを追加」ボタンをクリックして、Zone Apexのレコードを入力後、「保存」ボタンをクリックします。
    - タイプ: CNAME
    - 名前: @
    - ターゲット: XXXXX.pages.dev 形式のFQDN
    ![Screenshot from 2025-05-10 17-08-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/4ca319bc-f77e-40ff-85fc-80432c0847a3.png)
26. 「レコードを追加」ボタンをクリックして、サブドメイン(www)のレコードを入力後、「保存」ボタンをクリックします。
    - タイプ: CNAME
    - 名前: www
    - ターゲット: XXXXX.pages.dev 形式のFQDN
    ![Screenshot from 2025-05-10 17-11-37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/6e48d167-4c29-42af-a775-1a5eccbf52cf.png)
27. 2レコードが登録されていることを確認して、「アクティベーションに進む」ボタンをクリックします。
    ![Screenshot from 2025-05-10 17-14-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/f1cf2815-ef72-4c61-b798-b81ca70f6edb.png)
28. CloudflareのDNSサーバーのFQDNが表示されているので、これをメモしておいて、「続行」ボタンをクリックします。
    ![Screenshot from 2025-05-10 17-16-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/23f28693-c2dc-4971-aa41-4e87647c01c8.png)
29. ムームードメインの「ネームサーバ設定変更」画面で「取得したドメインで使用する」にチェックして、メモしておいたCloudflareのDNSサーバーのFQDNを入力して保存します。
    ![Screenshot from 2025-05-10 17-22-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/415a1fc9-98da-4e2e-a39a-99305765bae7.png)
30. ムームードメインのドメインに関する詳細画面で、上記手順で設定したCloudflareのDNSサーバー(XXXXX.ns.cloudflare.com 形式のFQDN)が表示されていることを確認します。
    ![Screenshot from 2025-05-10 17-28-57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/93e70027-e8e8-432e-a4d9-6f71ca1f3f72.png)
31. DNSの切り替えにはしばらく時間が掛かるので、反映が完了するまで待ちます。
    しばらく待ってからcurlコマンドで対象のFQDNにアクセスするとHTTPのステータスコードで522番が返ってきていることがわかりました。
    「カスタム ドメイン」のタブ確認すると、登録したはずのドメインが表示されず「カスタム ドメインを設定」ボタンが表示されている状態だったので、再度、対象のFQDNを入力してカスタムドメインを登録しようとしたところ、レコードの検証中のような表示になり、さらにしばらく待つと正常に登録されたようで、以下のような表示に切り替わりました。
    ![Screenshot from 2025-05-10 18-09-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/19faf4f3-82c9-4f02-a963-b1adf1343f45.png)
32. 画面左側のメニューより、「一括リダイレクト」のリンクにアクセスします。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/13e67b3f-4565-4aaa-9857-3859cff4b3b9.png)
33. 「一括リダイレクト リストの作成」ボタンをクリックします。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/fd06ab2e-b7e4-44cc-ad43-d4d762aae073.png)
34. wwwサブドメインをZone Apexに転送するため、「名前リダイレクト リスト」の「名前」と「説明」を入力して、「次へ」ボタンをクリックします。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/836d105b-3595-4262-940c-b385b0ded601.png)
35. 今回は手入力するため、「または、手動で URL リダイレクトを追加します」のリンクにアクセスします。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/ac21e05f-e595-481e-bcf7-e62f44dafcda.png)
36. 「ソースURL」にwwwサブドメインのFQDN、「ターゲットURL」にZone ApexのURLを入力して、「次へ」ボタンをクリックします。
    ![Screenshot from 2025-05-10 20-14-51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/81caabfc-873f-4bba-98dd-1fdf57343161.png)
37. 「URL リダイレクトの確認と編集」画面で入力した内容が反映されていることを確認して「次へ」ボタンを入力します。
    ![Screenshot from 2025-05-10 20-18-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/31c75332-e772-4bc3-93a7-384ead14722d.png)
38. 「リダイレクト ルールに進む」ボタンをクリックします。
    ![Screenshot from 2025-05-10 20-20-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/a27391f3-9074-421d-a03e-4c4111f900f0.png)
39. 「保存してデプロイする」ボタンをクリックします。
    ![Screenshot from 2025-05-10 20-22-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/fb1c1194-a4a2-4479-bae4-6ddac589c04d.png)
40. 一括リダイレクト画面で登録したルールが表示されていることを確認する。
    ![Screenshot from 2025-05-10 20-24-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23093/964bd91c-29e1-4da6-bebf-ef2be1f1e71f.png)

### 参考URL
- [そろそろ Cloudflare Pages で Gatsby v5 を使おう](https://zenn.dev/meihei/articles/00bb71a9e48edb)
- [Gatsby.jsとCloudflare Pagesでブログを構築してみた](https://zenn.dev/nnydtmg/articles/cloudflare-gatsby-blog)
- [Gatsby+Cloudflare Pagesで爆速のブログを無料で作るぞ！作った](https://mnao.blog/start-with-gatsby/)
- [ブログ完全移行 gatsby+cloudflare pagesを使ってブログを作ってみた](https://binfo-hodake.com/posts/gatsby-first-post)
- [Cloudflare PagesでGatsbyを動かすのは案外難しい](https://zenn.dev/appare45/articles/cloudflarepages-gatsby)
- [NetlifyからCloudflare Pagesに引越しました](https://qiita.com/akitkat/items/671ed0a47b6ca1c8b191)
- [Cloudflare Pages に個人ブログを移行してみた](https://qiita.com/byo/items/42073946a01e6d0663c7)
- [Nodejsのバージョンを上げたら`error:0308010C:digital envelope routines::unsupported`が出てしまう](https://qiita.com/akitkat/items/f455bbc088a408cbc3a5)
- [Cloudflare PagesでNode.jsのバージョンを指定する](https://dev.classmethod.jp/articles/cloudflare-pages-node-version/)
- [Cloudflare PagesでNodeのバージョンを指定する](https://zenn.dev/hisayuki_mori/articles/cloudflare-node-version)
- [Hugo製WebサイトをNetlifyからCloudflare Pagesに移行](https://n-s.tokyo/2022/05/migrating-from-netlify-to-cloudflarepages/)
- [CloudflareのPage Rules機能を使ってwwwなしURLへ転送する方法](https://okayurisotto.net/posts/01gvh92100rgbyrnhyv8sv5v35/)
- [URLに「WWW」が付かないサイトを作る場合の注意点](https://www.mki.co.jp/lp/cloudflare/column_20191206.html)
- [Cloudflare PagesにApexドメインを設定しようとして嵌った話](https://shuntaka.dev/shuntaka/articles/01fcexkj03t5wr0hkjt37t7dcz)
- [Cloudflare Pages に移行しました](https://kawaken.dev/posts/20211227_migration-from-netlify-to-cloudflare-pages/)
- [CloudFlareのCNAME FlatteningをGitHub Pagesで使ってみた](https://hnw.hatenablog.com/entry/20150301)
- [Cloudflare PagesにAstroをデプロイしてカスタムドメインを設定する](https://zenn.dev/gemcook/articles/cloudflare-pages-astro-deploy)