Cloudflare Pagesへの移設

[SHR-ine]

Caution

検証中のためマージはしないでください。

課題・背景

• Cloudflare Workersへ移設できるかの検証 #1732 のCloudflare Pages版

やったこと

@astrojs/cloudflare のインストールと有効化

smarthr-design-system/package.json

Lines 43 to 50 in cdb1731

	"@astrojs/cloudflare": "^12.6.10",
	"@astrojs/mdx": "^4.3.10",
	"@astrojs/partytown": "^2.1.4",
	"@astrojs/react": "^4.4.2",
	"@types/react": "^18.3.21",
	"@types/react-dom": "^18.3.7",
	"algoliasearch": "^5.25.0",
	"astro": "^5.15.5",

@astrojs/cloudflare の最新バージョンに対応するため、Astro本体と一部ライブラリもアップデートしています。

• astro: 4.16.18 → 5.15.5
• @astrojs/mdx: 3.1.9 → 4.3.10
• @astrojs/react: 3.6.3 → 4.4.2

smarthr-design-system/astro.config.mjs

Line 15 in cdb1731

adapter: cloudflare(),

Astro 5.xへの対応

参考: Upgrade to Astro v5

smarthr-design-system/tsconfig.json

Line 11 in 8444393

"include": [".astro/types.d.ts", "src"],

smarthr-design-system/astro.config.mjs

Line 14 in cdb1731

output: 'static',

smarthr-design-system/src/lib/getNestedHeadings.ts

Line 1 in cdb1731

import mdxRenderer from '@astrojs/mdx/server.js';

Cloudflare Pagesへの対応

smarthr-design-system/astro.config.mjs

Lines 50 to 72 in cdb1731

	ssr: {
	external: [
	'child_process',
	'crypto',
	'fs',
	'fs/promises',
	'http',
	'https',
	'node:buffer',
	'node:crypto',
	'node:fs',
	'node:http2',
	'node:module',
	'node:path',
	'node:process',
	'node:url',
	'os',
	'path',
	'tty',
	'url',
	'worker_threads',
	],
	},

Node.jsの互換性のためのViteのバンドルから除外指定します。
Workersと異なりWranglerの設定は不要です。

ファイルサイズ上限への対処

25MBの上限がありWorkersのように除外設定ができないため、以下の静的アセットを削除しています。
デプロイ時間にも影響するため、別途ストレージサービスに設置するなどの運用が良いかもしれません。

public/SmartHR_JingleMovie_1920×1080_24fps.zip
public/SmartHR_JingleMovie_1920×1080_30fps.zip
public/SmartHR_JingleMovie_1920×1080_60fps.zip
public/SmartHR_JingleMovie_3840x2160_60fps.zip
public/SmartHR_JingleMovie_3840×2160_24fps.zip
public/SmartHR_JingleMovie_3840×2160_30fps.zip
public/SmartHR_MotionLogo_1920x1080.zip
public/SmartHR_MotionLogo_1920x1080_30fps.zip
public/SmartHR_MotionLogo_3840x2160.zip

重複しているリダイレクト設定を削除

/marketing/movie/motion_logo /communication/photography/movie-jingle
/marketing/resource/product-capture /communication/capture/service-capture-in-mock

ビルドエラーになるため上記2箇所を削除、実際に有効になっている方を残しています。

検証中のため暫定的なのもの（11/13時点）

• Cloudflare Pagesでは feat/cloudflare-pages のみ自動デプロイが有効です
• Cloudflare Pagesでは環境変数を設定していません
• Cloudflare Pagesのビルドコマンドは npm run build を使用しています
• Algoliaやscripts配下のスクリプトは未検証です

[netlify]

✅ Deploy Preview for smarthr-design-system ready!

Name	Link
🔨 Latest commit	8444393
🔍 Latest deploy log	https://app.netlify.com/projects/smarthr-design-system/deploys/691583cdd1c40500099e4454
😎 Deploy Preview	https://deploy-preview-1754--smarthr-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[cloudflare-workers-and-pages]

Deploying smarthr-design-system-pages with    Cloudflare Pages

Latest commit:	8444393
Status:	✅  Deploy successful!
Preview URL:	https://faa3cad3.smarthr-design-system-pages.pages.dev

View logs