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