Supabase

はじめに 先日、新しく作った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環境で動作するように変換してくれます。 ...