Cloudflareを使い倒す！

Transcript

1. Cloudflareを使い倒す！ とっと／株式会社ゆめみ 1
2. 自己紹介 ニックネーム：とっと 所属： 職種：フロントエンドエンジニア 推しフレームワーク RemixとAstro 推し：棗いつき、藍月なくる 布教用Playlist 2
3. Cloudflareはいいぞ 安い 早い 簡単 3
4. どういうサービスがある？ 筆者がよく使うものだけでも… Cloudflare CDN Cloudflare Pages Cloudflare Workers Cloudflare Access 4
5. 他にも Cloudflare Workers Cloudflare D1 Cloudflare KV Cloudflare Queues Cron Triggers Workers AI Cloudflare R2 Cloudflare Zero Trust etc... 5
6. 特におすすめ Cloudflare Pages 静的アセットの配信からSSRまでカバー ブランチプレビューあり 無料！！！（条件あり） Cloudflare Access 特定のドメインに認証を追加 メール、SSO、IP制限などに対応 無料！！！ 6
8. 使用例 8
9. フロントエンドのホスティング Cloudflare Pages Cloudflare Access Remix, Astro, Qwik, etc... ブランチプレビュー + SSR + CI/CD Accessで閲覧できる対象を限定することも可能 9
10. Web API Cloudflare Workers Cloudflare D1 Cloudflare KV Hono データベースもD1とKVでいける Cloudflare内のスタックで全て完結 10
11. 作成中のRSS Reader RPC バックエンド Cloudflare D1 Cron RSS FeedのTrigger Queue 取得処理のバファー Pages Webフロントエンド RSS Feedの取得処理 外部に公開しない処理 ユーザー RSS Feed （Zennなど） 11
12. Cloudflare WorkersのRPCモード 別のWorkersをあたかも 普通のインスタンスの様に呼び出せる機能 12
13. RPCモードのサンプルコード // worker1.ts import { WorkerEntrypoint } from "cloudflare:workers"; export default class extends WorkerEntrypoint { async fetch() { return new Response("Hello World"); } async newCounter() { let value = 0; return (increment = 0) => { value += increment; return value; }; } } # worker2 > wrangler.toml name = "client_worker" main = "./src/clientWorker.js" services = [ { binding = "COUNTER_SERVICE", service = "counter-service" } ] // worker2.ts export default { async fetch(request, env) { using f = await env.COUNTER_SERVICE.newCounter(); await f(2); // returns 2 await f(1); // returns 3 const count = await f(-5); // returns -2 return new Response(count); }, }; 13
14. まとめ Cloudflareでできることは色々あります！ まずは個人開発（$5/月）で試してみませんか？ 14