Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cloudflare WorkersにNext.jsをデプロイしてみる
Search
Asahi
November 18, 2024
0
250
Cloudflare WorkersにNext.jsをデプロイしてみる
Cloudflare Meet-up Online!! #4
https://cfm-cts.connpass.com/event/334187/
Asahi
November 18, 2024
Tweet
Share
More Decks by Asahi
See All by Asahi
RAGの構築は脳死でやれ
asahiiwm
0
110
AI Agent に社内リソース から検索させたい
asahiiwm
1
1.1k
Cloudflareアップデート予想
asahiiwm
0
100
記事を書いた成功体験
asahiiwm
0
9
CloudflareStack でRAGに入門
asahiiwm
0
230
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Become a Pro
speakerdeck
PRO
29
5.4k
Side Projects
sachag
455
43k
It's Worth the Effort
3n
185
28k
KATA
mclloyd
30
14k
For a Future-Friendly Web
brad_frost
179
9.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Why Our Code Smells
bkeepers
PRO
337
57k
Facilitating Awesome Meetings
lara
54
6.5k
A Tale of Four Properties
chriscoyier
160
23k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
Cloudflare WorkersにNext.jsを デプロイしてみる あさひ
• 自己紹介 • Workers • Assets Binding • 試してみる
• まとめ アジェンダ
株式会社Gemcook所属: あさひ(@asahiXXXXXXXXX) バックエンドエンジニア TypeScript、Go、AWS、Cloudflare 歴1年経ってないくらい 好きなサービス・OSS Workers、Hono、CDKが好き 趣味 配信(見る方)、StreetFighter6、LoL
自己紹介
株式会社Gemcook所属: あさひ(@asahiXXXXXXXXX) バックエンドエンジニア TypeScript、Go、AWS、Cloudflare 歴1年くらい 好きなサービス・OSS Workers、Hono、CDKが好き 趣味 配信(見る方)、StreetFighter6、LoL
自己紹介 Zennで週刊Cloudflareという 記事を毎週出しています。 Zenn: あさひ@asahi_iwm
Cloudflare Workers
サーバーレスアプリケーションを構築し、世界中に即座にデプロイすることで、卓越したパ フォーマンス、信頼性、スケールを実現します。 ドキュメントより引用 他のCloudでいうところのこの辺のサービスと思ってもらえればOK Cloudflare Workers AWS Lambda GoogleCloud
CloudRun Azure Functions
Assets Binding
Create fast, scalable front-end applications deployed to Cloudflare Workers. •
Cloudflare Docsより引用 • TL;DR ◦ フロントエンドのアプリケーションをWorkersにデプロイ できるよ! Assets Binding
試してみる
• Next.jsをセットアップする ◦ npx create-next-app --example blog-starter blog-starter-app •
@opennextjs/cloudflare をインストール ◦ npm install --save-dev @opennextjs/cloudflare • ここまででNext.jsの ブログテンプレートで作成できます 試していく
• next.config.js を作成 試していく
• wrangler.toml を作成 試していく
• package.json の scripts を書き換える 試していく
• npm run preview:worker 試していく
• npm run preview:worker なんやかんや調べてみて • NEXT15で入ってくるものに対応していないっぽい ◦ 試していく
• NEXTを14.2.15に書き換える ◦ 再度 npm i していく • 改めて、npm
run preview:worker ◦ すると… 試していく
• npm run preview:worker 試していく
• npm run deploy:worker 試していく
• npm run deploy:worker 試していく
まとめ
• Workersでもフロントエンドのフレームワークがデプロ イできたよ • WorkersならLogを出せるよ! • --remote が使える! • CI/CDやPages
Functionsの互換はなさそう まとめ