9.6K Views
July 26, 23
スライド概要
イベントページ: https://cfm-cts.connpass.com/event/286362/
Developer
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
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/
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/
Agenda • ポートフォリオサイトをPageにマイグレした話 • AstroをPagesでSSRする際の注意点 • 今後について
今後について • KVを活用したい(擬似的なSWRの実現) • AstroのHybrid Renderingを使いたい(SSRを最小限に) • ログ・エラーをSlack通知させたい
Cloudflare with Astro / Next.js いろいろ試すので、 Cloudflareいろいろ教えてください🙇