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 PagesとNewtでHeadless CMSをやってみた
Search
Horai
September 20, 2023
0
250
Cloudflare PagesとNewtでHeadless CMSをやってみた
Cloudflare Meetup Kobe Kick Off!で発表したスライドです。
Horai
September 20, 2023
Tweet
Share
More Decks by Horai
See All by Horai
HonoとPostgreSQL with Workersを本番投入に向けて検証している話
pensuke81
0
430
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Fireside Chat
paigeccino
25
2.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Clear Off the Table
cherdarchuk
89
320k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Teambox: Starting and Learning
jrom
130
8.6k
Six Lessons from altMBA
skipperchong
24
3.2k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Building Applications with DynamoDB
mza
89
5.8k
Visualization
eitanlees
139
14k
Transcript
Cloudflare Pages と Newt で Headless CMS をやってみた 2023.09.20 Cloudflare
Meetup Kobe Kick Off! Kosuke Horai
自己紹介 • Kosuke Horai • 2023〜 Webエンジニア@アイデミー • 2019〜 受託開発・準委任開発@1人法人
• よく触る技術 GCP、Cloudflare、Shopify、TypeScript、 React、BigQuery • 会社でCloudflare活用を推し進めてる @horai93
とりあえず先にデモサイト • サイト https://testing-remix-v2-newt.pages.dev/ • コード https://github.com/pensuke81/testing-remix-v2-newt • イメージ →
Cloudflare Pages を使うモチベーション • サーバーの管理不要でアプリケーションを書けば動く • 安い。趣味なら無料で完結するし業務で使う想定でも安い。 • Github と接続するだけで完結するしすべてが楽
他サービスを思い浮かべながらの比較 • 日本リージョンがもちろんある • 開発人数が増えることで料金形態が変わることもない • デプロイが高速
Newt を使うモチベーション • 必要な機能が十分すぎるほど揃ってる上に安い ◦ 画像配信最適化、予約投稿 ◦ 管理画面もとても使いやすい • 「次の
WordPress をつくる」ミッションを応援したい • 安い
Cloudflare Pages に最適な FW、 Remix • template 指定だけで機能フルに利用可能 ◦ npx
[email protected]
--template remix-run/remix/templates/cloudflare-pages • Next も対応可能だが、i18n Routing が動かなかったので見送り
実践編
デモサイト • サイト https://testing-remix-v2-newt.pages.dev/ • コード https://github.com/pensuke81/testing-remix-v2-newt
テンプレートを利用してデモサイトを構築
カスタムな定義を柔軟に定義可能 ~ 基本的なコンテンツの定義
カスタムな定義を柔軟に定義可能 ~ 基本定義の組み合わせ 基本的な定義を組み合わせた項目を用意して使 いやすい汎用定義化
カスタムな定義を柔軟に定義可能 ~ コンテンツ例
作成したセクション例 定義 セクション例
その他Newtの良いところ • お問い合わせフォーム機能もある • 多言語対応もちょっと工夫すればそれなりにできちゃう
Cloudflareの推しポイント • Supercloud の基盤が整っていてとても良い 「コードを書けばこちらで実行する、スケーリングやロケーションといった細かいこと は気にしなくていい」 → Pages, Workers, KV,
Queues, R2… • とにかく楽だし、セキュアだし、スケールもしていける
Thank you Kosuke Horai