Next.jsをCloudflare workersから配信したい！ Part 2
はじめに
Part 1では workder.devにデプロイするところまでやったよね
Part2ではproductionにデプロイして、KVを使ってみましょう
Productionデプロイ
productionにデプロイする前にやることがあります。
それはAレコードの登録です。
例えば、"www.murajun1978.dev"へのリクエストをworkersに託すって設定をしないといけない。
でも、こんなのは5秒で終わる(反映するまでに5分以上かかるときがあります)
CloudflareのDNSにAレコードを追加します！
こんな感じ
次にデプロイ設定をwrangler.tomlに追記します。
ここでちょっと気をつけてほしいこと
デプロイでローカル環境で実行することはほぼないですよね？だいたいはCIでデプロイします。
CIでデプロイするってことは、GitHubなんかにデプロイするってことですよね？
そこにAPI Tokenをコミットすると。。。ね。。。
はい、wranglerには環境変数が用意されています。こちらを使うのが推奨というか、使おうね
僕はDokcerを使ってるので↓のように設定しました
# docker-compose.yml
version: '3.8'
services:
node:
build: .
volumes:
- .:/home/app
ports:
- 3000:3000
env_file:
- wrangler.env
# wrangler.env CF_API_TOKEN=<YOUR API TOKEN> CF_ACCOUNT_ID=<YOUR ACCOUNT ID> CF_ZONE_ID=<YOUR ZONE ID>
んで、gitignoreにwrangler.envを追加しときましょー
CIにも↑の環境変数を設定すればOKです。
これで安心！
さ、productionの設定を追記しよう
# wrangler.toml name = "dev-site" type = "webpack" workers_dev = true route = "" [site] bucket = "./out" entry-point = "workers-site" [env.production] # プロダクション用の設定 route = "www.murajun1978.dev/*"
routeを追加するだけです！
この設定で、www.murajun1978.dev/のすべてのリクエストがworkersに転送されます
Productionデプロイ
$ npx wrangler publish --env production
やばい、簡単すぎる。。。
Cloudflareで確認するとこんな感じ
これでProductionにデプロイできました。
ここでちょっとKVを見てみましょ
ファイル名がKEYになってて、値にはファイルのHTMLやJS、CSSなんかが格納されています。
デプロイ時に、KVにKEY ファイル名 値: HTMLやJSを格納して、Edge serverから参照できるようにしているってことですね。
なので、アクセスするたびに、workersのアクセスカウントが++されていきますw
そう、HTML、JS、CSSファイルにアクセスするたびにねw
金額はささいなものなので、気にはなりませんが(少なくとも僕は)、完全無料でブログを公開したい、もしくはもっと手抜きしたい場合は、NetlifyやVercelを使うって選択になりそうですね.。
GitHub連携できるのも敷居が一気にさがります。
KVにcurrent versionを設定する
これ、やろうと思ったのですが、なんか微妙だったので僕は見送りました。
切り戻したいときはrevertすればいいかなと、とはいえKVに値をセットしてみましょ(とりあえず
まずは、KVのnamespaceを設定する必要があります
# wrangler.toml
kv-namespaces = [
{ binding = "CONTROL", id = <YOUR KV ID>}
]
[env.production]
route = <YOUR ROUTE>
kv-namespaces = [
{ binding = "CONTROL", id = <YOUR PRODUCTION KV ID>}
]
KV IDってのは↓です
んじゃ、KVにセットしてみましょう
$ npx wrangler kv:key put --binding=CONTROL "putting test" "test"
はい、登録できましたね！
まとめ
Cloudflare workersを2記事にまとめてみました。
マジで簡単。
ちなみに、悶絶雑なページをlighthouseで計測してみました！
Next.js + Preactなら楽勝で100Pointsですよw
近々、ブログもこちらに移行する予定です
おそらく、Vercelを使うことになると思います。
次はCloudflareのImage Resizingを使ってみようかなー
サイトはVercelから配信して、画像はS3やCloud Storageにアップロードしたものを、Cloudflareから配信するって感じです。
pre-renderするときに、画質を落としてぼかした画像を表示しておいて、裏でダウンロードが完了したら、ちゃんとした画像に差し替えるって感じですかね。(Mediumと同じやつです
こうご期待w
Enjoy Cloudflare workers ヘ(^o^)ノ
