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
330
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を本番投入に向けて検証している話
horai93
3
1.2k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
RailsConf 2023
tenderlove
29
1k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Side Projects
sachag
452
42k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
A Tale of Four Properties
chriscoyier
158
23k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Cult of Friendly URLs
andyhume
78
6.2k
Docker and Python
trallard
44
3.3k
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
create-remix@2.0.0 --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