Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

1. 自己紹介 2.SPA のデプロイ先でCloudflare を選ぶ理由 3.Cloudflare Pages Functions とは 4. まとめ A G E N D A

Slide 3

Slide 3 text

所属: 福岡デザイン＆テクノロジー専門学校 3 年(27 卒) 興味のある分野: インフラ・バックエンドエンジニア Naoto Kido(naoido) 1. 自己紹介

Slide 4

Slide 4 text

1. ハッカソンでの使用 https://topaz.dev/projects/a939290be6545eff5895

Slide 5

Slide 5 text

2. SPA のデプロイ先で 　Cloudflare を選ぶ理由

Slide 6

Slide 6 text

低コストでデプロイ・運用ができる 01. 2. Cloudflare を選ぶ理由 コードレビューが楽になる 02. SPA でもSEO 対策ができる 03.

Slide 7

Slide 7 text

1. 低コストでデプロイ・運用ができる Github と連携すると 自動でCI/CD の構築 小規模〜中規模であ れば、コストを気に せず運用できる ビルド(500 回/ 月) サイト数・リクエス ト数が無制限

Slide 8

Slide 8 text

2. コードレビューが楽になる プルリクエスト作成時に 自動でビルドし、プレビュー用URL を発行してくれるので、レビュー時 にビルドして確認する必要がない

Slide 9

Slide 9 text

3. SPA でもSSR っぽくできる CloudflarePagesFunctions を使用することで、 SPA でも部分的にSSR することができる。 例: meta タグの動的変更

Slide 10

Slide 10 text

ClouflarePagesFunctions はページのエンドポイントに Workers を実装することができるようになっている。 プロジェクトルートにfunctions ディレクトリを作成し、 その下にworkers で実行されるファイルを記載する。 3. Cloudflare Pages Functions とは

Slide 11

Slide 11 text

functions 配下はそのままエンドポイントになる。 例: https://example.com/hello エンドポイント

Slide 12

Slide 12 text

ブログの内容に応じてogp の内容を変更したかったので、 以下のようにfunctions を配置した。 [id] のようにすると、 動的ルーティングにすることができる 実際に実装した例 ( ディレクトリ)

Slide 13

Slide 13 text

ブログの内容に応じてogp の内容を変更したかったので、 以下のようにfunctions を配置した。 [id] のようにすると、 動的ルーティングにすることができる 実際に実装した例 ( ディレクトリ)

Slide 14

Slide 14 text

実際に実装した例 ( 処理内容) index.html の中身を取得

Slide 15

Slide 15 text

実際に実装した例 ( 処理内容) 記事の中身を取得

Slide 16

Slide 16 text

実際に実装した例 ( 処理内容) 記事の中身をmeta タグに挿入

Slide 17

Slide 17 text

4. まとめ

Slide 18

Slide 18 text

CloudflarePages へデプロイすることで、 低コストでデプロイ・運用 プレビューをプルリクエスト毎に生成してくれてコー ドレビューが楽になる CloudflarePagesFunctions を使用して、部分的に SSR を実装することができる 4. まとめ