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
240
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 中川 聡也
Cloudflare Pagesのサイトを NotebookLMから読みやすくする Cloudflare Meet-up Tokyo Vol.7
xiombatsg
0
160
Cloudflare Workers でWebGPUと戯れる
xiombatsg
0
220
受託開発でGitLab CI を活用していく
xiombatsg
1
570
Webサービス開発でのPostman活用方法
xiombatsg
0
260
Cloudflare Worker x Momento でリージョンと戦う
xiombatsg
0
860
OCHa Cafe Season7をふりかえって
xiombatsg
0
300
Other Decks in Programming
See All in Programming
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.1k
型安全なDrag and Dropの設計を考える
yudppp
5
640
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
340
External SecretsのさくらProvider初期実装を担当しています
logica0419
0
200
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
110
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
1
610
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
160
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
tomohisa
1
160
ワンバイナリWebサービスのススメ
mackee
10
6.6k
rbs-traceを使ってWEARで型生成を試してみた After RubyKaigi 2025〜ZOZO、ファインディ、ピクシブ〜 / tried rbs-trace on WEAR
oyamakei
0
510
人には人それぞれのサービス層がある
shimabox
3
400
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
160
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Optimizing for Happiness
mojombo
378
70k
The Cost Of JavaScript in 2023
addyosmani
49
8k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
460
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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