Next.jsをCloudflare workersから配信したい！ Part 1

みなさま、Cloudflare workersってご存じですか？

workers.cloudflare.com

90カ国 200都市のデータセンターで動いてるEdge serverです。

service workerのEdge server版ってとこです。

S3やCloud StorageのファイルをCDN経由で配信？

ま、それも悪くないですが、Edge serverでパッと処理してシュッと返してあげましょ！S3もCloud Storageも不要です(ﾔｯﾀ

Edge serverだから、クライアントの一番近いところで動いているので、爆速でHTMLをreponseを返すことができます。

キャッシュコントロールも可能なので、さらに爆速！Preactで更にドン！

そんな誘惑にこころ動かされたので試してみます。

注意！Workers Sitesを使うので、Cloudflare workersの有料プランである必要があります💰（$5/月)

ではやってみましょう💨

Next.js

$ npx create-next-app

以上

wrangler

Cloudflare workersのCLIです。

github.com

インストール

$ npm install -D @cloudflare/wrangler

初期設定

CloudflareのアカウントIDとゾーンIDとAPI Tokenが必要です。

アカウントIDとゾーンIDは、Cloudflareのダッシュボードに表示されてるのでメモ。

API Tokenはworkers用のトークンを作成します。

こちらもダッシュボードに"API トークンを取得"ってリンクがあるので、そこからAPIトークンを作成します。

$ npx wrangler config

Enter API Token:

さきほど作成したAPI Tokenを入力して終了でっす。

Siteの作成

workers siteを作成します。

$ npx wrangler init --site hello-next-worker

workers-siteってディレクトリとwrangler.tomlが作成されたはずです。

name = "hello-next-worker"
type = "webpack"
account_id = <あなたのアカウトID>
workers_dev = true
route = ""
zone_id = <あなたのゾーンID>

[site]
bucket = "./out"
entry-point = "workers-site"

account_id, zoon_idを設定します。

bucketにはNext.jsのbuildディレクトリを指定します。

これでwranglerの設定は完了です。簡単！

ビルド

Next.jsでbuildします📦

$ npx next build
$ npx next export

Publish

workers devにpublishします。ProductionへのpublishはPart 2で。

$ npx wrangler publish

これで、https://hello-next-worker.<あなたのドメイン>.workers.dev にpublishできるはずです🎉

まとめ

以上で、Next.jsのbuildしたファイルをCloudflare workers siteにpublishして、Edge serverから配信することができました！

どうでしょう？簡単でしたよね？

Part 2では、ProductionへのpublishとKVを使って、前のバージョンに切り戻したりしてみます。

Enjoy Cloudflare workers ヘ(^o^)ノ