2025/12/11

Vercel から Cloudflare Pages へ移行した具体的な手順とハマりポイント【後編】

#Blog#Migration#Cloudflare#Vercel#Astro#Setup#Research

Vercel から Cloudflare Pages へ移行した具体的な手順とハマりポイント【後編】

前編では、Vercel から Cloudflare Pages に移行しようと考えた理由や、移行先の候補を比較して最終的な方針を決めるまでの検討ログを整理しました。

後編では、その方針に沿って実際に行った作業内容と、途中でハマったポイント、移行後の確認と Vercel 側の跡片付けまでを記録しておきます。

全体の流れ

実際の作業は、次のような段階に分けて進めました。

  1. Cloudflare に [my-project] を登録する
  2. お名前.com のネームサーバーを Cloudflare 指定のものに変更する
  3. Cloudflare Pages で GitHub リポジトリ（Astro）を接続してビルドする
  4. https://[my-project].pages.dev/ で動作確認する
  5. www.[my-project] の CNAME を Vercel → Cloudflare Pages に切り替える
  6. 移行後の表示やリダイレクト、HTTPS設定を確認する
  7. Vercel 側からカスタムドメインとプロジェクトを削除する

順番に詳しく見ていきます。

手順1: Cloudflare にドメインを追加

1-1. [my-project] を Cloudflare に登録

まずは Cloudflare のダッシュボードから、ブログで使っているドメインを登録しました。

  1. Cloudflare にログイン
  2. 「Add a domain」または「Connect a domain」を選択
  3. [my-project] を入力して進む
  4. DNS レコードのスキャン方法は、推奨の Quick scan for DNS records を選択
  5. AI クローラーに関する設定は、今回は 「Block AI training bots on all pages」 を選択

1-2. インポートされた DNS レコードの確認

Cloudflare が自動で既存の DNS レコードを取り込んでくれるので、一覧画面で内容を確認しました。

ポイントは次の1点だけです。

この時点では まだ本番環境を変えたくない ため、レコードはすべてそのままにして「Continue」で次に進みました。

手順2: お名前.com のネームサーバーを Cloudflare に切り替え

2-1. Cloudflare が提示するネームサーバーを確認

ドメイン追加の最終ステップで、Cloudflare が

といった形で、2つのネームサーバー名を表示します。
これが、今後 [my-project] で使用するべきネームサーバーです。

2-2. お名前.com 側で設定変更

続いて、お名前.com の管理画面でネームサーバーを切り替えました。

  1. お名前.com にログイン
  2. ドメイン一覧から [my-project] を選択
  3. 「ネームサーバーの設定」画面を開く
  4. 「他のネームサーバーを利用」などの項目を選択
  5. Cloudflare が提示した 2 つのネームサーバーを入力
  6. 設定を保存

これで DNS の権威は Cloudflare に移りましたが、レコードの中身はまだ Vercel を向いたままなので、この段階では本番サイトは引き続き Vercel 上で動いている状態です。

手順3: Cloudflare Pages に Astro のサイトをデプロイ

3-1. Workers & Pages から Pages プロジェクトを作成

次に、Cloudflare Pages 側にブログのプロジェクトを作成しました。

  1. Cloudflare ダッシュボードの左メニューから 「Workers & Pages」 を選択
  2. 右上の 「Create application」 をクリック
  3. 最初は Workers の作成画面が表示されるので、画面下部にある
    「Looking to deploy Pages? Get started」 をクリック

ここが少し分かりづらく、最初は Workers 側の設定だけが見えて戸惑いました。
Pages の入口は画面下のリンクから入る必要があります。

3-2. GitHub リポジトリを接続

Pages のウィザードに入ったら、Git リポジトリを接続します。

  1. 「Import an existing Git repository」を選択
  2. プロバイダとして GitHub を選ぶ
  3. 初回は GitHub 側で「Cloudflare Workers and Pages」アプリのインストールを求められるので、
    • 対象アカウントを選択
    • （ブログ用リポジトリ）にアクセス権を付与
    • 「Save」で確定
  4. Cloudflare のダッシュボードを再読み込みすると、リポジトリの一覧に [my-project] が表示されるようになった

