Cloudflare Pages Functionsをローカルでテストする方法

wranglerを使うとFunctionsのローカルプレビューが可能

Cloudflare Workers用のCLIであるwranglerは、Cloudflare Pagesのプレビューでも使うことが出来ます。

Wrangler (command line) | Cloudflare

Cloudflare PagesにデプロイするWebアプリケーションは、利用しているフレームワークにプレビュー環境が含まれていることがほとんどなので、通常はCloudflare PagesでホスティングしているWebアプリケーションのプレビューにwranglerは不要です。

しかし、Cloudflare Pages Functionsを使う場合は設定したWorkerが正しく動作するかどうかのテストが必須です。この時に使うのがwranglerです。

wranglerでCloudflare Pages Functionsをローカルテストする方法

wranglerでは、出力しているページがどのように表示されるかのテストを「pages」コマンドで行うことが出来ます。

wrangler pages dev

この方法だと、毎回アプリケーションをビルドする必要があり、開発効率としては最悪です。

こうした問題を解決するために、wranglerにはリアルタイムプレビュー環境が用意されています。

コマンドは、

wrangler pages dev -- npx フレームワークのプレビューコマンド

となります。

例えば、Nuxt.jsの場合は、プレビュー環境は「nuxt dev」で呼び出すので、

wrangler pages dev -- npx nuxt dev

となります。

こうすることで、プロジェクト直下のfunctionsディレクトリをインポートした状態で、Nuxt.jsのプレビュー環境を立ち上げることが出来ます。

ホットリロードにも対応しているので、編集しながらリアルタイムでFunctionsのスプリトをテストしつつ、アプリケーションの開発を行うことが出来ます。

wrangler pages devコマンドで使えるその他のオプションについては、下記のページを参照してください。

Develop and preview locally | Cloudflare Pages