この記事はCloudflare Advent Calendar 2024 20 日目の記事です 🎅
初めに
こんにちは、あさひです 🙋♂️
Cloudflare Developersで紹介されていた Workers に Next.js をデプロイする方法が紹介されていました。実際に試してみたのですが、英語の動画を見ながら試すのは思ったより時間がかかったので記事にしてみようと思います。
目的
以下のような目的で進めていこうと思います。よって Cloudflare や Workers が何かやアカウントの作成方法などには触れません。
- Cloudflare Developers の動画を再現できる。
- Assets Binding で何ができるかざっくりと理解する。
- Next.js を Workers へデプロイする方法がわかる。
Assets Binding
Assets Binding は、Cloudflare Workers を利用して静的アセット（HTML、CSS、JavaScript、画像など）を効率的に配信するための機能です。この機能を使うことで、静的ファイルを Cloudflare のエッジネットワークに保存し、エンドユーザーに近い場所から直接配信することが可能になる機能です。Cloudflare Pages との比較については以下のドキュメントにまとまっていますので、あわせてご覧ください。
試してみる
Next.js のセットアップ
以下のコマンドで Next.js のブログテンプレートを使用してセットアップします。
npx create-next-app --example blog-starter blog-starter-app
作成されたディレクトリに移動してローカル環境が立ち上がるか試しておきます。
cd blog-starter-app
npm run dev
ブラウザでlocalhost:8000を確認し以下のような画面になっていれば問題ありません。
Next.js のバージョンを v14 系にする
現在、npx create-next-app で作成される Next.js プロジェクトは v15 系が利用されますが、2024 年 12 月 20 日現在@opennextjs/cloudflare はまだ v15 系に対応していません。そのため、ビルド時にエラーが発生する可能性があります。（おそらくミドルウェア周りが未対応のため）
なので 以下のコマンドで v14 系に戻しておきます。ここが動画になくて動画そのままにはいかない点でした。
npm install next@14.2.15 --save
@opennextjs/cloudflare のインストール
以下のコマンドで@opennextjs/cloudflareをインストールしておきます。
npm install --save-dev @opennextjs/cloudflare
wrangler.toml を作成
プロジェクトのルートに以下の構成でwrangler.tomlを追加します。
@opennextjs/cloudflareを使ってビルドすると.worker-nextにビルドした結果が保存されます。wrangler.tomlのmainとassetsに以下のように指定することで Assets Binding の設定をすることが可能です。明記されているドキュメントが見つけられなかったので個人的な理解ですが、これで静的ファイルが Workers に保存されて各エッジから配信されるので R2 などに保存する必要がないと理解してます。
+ name = "blog-starter-app"
+ compatibility_date = "2024-09-23"
+ compatibility_flags = ["nodejs_compat"]
+
+ main = ".worker-next/index.mjs"
+ assets = { directory = ".worker-next/assets", binding = "ASSETS" }
npm スクリプト を追加する
package.jsonのscriptsを以下のように追加します。@opennextjs/cloudflareを使ったビルドをデプロイするためのものです。
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
+ "build:worker": "cloudflare",
+ "dev:worker": "wrangler dev --port 8771",
+ "preview:worker": "npm run build:worker && npm run dev:worker",
+ "deploy:worker": "npm run build:worker && wrangler deploy"
},
next.config.js を作成
動画に従って以下のようにプロジェクトのルートに追加しておきます。
+ /** @type {import('next').NextConfig} */
+ const nextConfig = {};
+
+ module.exports = nextConfig;
ローカル動作確認
次に以下のコマンドを実行してローカル環境での動作を確認します。
npm run preview:worker
以下のようにlocalhost:8771で確認できれば成功です。
さて以下のコマンドで Workers にデプロイしていきます。
npm run deploy:worker
デプロイが完了すると、本番環境にアクセスするための URL が表示されます。その URL にブラウザからアクセスして、実際に動作することを確認しましょう。
自分の場合はhttps://blog-starter-app.gemcook.workers.devです。
まとめ
さて動画を見ながらですが、Workers の Assets Binding を試してみることができました。Workers はバックエンドのものという認識でいましたが、フロントもできるよということがわかりました。Pages もある中 Workers でフロントの構築ができる機能が追加されたということは将来的に Pages と Workers が統合する未来とかがあったりするのだろうか…（影響デカそうなので多分ない気もするが）
今回は Next.js を例にしましたが、他にも対応しているフレームワークはありますし、今後も対応しているフレームワークは増やしていくみたいなので気になった方はぜひ試してみてください。また Cloudflare Evangelist の亀田さんが以下の記事で詳しくまとめてもいらっしゃるのでみてみてください。
Discussion