このチュートリアルでは、Vercel のアプリケーションを Cloudflare Pages へデプロイする方法を学びます。
Vercel にデプロイ済みの既存プロジェクトがある前提です。Vercel の serverless functions などの機能は、現在 Cloudflare Pages ではサポートしていません。
アプリケーションを Cloudflare Pages へ移すには、ビルドコマンドとビルドディレクトリが必要です。Cloudflare Pages はこの情報を使ってアプリケーションをビルドし、デプロイします。
Vercel Dashboard で、デプロイしたいプロジェクトを探します。GitHub リポジトリからデプロイする設定になっている想定です。
サイトダッシュボードで Settings を選び、次に General を選びます。
Build & Development settings パネルに、Build Command と Output Directory フィールドがあります。フレームワークを使っている場合、値は空でも、フレームワークのデフォルトが表示されます。Cloudflare Pages へデプロイするときに使うため、控えておきます。次の画像では、Build Command は npm run build、Output Directory は build です。
ビルドディレクトリとビルドコマンドが分かったら、プロジェクトを Cloudflare Pages へ移せます。
はじめに で、GitHub プロジェクトを Cloudflare Pages に追加する手順を確認できます。
次に、Pages プロジェクトへ カスタムドメイン を接続します。このドメインは、現在 Vercel にデプロイしているアプリケーションと同じものにします。
多くの場合は、ドメインを Cloudflare に追加 します。
ドメインのネームサーバー変更が必要ですが、Pages の設定は簡単になり、プロジェクトに apex ドメイン（example.com など）を使えます。
別の方法を取る場合は、カスタムドメイン を参照してください。
カスタムドメインを追加するには、次の手順を行います。
-
Cloudflare ダッシュボードで Workers & Pages ページを開きます。
Workers & Pages を開く ↗ -
Pages プロジェクトを選び、Custom domains を開きます。
-
Set up a domain を選びます。
-
Cloudflare Pages サイトを配信したいドメインを入力し、Continue を選びます。
次の手順は、ドメインを Cloudflare に追加したか によって異なります。
- Cloudflare に追加した場合: Cloudflare が自動で設定し、ドメインは
Activeステータスになります。 - Cloudflare に追加していない場合: 設定を完了するには、DNS プロバイダーで 一部の DNS レコードを更新 します。
カスタムドメインの設定が終わり、リクエストが Cloudflare Pages へ届くようになったら、Vercel のアプリケーションは削除して問題ありません。
Pages プロジェクトに IP アドレスは提供されません。ドメインとプロジェクトの紐付けに A や AAAA レコードは不要で、代わりに CNAME レコードを使います。
詳細は カスタムドメイン を参照してください。