ビルド設定

Cloudflare Pages に、サイトのビルド方法と出力ファイルの場所を伝えられます。

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

アプリケーションのビルド方法を Cloudflare Pages に伝えるために、ビルドコマンドを指定します。ここに載っていないプロジェクトでは、ツールやフレームワークのドキュメントを確認し、ここに追加するプルリクエストを送ることを検討してください。

ビルドディレクトリは、プロジェクトのビルドコマンドが Cloudflare Pages サイトのビルド済みバージョンを出力する場所を示します。多くの場合、業界標準の public がデフォルトですが、カスタマイズが必要になることがあります。

ビルド設定を理解する

ビルドコマンドはフレームワークが提供します。たとえば Gatsby フレームワークはビルドコマンドとして gatsby build を使います。フレームワークなしで作業する場合は、Build command フィールドを空のままにします。Pages は、ユーザーが指定したビルドコマンドから返された終了コードを読んで、ビルドの成功または失敗を判断します。0 以外の戻りコードはビルド失敗としてマークされます。終了コード 0 は Pages ビルドを成功としてマークし、標準エラーにエラーログが書かれていてもアセットはアップロードされます。

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

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

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

Cloudflare は、人気のフレームワークとツール向けのビルド設定一覧を維持しています。これらはプロジェクト作成時に利用できます。以下は、人気のフレームワークとツール向けの標準的なビルドコマンドとディレクトリです。

プリセットを使わない場合は、Build command に exit 0 を使います。

フレームワーク / ツール	ビルドコマンド	ビルドディレクトリ
React (Vite)	`npm run build`	`dist`
Gatsby	`npx gatsby build`	`public`
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`

環境変数

サイトのビルドに環境変数を使う場合は、カスタム環境変数を提供できます。

Cloudflare dashboard で Workers & Pages ページを開きます。
Workers & Pages を開く ↗
Pages プロジェクトを選びます。
Settings > Environment variables を選びます。

次のシステム環境変数はデフォルトで注入されます（上書きできます）。

Environment Variable	Injected value	Example use-case
`CI`	`true`	CI 上とローカルでビルド動作を変える
`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 を知らせる