一度ダッシュボードをリロードしないとリポジトリ一覧が出てこなかった点は、実際にハマりポイントでした。

3-3. ビルド設定（Astro）

リポジトリを選択すると、ビルド設定の画面に移ります。

今回、Vercel 側では次のような設定になっていました。

そのため、Cloudflare Pages でも同じ設定をそのまま写しました。

入力が完了したら 「Save and Deploy」 を押し、ビルドが完了するのを待ちました。

3-4. https://[my-project].pages.dev/ で動作確認

ビルドが成功すると、Cloudflare Pages から

という URL が発行されます。

ここで、次の項目を一通り確認しました。

このタイミングでは本番ドメインにはまだ触っていないので、
安心して動作確認に集中できました。

手順4: www.[my-project] を Cloudflare Pages に向ける

4-1. Custom domains に www.[my-project] を追加

Pages での動作確認が取れたので、本番ドメインを紐付けます。

  1. Cloudflare ダッシュボード → 「Workers & Pages」
  2. [my-project] プロジェクトを選択
  3. 「Custom domains」タブを開く
  4. 「Set up a custom domain」をクリック
  5. 入力欄に www.[my-project] と入力して追加

このとき、Cloudflare が既存レコードとの違いを比較する画面を表示してきます。

ここで 「Activate domain」 を押すと、Cloudflare が DNS レコードを書き換え、www.[my-project] の向き先が Vercel から Cloudflare Pages に切り替わります。

4-2. DNS レコードの確認

念のため、DNS タブで内容を確認しました。

この状態になっていれば、www.[my-project] は Cloudflare Pages を向いている と判断できます。

手順5: 移行後の確認結果

本番ドメインの切り替え後、次のような確認を行いました。

5-1. 表示内容の一致

などを使って、

を両方開き、表示内容が一致していることを確認しました。

キャッシュの影響を避けるため、普段使っていないブラウザや回線で確認しておくと安心です。

5-2. HTTPS とリダイレクト

Cloudflare 側の設定も合わせて確認しました。

また、ルートドメインから www へのリダイレクトも Cloudflare の Redirect Rules で設定しました。

これで、https://[my-project] にアクセスしても、自動的に https://www.[my-project] に統一されるようになりました。

手順6: Vercel 側の跡片付け

Cloudflare Pages で問題なく動作していることを確認したあと、Vercel 側も整理しました。

6-1. カスタムドメインの削除

  1. Vercel にログイン
  2. 該当プロジェクト（[my-project]）を開く
  3. Settings → Domains を開く
  4. www.[my-project] / [my-project] が残っていれば、それぞれ Remove

これで、Vercel 側からはカスタムドメインが切り離されます。

6-2. プロジェクトの削除

続いて、プロジェクト自体も削除しました。

  1. プロジェクトの Settings → General を開く
  2. 画面下部の Danger Zone にある「Delete Project」を実行
  3. 指示どおりにプロジェクト名を入力して削除を確定

削除後、旧URL（*.vercel.app）にアクセスすると、Vercel の 404 ページが表示されることを確認しました。

作業時のハマりポイントまとめ

今回の移行で引っかかった部分をまとめておきます。

1. Workers & Pages の UI で Pages の入り口が分かりづらい

最初にここに気づけず、しばらく Workers 側の設定を見てしまいました。

2. GitHub 連携後すぐにリポジトリ一覧が出てこない

この場合は、Cloudflare ダッシュボードを一度リロードしたところ、正しくリポジトリ一覧が表示されました。
同じ現象が出た場合は、ブラウザの再読み込みや再ログインを試してみる価値があります。

3. DNS 反映の確認は別ブラウザ・別回線で行った方が安全

ブラウザや ISP のキャッシュの影響で、

というズレが発生する可能性があります。

そのため、確認時には次のような方法を使いました。

まとめ

今回、Astro + Vercel で運用していたブログを、Cloudflare Pages + Cloudflare DNS の構成へ移行しました。

同じように Vercel で静的サイトを運用していて、Cloudflare Pages への移行を検討している人にとって、今回の手順とハマりポイントの記録が少しでも参考になればと思います。

一覧に戻る