Vue.js_好きに捧ぐ Nuxt Hub で簡単に始めるCloudflare

https://cfm-cts.connpass.com/event/334187/
Cloudflare Meet-up Online!! #4 LT資料

Transcript

1. Vue.js 好きに捧ぐ。 Nuxt Hubで簡単に始めるCloudflare Cloudflare Meet-up Online!! #4 2024/11/18 株式会社Future Techno Developers 中川 聡也
2. サーバーレス：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
3. お客様の周りにプロジェクトが炎上しているお客様はいらっしゃいますか？ システム開発で いつもプロジェクトが炎上してしまう と困っていませんか？ プロジェクト開発に知⾒のあるエンジニアが、 課題管理やスムーズな進捗管理などを⾒直し、 解決に向けてアドバイスします！
4. 今⽇は Vue Fes Japan 2024がとても楽しかったので 
 Cloudflare 上で動くNuxt Hub を紹介したい！
 3
5. 本題
6. Nuxt Hub知ってますか？ Nuxt HubはCloudflare のCloudflare Pages, R2,D1,KV,Cacheを使 ⽤して、簡単にサイト作りをするためのツールです。 簡単に使えるのでアカウントがあればすぐにプロジェクトを作れ ます。 5 https://hub.nuxt.com/
7. 手順 Step 1 アカウント開設(無料のSolo版) Step 2 GitHub アカウントと紐付け Step 3 プロジェクト作成
8. 手順 Step 4 Cloudflare アカウントと紐付ける Step 5 nuxt.config.ts に @nuxthub/core と 利⽤する機能 を hubに追加する
9. デプロイ npx nuxthub deploy コマンドで、あとは画⾯に従うだけ
10. ダッシュボードがちょっと嬉しい (D1が触れる）
11. ダッシュボードがちょっと嬉しい (R2にuploadが！）
12. ダッシュボードがちょっと嬉しい (KVも触れる！）
13. ダッシュボードがちょっと嬉しい (Cacheが見える）
14. ダッシュボードがちょっと嬉しい (Logが見える）
15. ちょっと良さげだけど、気になるところ 1. Nuxt Hub を使うと、Cloudflare Pagesを使った基本的なことはできる
 a. 今回紹介しなかったけど、AI,Verctorizeも実験的に入っている（ローカルだけ だけどね）
 2. Cloudflare のダッシュボードに他メンバーを招待しなくても良さそう
 a. 触らせたくない。ただNuxtHubのTeamプラン以上はお金がかかる
 3. 細かい設定したい場合は従来通りにwrangler 使った方が良さそう

16. 最後に 「最小限の労力で Cloudflare インフラ上の Nuxt を実現 - これはすごい！」

17. 宣伝
18. Cloudflare Meetup 
 TOKYO 
 Vol.7 
 
 2025.xx.xx(xxx) 
 #CloudflareUG 
 #CloudflareUG_hnd 

19. Discord 
 #CloudflareUG 
 #CloudflareUG_hnd 
 • ぜひDiscordに参加してCloudflareについてキャッチアップやディスカッションしましょ う。

20. 事業紹介 19 プロジェクト⽀援事業 Webサイト運営事業 ソフトウェア開発事業 Web診断事業 当社サービス 代理店‧顧客ご紹介企業様 お客様 保守担当メンバー‧パートナー 弊社は「ソフトウェア商品開発をサポートする」企業です