AstroサイトをCloudflareにデプロイする

フロントエンドの静的アセットやバックエンドAPI、オンデマンドレンダリングサイトを含むフルスタックアプリケーションを、Cloudflare WorkersとCloudflare Pagesの両方にデプロイできます。

このガイドの内容は次のとおりです。

Cloudflare Workersへのデプロイ方法
Cloudflare Pagesへのデプロイ方法

AstroプロジェクトでのCloudflareランタイムの使用 (EN)について詳しく読む。

前提条件

デプロイするには、以下が必要です。

Cloudflareアカウント。まだ持っていない場合は、以下の手順の中で無料のCloudflareアカウントを作成できます。

Cloudflare Workers

Wranglerによるデプロイ方法

Wrangler CLIをインストールします。
ターミナルウィンドウ
```
npm install wrangler@latest --save-dev
```
サイトでオンデマンドレンダリングを使用する場合は、@astrojs/cloudflareアダプター (EN)をインストールします。

これにより、アダプターのインストールとastro.config.mjsファイルへの適切な変更が一度に行われます。
- npm
- pnpm
- Yarn
ターミナルウィンドウ
npx astro add cloudflare
ターミナルウィンドウ
pnpm astro add cloudflare
ターミナルウィンドウ
yarn astro add cloudflare
Astroのオンデマンドレンダリングについて詳しく読む。
Wranglerの設定ファイルを作成します。

