CloudflareでSPA開発

URL ハッカソン: https://topaz.dev/projects/a939290be6545eff5895

Transcript

1. W i t h C l o u d f l a r e P a g e s F u n c t i o n s Cloudflare でSPA 開発 C l o u d f l a r e M e e t - u p V o l . 8
2. 1. 自己紹介 2.SPA のデプロイ先でCloudflare を選ぶ理由 3.Cloudflare Pages Functions とは 4. まとめ A G E N D A
3. 所属: 福岡デザイン＆テクノロジー専門学校 3 年(27 卒) 興味のある分野: インフラ・バックエンドエンジニア Naoto Kido(naoido) 1. 自己紹介
4. 1. ハッカソンでの使用 https://topaz.dev/projects/a939290be6545eff5895
5. 2. SPA のデプロイ先で 　Cloudflare を選ぶ理由
6. 低コストでデプロイ・運用ができる 01. 2. Cloudflare を選ぶ理由 コードレビューが楽になる 02. SPA でもSEO 対策ができる 03.
7. 1. 低コストでデプロイ・運用ができる Github と連携すると 自動でCI/CD の構築 小規模〜中規模であ れば、コストを気に せず運用できる ビルド(500 回/ 月) サイト数・リクエス ト数が無制限
8. 2. コードレビューが楽になる プルリクエスト作成時に 自動でビルドし、プレビュー用URL を発行してくれるので、レビュー時 にビルドして確認する必要がない
9. 3. SPA でもSSR っぽくできる CloudflarePagesFunctions を使用することで、 SPA でも部分的にSSR することができる。 例: meta タグの動的変更
10. ClouflarePagesFunctions はページのエンドポイントに Workers を実装することができるようになっている。 プロジェクトルートにfunctions ディレクトリを作成し、 その下にworkers で実行されるファイルを記載する。 3. Cloudflare Pages Functions とは
11. functions 配下はそのままエンドポイントになる。 例: https://example.com/hello エンドポイント
12. ブログの内容に応じてogp の内容を変更したかったので、 以下のようにfunctions を配置した。 [id] のようにすると、 動的ルーティングにすることができる 実際に実装した例 ( ディレクトリ)
13. ブログの内容に応じてogp の内容を変更したかったので、 以下のようにfunctions を配置した。 [id] のようにすると、 動的ルーティングにすることができる 実際に実装した例 ( ディレクトリ)
14. 実際に実装した例 ( 処理内容) index.html の中身を取得
15. 実際に実装した例 ( 処理内容) 記事の中身を取得
16. 実際に実装した例 ( 処理内容) 記事の中身をmeta タグに挿入
17. 4. まとめ
18. CloudflarePages へデプロイすることで、 低コストでデプロイ・運用 プレビューをプルリクエスト毎に生成してくれてコー ドレビューが楽になる CloudflarePagesFunctions を使用して、部分的に SSR を実装することができる 4. まとめ