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
280
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
そろそろCursorに戻ってきてもええんちゃう?
asahiiwm
1
720
RAGの構築は脳死でやれ
asahiiwm
0
130
AI Agent に社内リソース から検索させたい
asahiiwm
1
1.2k
Cloudflareアップデート予想
asahiiwm
0
110
記事を書いた成功体験
asahiiwm
0
9
CloudflareStack でRAGに入門
asahiiwm
0
230
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Faster Mobile Websites
deanohume
309
31k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
A better future with KSS
kneath
239
17k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
890
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
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の互換はなさそう まとめ