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
Vue.js_好きに捧ぐ Nuxt Hub で簡単に始めるCloudflare
Search
中川 聡也
November 18, 2024
Programming
1
270
Vue.js_好きに捧ぐ Nuxt Hub で簡単に始めるCloudflare
https://cfm-cts.connpass.com/event/334187/
Cloudflare Meet-up Online!! #4 LT資料
中川 聡也
November 18, 2024
Tweet
Share
More Decks by 中川 聡也
See All by 中川 聡也
生成AIで外部委託への発注を全力で奪ってみた
xiombatsg
0
36
Cloudflare Pagesのサイトを NotebookLMから読みやすくする Cloudflare Meet-up Tokyo Vol.7
xiombatsg
0
190
Cloudflare Workers でWebGPUと戯れる
xiombatsg
0
250
受託開発でGitLab CI を活用していく
xiombatsg
1
600
Webサービス開発でのPostman活用方法
xiombatsg
0
270
Cloudflare Worker x Momento でリージョンと戦う
xiombatsg
0
950
OCHa Cafe Season7をふりかえって
xiombatsg
0
310
Other Decks in Programming
See All in Programming
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
200
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
9
2k
実践!App Intents対応
yuukiw00w
1
220
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
130
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
1.8k
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
10k
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
1
250
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
190
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
110
Reactの歴史を振り返る
tutinoko
1
180
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
1k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Automating Front-end Workflow
addyosmani
1370
200k
What's in a price? How to price your products and services
michaelherold
246
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
Why Our Code Smells
bkeepers
PRO
337
57k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Transcript
Vue.js 好きに捧ぐ。 Nuxt Hubで簡単に始めるCloudflare Cloudflare Meet-up Online!! #4 2024/11/18 株式会社Future
Techno Developers 中川 聡也
サーバーレス:Serverless/Cloudflare/Momento /TiUG ゲーム‧アプリ:IGDA Japan / Japan Android Group Cloud Native:OCha
Cafe! 他も顔出してます。どこかであったら声かけてください! まずは⾃⼰紹介 @xiombatsg 1 何をしている⼈? 商品開発をしているお客様を技術⾯でご⽀援 チーム構築のご⽀援(Platform Engineer,SRE…) どんなジャンル? ゲーム/Webサービス/CG/組み込み/etc… どんなコミュニティに顔を出している? Cloudflare Meetup Tokyo, TiUGの運営に参画 中川 聡也 Satoyan https://zenn.dev/nakagawa_satoya
お客様の周りにプロジェクトが炎上しているお客様はいらっしゃいますか? システム開発で いつもプロジェクトが炎上してしまう と困っていませんか? プロジェクト開発に知⾒のあるエンジニアが、 課題管理やスムーズな進捗管理などを⾒直し、 解決に向けてアドバイスします!
今⽇は Vue Fes Japan 2024がとても楽しかったので Cloudflare 上で動くNuxt Hub を紹介したい!
3
本題
Nuxt Hub知ってますか? Nuxt HubはCloudflare のCloudflare Pages, R2,D1,KV,Cacheを使 ⽤して、簡単にサイト作りをするためのツールです。 簡単に使えるのでアカウントがあればすぐにプロジェクトを作れ ます。
5 https://hub.nuxt.com/
手順 Step 1 アカウント開設(無料のSolo版) Step 2 GitHub アカウントと紐付け Step 3
プロジェクト作成
手順 Step 4 Cloudflare アカウントと紐付ける Step 5 nuxt.config.ts に @nuxthub/core
と 利⽤する機能 を hubに追加する
デプロイ npx nuxthub deploy コマンドで、あとは画⾯に従うだけ
ダッシュボードがちょっと嬉しい (D1が触れる)
ダッシュボードがちょっと嬉しい (R2にuploadが!)
ダッシュボードがちょっと嬉しい (KVも触れる!)
ダッシュボードがちょっと嬉しい (Cacheが見える)
ダッシュボードがちょっと嬉しい (Logが見える)
ちょっと良さげだけど、気になるところ 1. Nuxt Hub を使うと、Cloudflare Pagesを使った基本的なことはできる a. 今回紹介しなかったけど、AI,Verctorizeも実験的に入っている(ローカルだけ だけどね) 2.
Cloudflare のダッシュボードに他メンバーを招待しなくても良さそう a. 触らせたくない。ただNuxtHubのTeamプラン以上はお金がかかる 3. 細かい設定したい場合は従来通りにwrangler 使った方が良さそう
最後に 「最小限の労力で Cloudflare インフラ上の Nuxt を実現 - これはすごい!」
宣伝
Cloudflare Meetup TOKYO Vol.7 2025.xx.xx(xxx)
#CloudflareUG #CloudflareUG_hnd
Discord #CloudflareUG #CloudflareUG_hnd • ぜひDiscordに参加してCloudflareについてキャッチアップやディスカッションしましょ う。
事業紹介 19 プロジェクト⽀援事業 Webサイト運営事業 ソフトウェア開発事業 Web診断事業 当社サービス 代理店‧顧客ご紹介企業様 お客様 保守担当メンバー‧パートナー
弊社は「ソフトウェア商品開発をサポートする」企業です
None