Cloudflare PagesとNewtでHeadless CMSをやってみた

Cloudflare Meetup Kobe Kick Off!で発表したスライドです。

Transcript

1. Cloudflare Pages と Newt で Headless CMS をやってみた 2023.09.20 Cloudflare Meetup Kobe Kick Off! Kosuke Horai
2. 自己紹介 • Kosuke Horai • 2023〜 Webエンジニア@アイデミー • 2019〜 受託開発・準委任開発@1人法人 • よく触る技術 GCP、Cloudflare、Shopify、TypeScript、 React、BigQuery • 会社でCloudflare活用を推し進めてる @horai93
3. とりあえず先にデモサイト • サイト https://testing-remix-v2-newt.pages.dev/ • コード https://github.com/pensuke81/testing-remix-v2-newt • イメージ →
4. Cloudflare Pages を使うモチベーション • サーバーの管理不要でアプリケーションを書けば動く • 安い。趣味なら無料で完結するし業務で使う想定でも安い。 • Github と接続するだけで完結するしすべてが楽
5. 他サービスを思い浮かべながらの比較 • 日本リージョンがもちろんある • 開発人数が増えることで料金形態が変わることもない • デプロイが高速
6. Newt を使うモチベーション • 必要な機能が十分すぎるほど揃ってる上に安い ◦ 画像配信最適化、予約投稿 ◦ 管理画面もとても使いやすい • 「次の WordPress をつくる」ミッションを応援したい • 安い
7. Cloudflare Pages に最適な FW、 Remix • template 指定だけで機能フルに利用可能 ◦ npx create-remix@2.0.0 --template remix-run/remix/templates/cloudflare-pages • Next も対応可能だが、i18n Routing が動かなかったので見送り
8. 実践編
9. デモサイト • サイト https://testing-remix-v2-newt.pages.dev/ • コード https://github.com/pensuke81/testing-remix-v2-newt
10. テンプレートを利用してデモサイトを構築
11. カスタムな定義を柔軟に定義可能 ~ 基本的なコンテンツの定義
12. カスタムな定義を柔軟に定義可能 ~ 基本定義の組み合わせ 基本的な定義を組み合わせた項目を用意して使 いやすい汎用定義化
13. カスタムな定義を柔軟に定義可能 ~ コンテンツ例
14. 作成したセクション例 定義 セクション例
15. その他Newtの良いところ • お問い合わせフォーム機能もある • 多言語対応もちょっと工夫すればそれなりにできちゃう
16. Cloudflareの推しポイント • Supercloud の基盤が整っていてとても良い 「コードを書けばこちらで実行する、スケーリングやロケーションといった細かいこと は気にしなくていい」 → Pages, Workers, KV, Queues, R2… • とにかく楽だし、セキュアだし、スケールもしていける
17. Thank you Kosuke Horai