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
300
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
3
1.1k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
26
3.4k
The Invisible Side of Design
smashingmag
297
50k
Adopting Sorbet at Scale
ufuk
73
9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
130
A better future with KSS
kneath
237
17k
Bash Introduction
62gerente
608
210k
Raft: Consensus for Rubyists
vanstee
136
6.6k
We Have a Design System, Now What?
morganepeng
50
7.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Thoughts on Productivity
jonyablonski
67
4.3k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
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