Cloudflare WorkersにNext.jsをデプロイしてみる

Cloudflare Meet-up Online!! #4
https://cfm-cts.connpass.com/event/334187/

Transcript

1. Cloudflare WorkersにNext.jsを デプロイしてみる あさひ

2. • 自己紹介
 • Workers 
 • Assets Binding
 • 試してみる
 • まとめ
 アジェンダ 
 
 
 

3. 株式会社Gemcook所属：
 あさひ(@asahiXXXXXXXXX)
 
 バックエンドエンジニア
 TypeScript、Go、AWS、Cloudflare 歴1年経ってないくらい 好きなサービス・OSS Workers、Hono、CDKが好き 趣味 配信(見る方)、StreetFighter6、LoL 自己紹介

4. 株式会社Gemcook所属：
 あさひ(@asahiXXXXXXXXX)
 
 バックエンドエンジニア
 TypeScript、Go、AWS、Cloudflare 歴1年くらい 好きなサービス・OSS Workers、Hono、CDKが好き 趣味 配信(見る方)、StreetFighter6、LoL 自己紹介
 Zennで週刊Cloudflareという 記事を毎週出しています。 Zenn: あさひ@asahi_iwm
5. Cloudflare Workers

6. サーバーレスアプリケーションを構築し、世界中に即座にデプロイすることで、卓越したパ フォーマンス、信頼性、スケールを実現します。 ドキュメントより引用 他のCloudでいうところのこの辺のサービスと思ってもらえればOK Cloudflare Workers 
 AWS Lambda GoogleCloud CloudRun Azure Functions
7. Assets Binding

8. Create fast, scalable front-end applications deployed to Cloudflare Workers. • Cloudflare Docsより引用 • TL;DR 
 ◦ フロントエンドのアプリケーションをWorkersにデプロイ できるよ！ 
 Assets Binding
9. 試してみる

10. • Next.jsをセットアップする
 ◦ npx create-next-app --example blog-starter blog-starter-app 
 • @opennextjs/cloudflare をインストール
 ◦ npm install --save-dev @opennextjs/cloudflare
 
 • ここまででNext.jsの
 ブログテンプレートで作成できます
 試していく
11. • next.config.js を作成
 試していく
12. • wrangler.toml を作成
 
 試していく
13. • package.json の scripts を書き換える
 試していく
14. • npm run preview:worker
 
 試していく
15. • npm run preview:worker
 なんやかんや調べてみて
 • NEXT15で入ってくるものに対応していないっぽい
 ◦ 
 試していく
16. • NEXTを14.2.15に書き換える
 ◦ 再度 npm i していく
 
 • 改めて、npm run preview:worker 
 ◦ すると…
 試していく
17. • npm run preview:worker
 試していく
18. • npm run deploy:worker
 
 試していく
19. • npm run deploy:worker
 
 試していく
20. まとめ

21. • Workersでもフロントエンドのフレームワークがデプロ イできたよ
 • WorkersならLogを出せるよ！
 • --remote が使える！
 • CI/CDやPages Functionsの互換はなさそう
 まとめ