個人のポートフォリオサイトを NetlifyからPagesに移した話

3.9K Views

June 19, 23

スライド概要

シェア

またはPlayer版

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

関連スライド

各ページのテキスト
1.

個人のポートフォリオサイトを NetlifyからPagesに移した話 Cloudflare Meet-up Osaka Vol.1

2.

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

3.

Agenda • ポートフォリオサイトをPageにマイグレした話 • AstroをPagesでSSRする際の注意点 • エッジに触れて感じた、CMSの行き先

4.

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

5.

Agenda • ポートフォリオサイトをPageにマイグレした話 • AstroをPagesでSSRする際の注意点 • エッジに触れて感じた、CMSの行き先

6.

hidetaka.dev

7.

仕事・趣味で書いた記事 公開したOSS 書籍やイベント情報 Etc…

8.

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

9.

hidetaka.devのデータソース • microCMS: 登壇情報や書籍執筆履歴など • WordPress: 個人ブログ • Qiita / Zenn / dev.to: 仕事での技術ブログやワークショップ資料 • npm / WordPress.org API: 公開したOSS情報 • Markdown (Markdoc): 日英でのスピーカープロファイル • etc…

10.

困っていたこと • 混沌としたgetStaticProps • データソースがこれ以上増えたら、メンテしきれない • GitHub Actionsをビルド目的で使うのは本来NG • スケジュールビルドだけに使うと、60日程度で止まる • (Next.js以外のフレームワークもそろそろ試したくなった)

11.

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

12.

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

13.

Agenda • ポートフォリオサイトをPageにマイグレした話 • AstroをPagesでSSRする際の注意点 • エッジに触れて感じた、CMSの行き先

14.

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

15.

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

16.

移行で特にハマったポイント3選 • 定期ビルドでのコンテンツ更新は諦めろ • PagesでSSRするなら、fsとhttpに気をつけろ • AstroはSSRとSSGで、「環境変数の読み方」が変わるらしい

17.

移行で特にハマったポイント3選 • 定期ビルドでのコンテンツ更新は諦めろ • PagesでSSRするなら、fsとhttpに気をつけろ • AstroはSSRとSSGで、「環境変数の読み方」が変わるらしい

18.

定期ビルドでのコンテンツ更新は諦めろ • Cloud are Pagesにも「ビルドの定期実行」はない • 大人しくSSRで更新しよう • microCMSなどのWebhookから、 「デプロイフック」でビルドする形で検討しなおそう fl • Workersのスケジュール実行からデプロイフックを叩けばできるかも?

19.

名前とブランチを指定して、URL取得

20.

移行で特にハマったポイント3選 • 定期ビルドでのコンテンツ更新は諦めろ • PagesでSSRするなら、fsとhttpに気をつけろ • AstroはSSRとSSGで、「環境変数の読み方」が変わるらしい

21.

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

22.

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

23.

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

24.

ギリギリで慌てないために • wrangler / workerdでローカルテスト • 他の人の事例を調べて、代替ライブラリを模索 • 不安になったら、そのライブラリだけ試すPages PJを作ろう

25.

移行で特にハマったポイント3選 • 定期ビルドでのコンテンツ更新は諦めろ • PagesでSSRするなら、fsとhttpに気をつけろ • AstroはSSRとSSGで、「環境変数の読み方」が変わるらしい

26.

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

27.

ビルド時、 APIキーがundefinedに

28.

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での環境変数の 取得処理も追加して対応

29.

わかったこと • SSR時とビルド時で環境(ランタイムなど)が違う • ビルド時に環境変数を入れる場合、.envファイルを利用 • .envファイルを配置するために、GitHub Actionsでビルド

30.

結論

31.

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

32.

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

33.

Agenda • ポートフォリオサイトをPageにマイグレした話 • AstroをPagesでSSRする際の注意点 • エッジに触れて感じた、CMSの行き先

34.

CMSは、 コンテンツの「何」を管理するのか? • 従来型:「入稿・保存・出力・表示」すべて一元管理 • Headless:「表示」を手放し、収集と処理をより柔軟に • 「収集と処理」は、誰がどう管理する?

35.

Algolia / OpenAIなど 「データの加工・処理」を 受け持つFaaSの増加

36.

コンテンツは「加工処理」されて ユーザーに届けられるようになる • 人によって異なるお勧め商品・オファー • チャネルや媒体によって異なるLP・メッセージ・CTA • 会話の流れによって変わるコンテンツ

37.

「誰に」 「なにを」 「どう伝えるか」を管理するシステム

38.

Digital Experience Platform (DXP) 「デジタルでの体験」を 管理するシステム

39.

altis - WordPressを使ったDXP

40.

エッジフロントエンドで、 Composable Contentと DXPの話をしよう https://dxpwtf.substack.com/p/composable-content-platforms-2023