Tweet
Tweet

Slide 1

Slide 1 text

Cloudflare Pages と Newt で Headless CMS をやってみた 2023.09.20 Cloudflare Meetup Kobe Kick Off! Kosuke Horai

Slide 2

Slide 2 text

自己紹介 ● Kosuke Horai ● 2023〜 Webエンジニア@アイデミー ● 2019〜 受託開発・準委任開発@1人法人 ● よく触る技術 GCP、Cloudflare、Shopify、TypeScript、 React、BigQuery ● 会社でCloudflare活用を推し進めてる @horai93

Slide 3

Slide 3 text

とりあえず先にデモサイト ● サイト https://testing-remix-v2-newt.pages.dev/ ● コード https://github.com/pensuke81/testing-remix-v2-newt ● イメージ →

Slide 4

Slide 4 text

Cloudflare Pages を使うモチベーション ● サーバーの管理不要でアプリケーションを書けば動く ● 安い。趣味なら無料で完結するし業務で使う想定でも安い。 ● Github と接続するだけで完結するしすべてが楽

Slide 5

Slide 5 text

他サービスを思い浮かべながらの比較 ● 日本リージョンがもちろんある ● 開発人数が増えることで料金形態が変わることもない ● デプロイが高速

Slide 6

Slide 6 text

Newt を使うモチベーション ● 必要な機能が十分すぎるほど揃ってる上に安い ○ 画像配信最適化、予約投稿 ○ 管理画面もとても使いやすい ● 「次の WordPress をつくる」ミッションを応援したい ● 安い

Slide 7

Slide 7 text

Cloudflare Pages に最適な FW、 Remix ● template 指定だけで機能フルに利用可能 ○ npx [email protected] --template remix-run/remix/templates/cloudflare-pages ● Next も対応可能だが、i18n Routing が動かなかったので見送り

Slide 8

Slide 8 text

実践編

Slide 9

Slide 9 text

デモサイト ● サイト https://testing-remix-v2-newt.pages.dev/ ● コード https://github.com/pensuke81/testing-remix-v2-newt

Slide 10

Slide 10 text

テンプレートを利用してデモサイトを構築

Slide 11

Slide 11 text

カスタムな定義を柔軟に定義可能 ~ 基本的なコンテンツの定義

Slide 12

Slide 12 text

カスタムな定義を柔軟に定義可能 ~ 基本定義の組み合わせ 基本的な定義を組み合わせた項目を用意して使 いやすい汎用定義化

Slide 13

Slide 13 text

カスタムな定義を柔軟に定義可能 ~ コンテンツ例

Slide 14

Slide 14 text

作成したセクション例 定義 セクション例

Slide 15

Slide 15 text

その他Newtの良いところ ● お問い合わせフォーム機能もある ● 多言語対応もちょっと工夫すればそれなりにできちゃう

Slide 16

Slide 16 text

Cloudflareの推しポイント ● Supercloud の基盤が整っていてとても良い 「コードを書けばこちらで実行する、スケーリングやロケーションといった細かいこと は気にしなくていい」 → Pages, Workers, KV, Queues, R2… ● とにかく楽だし、セキュアだし、スケールもしていける

Slide 17

Slide 17 text

Thank you Kosuke Horai