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

Last updated at 2025-05-10Posted at 2025-05-10

前提条件

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

概要

以下の手順で構築した Netlify で運用中のwebページが存在しており、これを今回 Cloudflare Pages に移設しました。また、今回の移設に際して、DNSの運用をムームードメインからCloudflare DNSに変更しました。

手順

Cloudflare Pages の Framework guides の中にある Gatsby の手順に沿って作業を進める。

Cloudflareのログイン画面からログインし、画面左側のメニューより、「コンピューティング (Workers)」→「Workers & Pages」のリンクにアクセスします。
以下のように初期表示では「Workers」のタブが表示されていることを確認します。
「Pages」のタブに切り替えて、「Import an existing Git repository」の「始める」ボタンをクリックします。
今回は GitHub のリポジトリと連携させるので、「GitHubに接続」ボタンをクリックします。
連携させたいGitHubのアカウントを選択します。
連携対象のGitHubのリポジトリを選択して、「Install & Authorize」ボタンをクリックします。
画面に表示されているリポジトリ名をクリックするとチェックマークが表示されるので、この状態になったら「セットアップの開始」ボタンをクリックします。
「フレームワークプリセット」から「Gatsby」を選択して、その他はデフォルト状態のままで「保存してデプロイする」ボタンをクリックします。
ビルドが始まるのでしばらく待ちます。
ビルド中に「 error:0308010C:digital envelope routines::unsupported 」といったエラーが発生してデプロイに失敗しました。
恐らくビルド時に利用しているNodeのバージョンが高いためにこのようなエラーが発生していると考えられます。ログからNodeのバージョンを確認すると「18.17.1」であることがわかります。
Netlifyのデプロイ時のログからNodeのバージョンを確認すると「v16.20.2」であることがわかりました。
環境変数の設定画面に戻り「NODE_VERSION」として「16.20.2」を指定し、再度「保存してデプロイする」ボタンをクリックします。
今度はNodeのバージョンが「16.20.2」でビルドされていることがわかります。
ビルドが成功したら、画面上に表示されているプレビュー用のURLにアクセスします。
ブラウザにてwebページが正常に表示されることを確認します。
「プロジェクトに進む」ボタンをクリックして、「Workers & Pages」のデプロイのタブが表示されていることを確認します。
「カスタムドメイン」のタブへ移動して、「カスタムドメインを設定」ボタンをクリックします。
ドメイン名を入力して、「続行」ボタンをクリックします。
「DNS 管理を移行」の画面で「DNS移行を開始」ボタンをクリックします。
対象のドメイン名を入力して、「続行」ボタンをクリックします。
プランの選択画面が表示されるので「Free」を選択します。
「DNS レコードを確認する」の画面で現在ムームードメインで運用中のDNSレコードが読み込まれていることを確認します。
既存のDNSレコードは利用しないため、全て削除します。
「レコードを追加」ボタンをクリックして、Zone Apexのレコードを入力後、「保存」ボタンをクリックします。
- タイプ: CNAME
- 名前: @
- ターゲット: XXXXX.pages.dev 形式のFQDN
「レコードを追加」ボタンをクリックして、サブドメイン(www)のレコードを入力後、「保存」ボタンをクリックします。
- タイプ: CNAME
- 名前: www
- ターゲット: XXXXX.pages.dev 形式のFQDN
2レコードが登録されていることを確認して、「アクティベーションに進む」ボタンをクリックします。
CloudflareのDNSサーバーのFQDNが表示されているので、これをメモしておいて、「続行」ボタンをクリックします。
ムームードメインの「ネームサーバ設定変更」画面で「取得したドメインで使用する」にチェックして、メモしておいたCloudflareのDNSサーバーのFQDNを入力して保存します。
ムームードメインのドメインに関する詳細画面で、上記手順で設定したCloudflareのDNSサーバー(XXXXX.ns.cloudflare.com 形式のFQDN)が表示されていることを確認します。
DNSの切り替えにはしばらく時間が掛かるので、反映が完了するまで待ちます。
しばらく待ってからcurlコマンドで対象のFQDNにアクセスするとHTTPのステータスコードで522番が返ってきていることがわかりました。
「カスタムドメイン」のタブ確認すると、登録したはずのドメインが表示されず「カスタムドメインを設定」ボタンが表示されている状態だったので、再度、対象のFQDNを入力してカスタムドメインを登録しようとしたところ、レコードの検証中のような表示になり、さらにしばらく待つと正常に登録されたようで、以下のような表示に切り替わりました。
画面左側のメニューより、「一括リダイレクト」のリンクにアクセスします。
「一括リダイレクトリストの作成」ボタンをクリックします。
wwwサブドメインをZone Apexに転送するため、「名前リダイレクトリスト」の「名前」と「説明」を入力して、「次へ」ボタンをクリックします。
今回は手入力するため、「または、手動で URL リダイレクトを追加します」のリンクにアクセスします。
「ソースURL」にwwwサブドメインのFQDN、「ターゲットURL」にZone ApexのURLを入力して、「次へ」ボタンをクリックします。
「URL リダイレクトの確認と編集」画面で入力した内容が反映されていることを確認して「次へ」ボタンを入力します。
「リダイレクトルールに進む」ボタンをクリックします。
「保存してデプロイする」ボタンをクリックします。
一括リダイレクト画面で登録したルールが表示されていることを確認する。

参考URL

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up