cloudflareを使ったことがありますか?
開発者にはとても人気があるサービスだと思うのですが、今回Bunで作ったNext.jsのアプリケーションをデプロイしてみようと思います。
Cloudflareとは
CDNやインターネットセキュリティ、DNSなど様々なサービスを提供しています。
一部機能は無料で提供しており、安価で安全にアプリケーション運用をするためのサービスが揃っています。
Cloudflare workersとは
Cloudflare workersとは、Cloudflareの提供している動的ホスティングが可能なサービスです。
一方でCloudflare Pagesは静的ホスティングが可能なサービスとなっており、一般的にはこちらの方がよく使われます。
しかし、今回はNext.jsのサーバーコンポーネントを使用したいため、動的ホスティングの可能なworkersを使用します。
実際にデプロイしてみる
Next.jsのアプリケーションを１から作成する場合
cloudflareでは、デプロイするための環境をあらかじめセットアップしながらプロジェクトを作ることができます。
bun create cloudflare@latest . --framework=next --platform=workers
既存のNext.jsアプリケーションでデプロイ準備をする場合
しかし、私はすでにアプリケーションを作ってしまっていたので、そのアプリケーションをcloudflareにデプロイできるようしていこうと思います。
まず下のように@opennextjs/cloudflareを依存関係に追加します。
bun add @opennextjs/cloudflare --dev
次にwranglerの設定ファイルを記述します。
jsoncとtomlファイル等で記述できます。
私はtomlで書いています。
name = "duhang-web" # Workers サブドメイン名
main = ".open-next/worker.js" # OpenNext が出力するエントリ
compatibility_date = "2025-04-18" # 互換性の基準日
compatibility_flags = ["nodejs_compat"] # Node.js API 互換モード
[assets]
directory = ".open-next/assets" # 静的アセット配置ディレクトリ
binding = "ASSETS" # バインディング名
{
"$schema": "node_modules/wrangler/config-schema.json",
"main": ".open-next/worker.js",
"name": "duhang-web",
"compatibility_date": "2025-04-18",
"compatibility_flags": ["nodejs_compat"],
"assets": {
"directory": ".open-next/assets",
"binding": "ASSETS"
}
}
デプロイする
下のコマンドを打つことでcloudflareにあげるためのビルドとデプロイを行ってくれます。
走らせるとcloudflareへのログインが促されるのでログインします。
bun opennextjs-cloudflare build && bun opennextjs-cloudflare deploy
完了するとURLがCLIに表示されるのでクリックします。
URLの形式はhttps://[プロジェクト名].[アカウント名].workers.dev/の形式になります。
また、今後簡単にコマンドを打つためにpackage.jsonに以下の内容を追記します。
そうすることでbuildコマンドをworkers:build,Deployコマンドをworkers:deployとすることができる。
{
"name": "duhang_web",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"build:worker": "cloudflare",
"workers:build": "opennextjs-cloudflare build",
"workers:deploy": "opennextjs-cloudflare deploy"
},
CDを組む
今回はGithubActionsでデプロイも自動化するためにCDを組んでみようと思います。
API TOKENを用意する
デプロイにはCloudflareで発行できるAPI TOKENが必要になります。
なのでCloudflareでトークンを発行します。
Cloudflareの画面右上に人のマークがあると思うのでそれをクリックしてProfileを選択します。
そこからAPI Tokensをクリックします。
すると、下の画面が出てくるのでCreate Tokenをクリックします。
API Tokenのテンプレートが出てくるので今回はEdit Cloudflare Workers を選択します。
Token nameをDeploy by Gtihub Actionsに変更しておきます。
また、AccountResourcesとZoneResourcesには、自身のアカウントを入力します。
Continue Summaryで権限を確認し、Tokenを作成できるようになります。
作成したらAPITokensが見れるようになる。
これをGitHubのsecretsに保存します。
Actionsを組む
GithubActionsを使って下のようにCDを組んでみました。
下のようにすることでmainブランチにpushした際にcloudflareに自動デプロイされます。
name: Release
on:
push:
branches:
- main
jobs:
release:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v4 #リポジトリをクローン
- name: setup bun
uses: antongolub/action-setup-bun@v1 #bunをセットアップ
with:
bun-version: "latest"
- name: install dependencies
run: bun install #依存関係をインストール
- name: Build for Cloudflare Workers
run: bun workers:build #ビルドする
- name: Deploy to Cloudflare
run: bun workers:deploy #デプロイする
env:
CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }} #APITOKENを環境変数に設定する。
ActionsでのCDを使う際に注意したいこと
ここでもしかしたらローカルでDeployコマンドを動かしたら動くのに、Actionsで動かすと動かない人がいると思います。
この原因として考えられるのは環境変数の設定不足です。
ローカルでDeployを行うとプロジェクトにある.envファイルを自動で読み取ってデプロイしてくれるのに対し、CDではActions内で環境変数を設定するようにする必要があります。
なのでsecretsに環境変数を設定し、Actionsのymlファイルにしっかり書くことを忘れないようにしましょう。
- name: Deploy to Cloudflare
run: bun workers:deploy #デプロイする
env:
CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
NEXT_PUBLIC_API: ${{ secrets.NEXT_PUBLIC_API }}