Cloudflare Pages & Functionsで Astroサイトを運用している話

7.8K Views

July 26, 23

スライド概要

イベントページ: https://cfm-cts.connpass.com/event/286362/

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

Cloudflare Pages & Functionsで Astroサイトを運用している話 Cloudflare Meet-up Online Vol.1

2.

今日伝えたいこと • Pagesは、ポータルサイトやポートフォリオサイトで輝く • エッジで表示したい情報を収集・キャッシュしよう • 「コンテンツを加工処理するCMS」が今後出てくるかも

3.

Agenda • ポートフォリオサイトをPageにマイグレした話 • AstroをPagesでSSRする際の注意点 • 今後について

4.

HELLO! ✋ 岡本 秀高 (Hide) • Stripe Developer Advocate • WordCamp Kyoto 2017 • @hidetaka_dev • https://hidetaka.dev

5.

Agenda • ポートフォリオサイトをPageにマイグレした話 • AstroをPagesでSSRする際の注意点 • 今後について

6.

hidetaka.dev

7.

これまでのhidetaka.dev • Next.jsでSSGしたページをNetlifyに公開 • GitHub ActionsでビルドWebhookをスケジュール呼び出し • Tailwind UIのHTMLをほぼそのまま組み合わせただけのUI

8.

困っていたこと • 混沌としたgetStaticProps(データソースが 10URL 以上) • データソースがこれ以上増えたら、メンテしきれない • GitHub Actionsをビルド目的で使うのは本来NG • スケジュールビルドだけに使うと、60日程度で止まる • Next.jsより手軽に使えるFWもそろそろ身につけたい

9.

Cloudflare Pagesに決めた理由 • 新しい技術・サービスを試したくなった • 今の所無料で使えそう • 日本コミュニティ(Discord・Connpass)の存在

10.

移行してみての感想 • 「軽いサイト」だと、体感速度はそこまで変わらないかも • 本領を発揮するのはSSRやKV・D1などと組みわせてから? • CLIやGH Actionsなどのツールが多く、開発とCDは楽 • 困った時の亀田さんとゆーすけさんがとても頼もしい

11.

Agenda • ポートフォリオサイトをPageにマイグレした話 • AstroをPagesでSSRする際の注意点 • 今後について

12.

SSGしたサイトのデプロイは、 NetlifyやVercelと変わらない (ので割愛)

13.

フレームワーク(Astro / Vite)の仕様と Cloudflare(Pages & Functions)の仕様、 どちらが原因かを見極めよう

14.

Case 1: Cloudflare側の仕様により、 対応が必要だった例

15.

http / fsなどは 2023/06/19時点で まだ利用できない

16.

ケース1: Markdown / Markdoc • 一部ページに、Markdoc(Markdown)を利用したコンテンツ • SSGでは問題なく動作 • SSRにすると、fsでエラーが発生 • microCMSにコンテンツを移動させて対応

17.

ケース2: RSS Feed Loader • ZennなどからRSSフィードを読み込む処理 • ライブラリによってhttpが内部で使われている • fast-xml-parserとnode-fetchにリプレイス • レスポンス内容が変わるので、ギリギリに気づくと焦る

18.

Case 2: 実はFrameworkの仕様も 関係があったケース

19.

Astro(SSR)では、envをgetRuntimeで取得 fl https://developers.cloud are.com/pages/framework-guides/deploy-an-astro-site/

20.

astro buildで、 APIキーがundefinedに

21.

const runtime = getRuntime(request) if (runtime && runtime.env) { const cfRuntimeAPIKEY = (runtime.env as any).API_KEY as string if (cfRuntimeAPIKEY) { return createClient({ serviceDomain: 'hidetaka', apiKey: cfRuntimeAPIKEY, }) } } const envAPIKEY = import.meta.env.API_KEY if (envAPIKEY) { return createClient({ serviceDomain: 'hidetaka', apiKey: import.meta.env.API_KEY as string, }) } ビルド時用に、 Viteでの環境変数の 取得処理も追加する ワークアラウンド

22.

結論

23.

フレームワーク(Astro / Vite)の仕様と Cloudflare(Pages & Functions)の仕様、 どちらが原因かを見極めよう

24.

みなさま本当にありがとうございます! fl https://developers.cloud are.com/pages/framework-guides/deploy-an-astro-site/

25.

Agenda • ポートフォリオサイトをPageにマイグレした話 • AstroをPagesでSSRする際の注意点 • 今後について

26.

今後について • KVを活用したい(擬似的なSWRの実現) • AstroのHybrid Renderingを使いたい(SSRを最小限に) • ログ・エラーをSlack通知させたい

27.

Cloudflare with Astro / Next.js いろいろ試すので、 Cloudflareいろいろ教えてください🙇