NetlifyからPagesへの移行
このチュートリアルでは、NetlifyアプリケーションをCloudflare Pagesに移行する方法を学びます。
アプリケーションをCloudflare Pagesに移動するには、ビルドコマンドとビルドディレクトリを見つけます。Cloudflare Pagesは、この情報を使用してアプリケーションをビルドおよびデプロイします。
Netlifyダッシュボードで、デプロイしたいプロジェクトを見つけます。GitHubリポジトリからデプロイするように設定されている必要があります。
サイトダッシュボード内で、サイト設定を選択し、次にビルドとデプロイを選択します。
ビルドとデプロイタブで、ビルド設定パネルを見つけます。ここにはビルドコマンドと公開ディレクトリのフィールドがあります。これらをCloudflare Pagesへのデプロイのために保存します。以下の画像では、ビルドコマンドはyarn build、公開ディレクトリはbuild/です。
サイトに公開ディレクトリ内に_redirectsファイルが含まれている場合、Cloudflare Pagesでも同じファイルを使用でき、リダイレクトが正常に実行されます。リダイレクトがnetlify.tomlファイルにある場合は、_redirectsフォルダに追加する必要があります。Cloudflare Pagesは現在、高度なリダイレクトのサポートが限られています。2000以上の静的および/または100の動的リダイレクトルールがある場合は、バルクリダイレクトを使用することをお勧めします。
ヘッダーファイルも公開ディレクトリ内の_headersフォルダに移動できます。重要な点は、_headersファイルで定義されたカスタムヘッダーは、関数のルートがURLパターンに一致しても、関数からのレスポンスには現在適用されないことです。ヘッダーの取り扱いについて詳しくは、ヘッダーを参照してください。
フォームコンポーネント内で、data-netlify = "true"属性または<form>タグからNetlify属性を削除します。これで、フォームロジックをPages Functionとして配置し、エントリをデータベースやAirtableに収集できます。詳細については、Pages Functionsを使用したフォームの送信の取り扱いチュートリアルを参照してください。
Netlify関数とPages Functionsは、プロジェクトのベースにあるfunctionsディレクトリを使用してサーバーレス関数を処理する同じファイルシステムの規約を共有しています。ただし、構文や関数のデプロイ方法は異なります。Pages FunctionsはCloudflare Workers上で実行され、デフォルトでCloudflareのグローバルネットワーク上で動作し、デプロイのために追加のコードや設定は必要ありません。
Cloudflare Pages Functionsは、関数ルートハンドラーの前後に実行する必要があるロジックを処理できるミドルウェアも提供します。
Netlify関数は、イベントとコンテキストを引数として受け取る非同期イベントハンドラーをエクスポートします。Pages Functionsの場合、contextオブジェクトを受け取る単一のonRequest関数をエクスポートする必要があります。contextオブジェクトには、request、env、paramsなどのリクエストに関するすべての情報が含まれ、新しいResponseを返します。最初の関数の書き方について詳しくは、こちらを参照してください。
Netlify関数での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 > レコードに移動し、NetlifyからCloudflare PagesにドメインのCNAMEレコードを更新したことを確認します。DNSレコードが更新されると、リクエストはPagesアプリケーションに送信されます。
DNSでは、レコードのコンテンツは<SUBDOMAIN>.pages.devサブドメインである必要があります。
上記の手順が完了すると、NetlifyプロジェクトをCloudflare Pagesに正常に移行したことになります。