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
230
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
100
AI Agent に社内リソース から検索させたい
asahiiwm
1
1.1k
Cloudflareアップデート予想
asahiiwm
0
100
記事を書いた成功体験
asahiiwm
0
8
CloudflareStack でRAGに入門
asahiiwm
0
220
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Invisible Side of Design
smashingmag
300
51k
Designing for humans not robots
tammielis
253
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Typedesign – Prime Four
hannesfritz
42
2.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
710
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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の互換はなさそう まとめ