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

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

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

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

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

• https://hidetaka.dev

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

hidetaka.dev

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

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

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

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

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

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

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

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

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

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

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

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

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

• https://developers.cloudflare.com/pages/framework-guides/deploy-an-astro-site/

astro buildで、 APIキーがundefinedに

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での環境変数の 取得処理も追加する ワークアラウンド

結論

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

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

• https://developers.cloudflare.com/pages/framework-guides/deploy-an-astro-site/

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

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

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