Cloudflare Workersへ移設できるかの検証

[SHR-ine]

Caution

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

課題・背景

https://kufuinc.slack.com/archives/C016ZH7ED9S/p1758508470335969

Cloudflare Workersへデプロイするために必要最低限の調整を行いました。

Cloudflare Workersについて

Cloudflare Workersはサーバレスアプリケーションを構築するためのサービスです。

従来までCloudflareでウェブサイトをホスティングする場合、Cloudflare Pagesを利用することが通常でしたが、2025年4月にCloudflare Workersでも同様の機能がサポートされ、現在はCloudflare Workersへの移行が推奨されています。

特長

• GitHub連携があり、pushやプルリクエストでプレビューURLが自動発行される
• Cloudflare Accessでの柔軟なアクセス制御ができる
• データ転送量無料のストレージサービスCloudflare R2とシームレスに連携できる

制約

• サーバレスに特化しているためNode.jsでサポートされているAPIが決まっている
• AstroのCloudflareアダプタの仕様に準拠する必要がある
• 静的アセットのファイルサイズ上限が25MBまで

やったこと

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

smarthr-design-system/package.json

Lines 43 to 50 in d3834d7

	"@astrojs/cloudflare": "^12.6.9",
	"@astrojs/mdx": "^4.3.6",
	"@astrojs/partytown": "^2.1.4",
	"@astrojs/react": "^4.3.1",
	"@types/react": "^18.3.21",
	"@types/react-dom": "^18.3.7",
	"algoliasearch": "^5.25.0",
	"astro": "^5.13.10",

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

• astro: 4.16.18 → 5.13.10
• @astrojs/mdx: 3.1.9 → 4.3.6
• @astrojs/react: 3.6.3 → 4.3.1

smarthr-design-system/astro.config.mjs

Line 15 in d3834d7

adapter: cloudflare(),

Astro 5.xへの対応

参考: Upgrade to Astro v5

smarthr-design-system/tsconfig.json

Line 11 in d3834d7

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

smarthr-design-system/astro.config.mjs

Line 14 in d3834d7

output: 'static',

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

Line 1 in d3834d7

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

Cloudflare Workersへの対応

smarthr-design-system/astro.config.mjs

Lines 50 to 72 in d3834d7

	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のバンドルから除外指定します。

smarthr-design-system/package.json

Line 99 in d3834d7

"wrangler": "^4.38.0"

smarthr-design-system/wrangler.jsonc

Lines 5 to 14 in d3834d7

	{
	"name": "smarthr-design-system",
	"main": "./dist/_worker.js/index.js",
	"compatibility_date": "2025-09-15",
	"compatibility_flags": ["nodejs_compat"],
	"assets": {
	"binding": "ASSETS",
	"directory": "./dist"
	}
	}

デプロイするためのWranglerのインストールと設定ファイルを用意します。

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

smarthr-design-system/public/.assetsignore

Lines 3 to 11 in d3834d7

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

25MBの上限があるため、一部の静的アセットを一旦デプロイ対象から除外しています。
別のストレージサービスに設置するなど対処が必要になります。

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

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

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

[netlify]

✅ Deploy Preview for smarthr-design-system ready!

Name	Link
🔨 Latest commit	b685ddf
🔍 Latest deploy log	https://app.netlify.com/projects/smarthr-design-system/deploys/690049ecbeed8c000824b372
😎 Deploy Preview	https://deploy-preview-1732--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 with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
✅ Deployment successful! View logs	smarthr-design-system	b685ddf	Oct 28 2025, 04:46 AM