サーバレスのサムネイル

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

公開日: 2022.8.12

Cloudflare Pagesでサーバーレススクリプトを実行できる「Functions」。開発する際にはローカルでのテスト必須です。今回は、Cloudflare Pages Functionsをローカルでテストする方法をご紹介。

編集ノート:SERVERSUSでは、パートナーリンクからコミッションを得ています。コミッションが記事の意見や、サービスの評価に影響を与えることはありません。

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

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

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

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

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コマンドで使えるその他のオプションについては、下記のページを参照してください。

価格は記載がある場合を除き、すべて税込みです。