Netlify から Pages への移行

このチュートリアルでは、Netlify アプリケーションを Cloudflare Pages へ移行します。

アプリケーションを Cloudflare Pages へ移すには、ビルドコマンドとビルドディレクトリを確認します。Cloudflare Pages はこの情報でアプリケーションをビルドしてデプロイします。

Netlify Dashboard で、デプロイしたいプロジェクトを探します。GitHub リポジトリからデプロイする設定になっているはずです。

サイトのダッシュボードで Site Settings を選び、続いて Build & Deploy を選びます。

Build & Deploy タブで Build settings パネルを探します。ここに Build command と Publish directory があります。Cloudflare Pages へデプロイするときに使うので控えておきます。次の画像では、Build command は yarn build、Publish directory は build/ です。

公開ディレクトリに _redirects ファイルがある場合は、同じファイルを Cloudflare Pages でも使え、リダイレクトは問題なく実行されます。リダイレクトが netlify.toml にある場合は、_redirects フォルダーへ移す必要があります。Cloudflare Pages の 高度なリダイレクトの対応 は現時点では限定的です。静的リダイレクトが 2000 件を超える場合や、動的リダイレクトルールが 100 件を超える場合は、Bulk Redirects の利用を推奨します。

ヘッダーファイルも、公開ディレクトリの _headers フォルダーへ移せます。_headers で定義したカスタムヘッダーは、関数のレスポンスには現時点では適用されない点に注意してください。関数のルートが URL パターンに一致する場合でも同様です。ヘッダーの扱いについては Headers を参照してください。

フォームコンポーネントから、<form> タグの data-netlify = "true" 属性または Netlify 属性を削除します。フォームの処理は Pages Function として実装し、送信内容をデータベースや Airtable に保存できます。詳細は Pages Functions でフォーム送信を処理する チュートリアルを参照してください。

Netlify functions と Pages Functions は、プロジェクト直下の functions ディレクトリでサーバーレス関数を扱うという、同じファイルシステム規約を使います。ただし、構文とデプロイ方法は異なります。Pages Functions は Cloudflare Workers 上で動き、デフォルトで Cloudflare のグローバルネットワーク上で動作します。デプロイに追加のコードや設定は不要です。

Cloudflare Pages Functions にはミドルウェアもあり、関数のルートハンドラーの前や後に実行する処理を書けます。

Netlify functions は、event と context を引数に取る非同期のイベントハンドラーをエクスポートします。Pages Functions では、context オブジェクトを受け取る onRequest 関数を 1 つエクスポートします。context オブジェクトには request、env、params などリクエストの情報が含まれ、新しい Response を返します。詳細は 最初の関数を書く を参照してください。

Netlify functions の Hello World:

exports.handler = async function (event, context) {
	return {
		statusCode: 200,
		body: JSON.stringify({ message: "Hello World" }),
	};
};

Pages Functions の Hello World:

export async function onRequestPost(request) {
	return new Response(`Hello world`);
}

netlify.toml には、プレビューデプロイ、公開ディレクトリの指定、プラグインなど、Pages でも使える設定があることがあります。設定を移行したら、このファイルは削除できます。

アクセス管理は Cloudflare Zero Trust へ移行できます。アプリケーションのユーザー認証、イベントログ、リクエストを管理できます。

ビルドディレクトリとビルドコマンドが分かったら、プロジェクトを Cloudflare Pages へ移せます。

はじめに では、GitHub プロジェクトを Cloudflare Pages に追加する手順を説明しています。

Pages でカスタムドメインを使う場合は、現在デプロイしている Netlify アプリケーションと同じカスタムドメインを設定できます。Pages プロジェクトへのカスタムドメインの割り当ては カスタムドメイン を参照してください。

Cloudflare ダッシュボードで DNS Records ページを開きます。

ドメインの CNAME レコードが Netlify から Cloudflare Pages へ更新されていることを確認します。DNS レコードを更新すると、リクエストは Pages アプリケーションへ向かいます。

DNS では、レコードの Content を <SUBDOMAIN>.pages.dev サブドメインにしてください。

以上の手順で、Netlify プロジェクトを Cloudflare Pages へ移行できます。