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

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

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などのCI/CDシステムを使用し、プッシュ時にサイトを自動的にビルド・デプロイすることもできます。

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

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

トラブルシューティング

404の動作

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

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

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

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:*インポート構文をサポートしているか確認してください。サポートしていない場合は、代替パッケージを見つける必要があるかもしれません。