先日、新しく作ったWebアプリをCloudflare Workers上にデプロイしました。今回はその際にハマったポイントや設定方法について記録しておきます。

Cloudflare Workersは従来、単純な関数実行基盤という印象でしたが、最近ではNext.jsアプリの本格的なデプロイも可能になっており、非常に魅力的な選択肢となっています。まだまだ日本語の情報が少ないため、今回の経験を共有したいと思います。

Cloudflare PagesからCloudflare Workersへ

今回、新しいアプリを作成してCloudflareにデプロイしようとしました。今まではCloudflare Pagesを使用していたのですが、新しくプロジェクトを作成しようとしたところ、Cloudflare Workersを使用するように、とのメッセージが表示されました。

Cloudflare Workersは、従来の関数実行基盤の枠を超えて、最近ではNext.jsアプリの本格的なデプロイも可能になっており、Cloudflare Pagesとほぼ同等の基盤になってきています。Cloudflareとしても、今後はWorkersの開発に注力していくことを宣言しています。

そこで今回は、Cloudflare Workers上にデプロイを試みました。以下、ハマったポイントなどを詳しく紹介します。

デプロイ手順

プロジェクトにWorkers用の設定を追加

Cloudflareの公式マニュアルを参考に設定を行いました。

https://developers.cloudflare.com/workers/framework-guides/web-apps/nextjs/

今回のアプリではSupabaseを組み込んでおり、実行時の環境変数を設定する必要があったため、wrangler.tomlファイルで[vars]セクションを使用して定義しました。

main = ".open-next/worker.js"
name = "my-app"     # ここにアプリ名を入力
compatibility_date = "2025-03-25"
compatibility_flags = ["nodejs_compat"]

[assets]
directory = ".open-next/assets"
binding = "ASSETS"

[vars]  # 実行時の環境変数を定義
NEXT_PUBLIC_SUPABASE_URL = "https://XXX.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY = "XXXXXXXXXX"

Cloudflare Workersの設定

GitHubとCloudflare Workersを連携し、ソースコードに変更があった際に自動でデプロイが実行されるようにCI/CDを設定します。

まず、Cloudflare Workersの開始ページから「リポジトリをインポートする」から開始します。

リポジトリを選択すると、プロジェクトの構成画面に遷移します。

どのブランチの変更を検知するかを選択し、「非本番ブランチのビルド」はチェックを外しました。

ここで重要なポイントが2つあります。

1. ビルドおよびデプロイのコマンドを変更

ビルドコマンドにはnpx opennextjs-cloudflare buildを、デプロイコマンドにはnpx opennextjs-cloudflare deployを設定します。

デフォルトのコマンドのままでビルドを実行すると、以下のエラーが発生しました。

✘ [ERROR] The entry-point file at ".open-next/worker.js" was not found.

このエラーは、Next.jsアプリをWorkers用にビルドする際に、専用のビルドコマンドが必要なために発生します。opennextjs-cloudflareパッケージが、Next.jsアプリをWorkers環境で動作するように変換してくれます。

2. ビルド変数を設定

wrangler.tomlの中で[vars]で定義したのは、実行時の環境変数です。今回はクライアント側でもSupabaseを使用する構成にしていたため、ビルド時の環境変数も設定する必要がありました。同じ内容でCloudflare Workersの管理画面から設定しました。

この設定を行わないと、ビルド時に環境変数が存在しないというエラーが発生しました。

その他、細かい点ではesbuildパッケージが存在しないというエラーが発生したため、追加でインストールするなどの対応を行い、ようやくデプロイが完了しました。

まとめ

今後よく使用していくであろうCloudflare Workersのデプロイ手順について紹介しました。まだ日本語のドキュメントが少ない印象ですので、この記事が参考になれば幸いです。

特にSupabaseと組み合わせた場合の設定は、環境変数の設定が重要になります。ビルド時と実行時の両方で環境変数を適切に設定することで、スムーズにデプロイできるようになります。

Cloudflare Workersは今後も機能拡張が予定されており、Next.jsアプリのデプロイ先として非常に魅力的な選択肢となっています。ぜひ試してみてください。