Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CloudflareでSPA開発
Search
Naoto Kido
June 11, 2025
1
12
CloudflareでSPA開発
URL ハッカソン:
https://topaz.dev/projects/a939290be6545eff5895
Naoto Kido
June 11, 2025
Tweet
Share
More Decks by Naoto Kido
See All by Naoto Kido
ObjectTとは
naoido
0
3
学生団体メンバー向け自己紹介
naoido
0
3
Goaで始めるマイクロサービス
naoido
0
28
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Practical Orchestrator
shlominoach
188
11k
The Invisible Side of Design
smashingmag
300
51k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Embracing the Ebb and Flow
colly
86
4.7k
Building Adaptive Systems
keathley
43
2.6k
Git: the NoSQL Database
bkeepers
PRO
430
65k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Scaling GitHub
holman
459
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Side Projects
sachag
455
42k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Transcript
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
1. 自己紹介 2.SPA のデプロイ先でCloudflare を選ぶ理由 3.Cloudflare Pages Functions とは 4.
まとめ A G E N D A
所属: 福岡デザイン&テクノロジー専門学校 3 年(27 卒) 興味のある分野: インフラ・バックエンドエンジニア Naoto Kido(naoido) 1.
自己紹介
1. ハッカソンでの使用 https://topaz.dev/projects/a939290be6545eff5895
2. SPA のデプロイ先で Cloudflare を選ぶ理由
低コストでデプロイ・運用ができる 01. 2. Cloudflare を選ぶ理由 コードレビューが楽になる 02. SPA でもSEO 対策ができる
03.
1. 低コストでデプロイ・運用ができる Github と連携すると 自動でCI/CD の構築 小規模〜中規模であ れば、コストを気に せず運用できる ビルド(500
回/ 月) サイト数・リクエス ト数が無制限
2. コードレビューが楽になる プルリクエスト作成時に 自動でビルドし、プレビュー用URL を発行してくれるので、レビュー時 にビルドして確認する必要がない
3. SPA でもSSR っぽくできる CloudflarePagesFunctions を使用することで、 SPA でも部分的にSSR することができる。 例:
meta タグの動的変更
ClouflarePagesFunctions はページのエンドポイントに Workers を実装することができるようになっている。 プロジェクトルートにfunctions ディレクトリを作成し、 その下にworkers で実行されるファイルを記載する。 3. Cloudflare
Pages Functions とは
functions 配下はそのままエンドポイントになる。 例: https://example.com/hello エンドポイント
ブログの内容に応じてogp の内容を変更したかったので、 以下のようにfunctions を配置した。 [id] のようにすると、 動的ルーティングにすることができる 実際に実装した例 ( ディレクトリ)
ブログの内容に応じてogp の内容を変更したかったので、 以下のようにfunctions を配置した。 [id] のようにすると、 動的ルーティングにすることができる 実際に実装した例 ( ディレクトリ)
実際に実装した例 ( 処理内容) index.html の中身を取得
実際に実装した例 ( 処理内容) 記事の中身を取得
実際に実装した例 ( 処理内容) 記事の中身をmeta タグに挿入
4. まとめ
CloudflarePages へデプロイすることで、 低コストでデプロイ・運用 プレビューをプルリクエスト毎に生成してくれてコー ドレビューが楽になる CloudflarePagesFunctions を使用して、部分的に SSR を実装することができる 4.
まとめ