個人のポートフォリオサイトを NetlifyからPagesに移した話
4.6K Views
June 19, 23
スライド概要
Developer
関連スライド
各ページのテキスト
個人のポートフォリオサイトを NetlifyからPagesに移した話 Cloudflare Meet-up Osaka Vol.1
今日伝えたいこと • Pagesは、ポータルサイトやポートフォリオサイトで輝く • エッジで表示したい情報を収集・キャッシュしよう • 「コンテンツを加工処理するCMS」が今後出てくるかも
Agenda • ポートフォリオサイトをPageにマイグレした話 • AstroをPagesでSSRする際の注意点 • エッジに触れて感じた、CMSの行き先
HELLO! ✋ 岡本 秀高 (Hide) • Stripe Developer Advocate • WordCamp Kyoto 2017 • @hidetaka_dev • https://hidetaka.dev
Agenda • ポートフォリオサイトをPageにマイグレした話 • AstroをPagesでSSRする際の注意点 • エッジに触れて感じた、CMSの行き先
hidetaka.dev
仕事・趣味で書いた記事 公開したOSS 書籍やイベント情報 Etc…
これまでのhidetaka.dev • Next.jsでSSGしたページをNetlifyに公開 • GitHub ActionsでビルドWebhookをスケジュール呼び出し • Tailwind UIのHTMLをほぼそのまま組み合わせただけのU
hidetaka.devのデータソース • microCMS: 登壇情報や書籍執筆履歴など • WordPress: 個人ブログ • Qiita / Zenn / dev.to: 仕事での技術ブログやワークショップ資料 • npm / WordPress.org API: 公開したOSS情報 • Markdown (Markdoc): 日英でのスピーカープロファイル • etc…
困っていたこと • 混沌としたgetStaticProps • データソースがこれ以上増えたら、メンテしきれない • GitHub Actionsをビルド目的で使うのは本来NG • スケジュールビルドだけに使うと、60日程度で止まる • （Next.js以外のフレームワークもそろそろ試したくなった）
Cloudflare Pagesに決めた理由 • 新しい技術・サービスを試したくなった • 今の所無料で使えそう • 日本コミュニティ（Discord・Connpass）の存在
移行してみての感想 • 「軽いサイト」だと、体感速度はそこまで変わらないかも • 本領を発揮するのはSSRやKV・D1などと組みわせてから？ • CLIやGH Actionsなどのツールが多く、開発とCDは楽 • 困った時の亀田さんとゆーすけさんがとても頼もしい
Agenda • ポートフォリオサイトをPageにマイグレした話 • AstroをPagesでSSRする際の注意点 • エッジに触れて感じた、CMSの行き先
SSGしたサイトのデプロイは、 NetlifyやVercelと変わらない （ので割愛）
フレームワーク（Astro / Vite）の仕様と Cloudflare（Pages & Functions）の仕様、 どちらが原因かを見極めよう
移行で特にハマったポイント３選 • 定期ビルドでのコンテンツ更新は諦めろ • PagesでSSRするなら、fsとhttpに気をつけろ • AstroはSSRとSSGで、「環境変数の読み方」が変わるらしい
移行で特にハマったポイント３選 • 定期ビルドでのコンテンツ更新は諦めろ • PagesでSSRするなら、fsとhttpに気をつけろ • AstroはSSRとSSGで、「環境変数の読み方」が変わるらしい
定期ビルドでのコンテンツ更新は諦めろ • Cloud are Pagesにも「ビルドの定期実行」はない • 大人しくSSRで更新しよう • microCMSなどのWebhookから、 「デプロイフック」でビルドする形で検討しなおそう fl • Workersのスケジュール実行からデプロイフックを叩けばできるかも？
名前とブランチを指定して、URL取得
移行で特にハマったポイント３選 • 定期ビルドでのコンテンツ更新は諦めろ • PagesでSSRするなら、fsとhttpに気をつけろ • AstroはSSRとSSGで、「環境変数の読み方」が変わるらしい
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にリプレイス • レスポンス内容が変わるので、ギリギリに気づくと焦る
ギリギリで慌てないために • wrangler / workerdでローカルテスト • 他の人の事例を調べて、代替ライブラリを模索 • 不安になったら、そのライブラリだけ試すPages PJを作ろう
移行で特にハマったポイント３選 • 定期ビルドでのコンテンツ更新は諦めろ • PagesでSSRするなら、fsとhttpに気をつけろ • AstroはSSRとSSGで、「環境変数の読み方」が変わるらしい
Astro(SSR)では、envをgetRuntimeで取得 fl https://developers.cloud are.com/pages/framework-guides/deploy-an-astro-site/
ビルド時、 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での環境変数の 取得処理も追加して対応
わかったこと • SSR時とビルド時で環境（ランタイムなど）が違う • ビルド時に環境変数を入れる場合、.envファイルを利用 • .envファイルを配置するために、GitHub Actionsでビルド
結論
フレームワーク（Astro / Vite）の仕様と Cloudflare（Pages & Functions）の仕様、 どちらが原因かを見極めよう
みなさま本当にありがとうございます！ fl https://developers.cloud are.com/pages/framework-guides/deploy-an-astro-site/
Agenda • ポートフォリオサイトをPageにマイグレした話 • AstroをPagesでSSRする際の注意点 • エッジに触れて感じた、CMSの行き先
CMSは、 コンテンツの「何」を管理するのか？ • 従来型：「入稿・保存・出力・表示」すべて一元管理 • Headless：「表示」を手放し、収集と処理をより柔軟に • 「収集と処理」は、誰がどう管理する？
Algolia / OpenAIなど 「データの加工・処理」を 受け持つFaaSの増加
コンテンツは「加工処理」されて ユーザーに届けられるようになる • 人によって異なるお勧め商品・オファー • チャネルや媒体によって異なるLP・メッセージ・CTA • 会話の流れによって変わるコンテンツ
「誰に」 「なにを」 「どう伝えるか」を管理するシステム
Digital Experience Platform (DXP) 「デジタルでの体験」を 管理するシステム
altis - WordPressを使ったDXP
エッジフロントエンドで、 Composable Contentと DXPの話をしよう https://dxpwtf.substack.com/p/composable-content-platforms-2023