astro add cloudflareを実行すると自動的に作成されます。アダプターを使用しない場合は、自分で作成する必要があります。
- Static
- オンデマンド
wrangler.jsonc
{ "name": "my-astro-app", "compatibility_date": "YYYY-MM-DD", // デプロイする日に更新してください "assets": { "directory": "./dist", } }
wrangler.jsonc
{ "main": "dist/_worker.js/index.js", "name": "my-astro-app", "compatibility_date": "YYYY-MM-DD", // デプロイする日に更新してください "compatibility_flags": [ "nodejs_compat", "global_fetch_strictly_public" ], "assets": { "binding": "ASSETS", "directory": "./dist" }, "observability": { "enabled": true } }
Wranglerを使ってプロジェクトをローカルでプレビューします。
ターミナルウィンドウ
```
npx astro build && npx wrangler dev
```
npx wrangler deployを使ってデプロイします。
ターミナルウィンドウ
```
npx astro build && npx wrangler deploy
```

アセットがアップロードされると、Wranglerがサイトを確認するためのプレビューURLを提供します。

Cloudflareランタイム API (EN)（バインディングなど）の使用について詳しく読む。

CI/CDによるデプロイ方法

Workers Builds (BETA)などのCI/CDシステムを使用し、プッシュ時にサイトを自動的にビルド・デプロイすることもできます。

Workers Buildsを使用する場合は次の手順に従ってください。

上記のWranglerセクションのステップ1〜3に従います。
Cloudflareダッシュボードにログインし、Workers & Pagesに移動します。そしてCreateを選択します。
Import a repositoryで、Gitアカウントを選択し、Astroプロジェクトを含むリポジトリを選択します。
プロジェクトを以下の設定で構成します。
- Build command: npx astro build
- Deploy command: npx wrangler deploy
Save and Deployをクリックします。提供されたworkers.devサブドメインでWorkerをプレビューできます。

Cloudflare Pages

Wranglerによるデプロイ方法

Wrangler CLIをインストールします。
- npm
- pnpm
- Yarn
ターミナルウィンドウ
npm install wrangler@latest --save-dev
ターミナルウィンドウ
pnpm add wrangler@latest --save-dev
ターミナルウィンドウ
yarn add wrangler@latest --dev
サイトでオンデマンドレンダリングを使用する場合は、@astrojs/cloudflareアダプター (EN)をインストールします。

これにより、アダプターのインストールとastro.config.mjsファイルへの適切な変更が一度に行われます。
- npm
- pnpm
- Yarn
ターミナルウィンドウ
npx astro add cloudflare
ターミナルウィンドウ
pnpm astro add cloudflare
ターミナルウィンドウ
yarn astro add cloudflare
Wranglerの設定ファイルを作成します。

Cloudflareは新規プロジェクトにWorkersの使用を推奨しているため、astro add cloudflareコマンドはWorkers固有のwrangler.jsoncとpublic/.assetsignoreファイルを作成します。public/.assetsignoreファイルを削除し、wrangler.jsoncファイルを変更する必要があります。アダプターを使用しない場合は、自分で作成する必要があります。

wrangler.jsoncファイルが以下のような構造になっていることを確認してください。
- Static
- オンデマンド
wrangler.jsonc
{ "name": "my-astro-app", "compatibility_date": "YYYY-MM-DD", // デプロイする日に更新してください "pages_build_output_dir": "./dist" }
wrangler.jsonc
{ "name": "my-astro-app", "compatibility_date": "YYYY-MM-DD", // デプロイする日に更新してください "compatibility_flags": [ "nodejs_compat", "disable_nodejs_process_v2" ], "pages_build_output_dir": "./dist" }
Astroのオンデマンドレンダリングについて詳しく読む。
Wranglerを使ってプロジェクトをローカルでプレビューします。
- npm
- pnpm
- Yarn
ターミナルウィンドウ
npx astro build && wrangler pages dev ./dist
ターミナルウィンドウ
pnpm astro build && wrangler pages dev ./dist
ターミナルウィンドウ
yarn astro build && wrangler pages dev ./dist

npx wrangler deployを使ってデプロイします。

npx astro build && wrangler pages deploy ./dist

pnpm astro build && wrangler pages deploy ./dist

yarn astro build && wrangler pages deploy ./dist

アセットがアップロードされると、Wranglerがサイトを確認するためのプレビューURLを提供します。

CI/CDによるサイトのデプロイ方法

コードをgitリポジトリ（GitHub、GitLabなど）にプッシュします。
Cloudflareダッシュボードにログインし、Compute (Workers) > Workers & Pagesに移動します。そしてCreateを選択し、Pagesタブを選択します。このようにしてgitリポジトリを接続します。
プロジェクトを以下の設定で構成します。
- Framework preset: Astro
- Build command: npm run build
- Build output directory: dist
Save and Deployボタンをクリックします。

トラブルシューティング

404の動作

Workersプロジェクトでカスタム404ページを配信するには、not_found_handlingを設定する必要があります。詳しくはCloudflareドキュメントのルーティング動作セクションを参照してください。

{
  "assets": {
    "directory": "./dist",
    "not_found_handling": "404-page"
  }
}

Pagesプロジェクトでは、カスタム404ページを含めるとデフォルトで配信されます。含めない場合、PagesはCloudflareのシングルページアプリケーションレンダリング動作をデフォルトとし、404ページを表示する代わりにホームページへリダイレクトします。

クライアントサイドハイドレーション

CloudflareのAuto Minify設定により、クライアントサイドハイドレーションが失敗する場合があります。コンソールにHydration completed but contains mismatchesと表示される場合は、Cloudflareの設定でAuto Minifyを無効にしてください。

Node.jsランタイムAPI

Cloudflareアダプター (EN)を使ったオンデマンドレンダリングのプロジェクトをビルドする際に、[Error] Could not resolve "XXXX. The package "XXXX" wasn't found on the file system but is built into node.のようなエラーメッセージでサーバーのビルドが失敗する場合があります。

サーバーサイド環境で使用しているパッケージやインポートがCloudflareランタイムAPIと互換性がないことを意味します。
Node.jsランタイムAPIを直接インポートしている場合は、CloudflareのNode.jsの互換性 (EN)に関するAstroドキュメントを参照してください。
Node.jsランタイムAPIをインポートしているパッケージを使用している場合は、パッケージの作者にnode:*インポート構文をサポートしているか確認してください。サポートしていない場合は、代替パッケージを見つける必要があるかもしれません。