ビルド構成

Cloudflare Pagesに、サイトのビルド方法と出力ファイルの場所を指定できます。

ビルドコマンドとディレクトリ

アプリケーションをビルドする方法をCloudflare Pagesに伝えるために、ビルドコマンドを提供する必要があります。ここにリストされていないプロジェクトについては、ツールのドキュメントやフレームワークを参照し、ここに追加するためのプルリクエストを提出してください。

ビルドディレクトリは、プロジェクトのビルドコマンドがCloudflare Pagesサイトのビルド版を出力する場所を示します。通常、これは業界標準のpublicにデフォルト設定されていますが、カスタマイズが必要な場合もあります。

ビルド構成の理解

ビルドコマンドは、フレームワークによって提供されます。たとえば、Gatsbyフレームワークはgatsby buildをビルドコマンドとして使用します。フレームワークを使用していない場合は、ビルドコマンドフィールドを空白のままにしてください。Pagesは、ユーザーが提供したビルドコマンドから返された終了コードを読み取ることで、ビルドが成功したか失敗したかを判断します。非ゼロの戻りコードはビルドを失敗としてマークします。終了コードが0の場合、Pagesビルドは成功としてマークされ、エラーログが標準エラーに書き込まれていてもアセットはアップロードされます。

ビルドディレクトリは、ビルドコマンドから生成されます。各フレームワークには独自の命名規則があり、多くのフレームワークではビルド出力ディレクトリが/publicと名付けられています。

ルートディレクトリは、サイトのコンテンツが存在する場所です。指定されていない場合、Cloudflareはリンクされたgitリポジトリがルートディレクトリであると仮定します。モノレポのように、1つのリポジトリに複数のプロジェクトがある場合など、ルートディレクトリを指定する必要があります。

フレームワークプリセット

Cloudflareは、人気のあるフレームワークやツールのビルド構成のリストを維持しています。これらはプロジェクト作成時にアクセス可能です。以下は、人気のあるフレームワークやツールの標準ビルドコマンドとディレクトリの一部です。

プリセットを使用していない場合は、ビルドコマンドとしてexit 0を使用してください。

Framework/tool	Build command	Build directory
Create React App	npm run build	build
Gatsby	npx gatsby build	public
Next.js	npx @cloudflare/next-on-pages@1	.vercel/output/static
Next.js (Static HTML Export)	npx next build	out
Nuxt.js	npm run build	dist
Qwik	npm run build	dist
Remix	npm run build	build/client
Svelte	npm run build	public
SvelteKit	npm run build	.svelte-kit/cloudflare
Vue	npm run build	dist
Analog	npm run build	dist/analog/public
Astro	npm run build	dist
Angular	npm run build	dist/cloudflare
Brunch	npx brunch build --production	public
Docusaurus	npm run build	build
Elder.js	npm run build	public
Eleventy	npx @11ty/eleventy	_site
Ember.js	npx ember-cli build	dist
GitBook	npx gitbook-cli build	_book
Gridsome	npx gridsome build	dist
Hugo	hugo	public
Jekyll	jekyll build	_site
MkDocs	mkdocs build	site
Pelican	pelican content	output
React Static	react-static build	dist
Slate	./deploy.sh	build
Umi	npx umi build	dist
VitePress	npx vitepress build	.vitepress/dist
Zola	zola build	public

環境変数

プロジェクトがサイトをビルドするために環境変数を使用する場合、カスタム環境変数を提供してください：

1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
2. アカウントホームで、Workers & Pagesを選択します。
3. 概要で、Pagesプロジェクトを選択します。
4. 設定 > 環境変数を選択します。

以下のシステム環境変数はデフォルトで注入されます（ただし、上書き可能です）：

環境変数	注入された値	使用例
CF_PAGES	1	Pages上で実行される場合とローカルで実行される場合のビルド動作を変更するためのもの
CF_PAGES_COMMIT_SHA	<sha1-hash-of-current-commit>	現在のコミットIDをエラーレポートに渡すためのもの、例えばSentryなど
CF_PAGES_BRANCH	<branch-name-of-current-deployment>	ブランチに基づいてビルドをカスタマイズするためのもの、例えばproductionでデバッグログを無効にするなど
CF_PAGES_URL	<url-of-current-deployment>	ビルドツールがページがデプロイされるURLを知るためのもの

言語サポートとツール

言語サポートとツールに移動しました。