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
110
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
記事を書いた成功体験
asahiiwm
0
2
CloudflareStack でRAGに入門
asahiiwm
0
190
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Automating Front-end Workflow
addyosmani
1369
200k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Visualization
eitanlees
146
15k
Building an army of robots
kneath
303
45k
Git: the NoSQL Database
bkeepers
PRO
429
65k
Writing Fast Ruby
sferik
628
61k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Music & Morning Musume
bryan
46
6.4k
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の互換はなさそう まとめ