コンテンツにスキップ

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

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

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

:::note

Cloudflareは新規プロジェクトにはCloudflare Workersの使用を推奨しています。既存のPagesプロジェクトについては、Cloudflareの移行ガイドと互換性の一覧表を参照してください。

:::

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

前提条件

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

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

Cloudflare Workers

Wranglerによるデプロイ方法

  1. Wrangler CLIをインストールします。

    npm install wrangler@latest --save-dev

  2. サイトでオンデマンドレンダリングを使用する場合は、@astrojs/cloudflareアダプター (EN)をインストールします。

    これにより、アダプターのインストールとastro.config.mjsファイルへの適切な変更が一度に行われます。

    npx astro add cloudflare

    Astroのオンデマンドレンダリングについて詳しく読む。

  3. Wranglerの設定ファイルを作成します。

    astro add cloudflareを実行すると自動的に作成されます。アダプターを使用しない場合は、自分で作成する必要があります。

      {
    "name": "my-astro-app",
    "compatibility_date": "YYYY-MM-DD", // デプロイする日に更新してください
    "assets": {
      "directory": "./dist",
    }
  }

  4. Wranglerを使ってプロジェクトをローカルでプレビューします。

    npx astro build && npx wrangler dev

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

    npx astro build && npx wrangler deploy

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

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

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

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

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

  1. 上記のWranglerセクションのステップ1〜3に従います。

  2. Cloudflareダッシュボードにログインし、Workers & Pagesに移動します。そしてCreateを選択します。

  3. Import a repositoryで、Gitアカウントを選択し、Astroプロジェクトを含むリポジトリを選択します。

  4. プロジェクトを以下の設定で構成します。

    • Build command: npx astro build
    • Deploy command: npx wrangler deploy

  5. Save and Deployをクリックします。提供されたworkers.devサブドメインでWorkerをプレビューできます。

Cloudflare Pages

Wranglerによるデプロイ方法

  1. Wrangler CLIをインストールします。

      npm install wrangler@latest --save-dev

  2. サイトでオンデマンドレンダリングを使用する場合は、@astrojs/cloudflareアダプター (EN)をインストールします。

    これにより、アダプターのインストールとastro.config.mjsファイルへの適切な変更が一度に行われます。

      npx astro add cloudflare

  3. Wranglerの設定ファイルを作成します。

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

    wrangler.jsoncファイルが以下のような構造になっていることを確認してください。

    {
  "name": "my-astro-app",
  "compatibility_date": "YYYY-MM-DD", // デプロイする日に更新してください
  "pages_build_output_dir": "./dist"
}

    Astroのオンデマンドレンダリングについて詳しく読む。

  4. Wranglerを使ってプロジェクトをローカルでプレビューします。

      npx astro build && wrangler pages dev ./dist

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

      npx astro build && wrangler pages deploy ./dist

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

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

  1. コードをgitリポジトリ（GitHub、GitLabなど）にプッシュします。

  2. Cloudflareダッシュボードにログインし、Compute (Workers) > Workers & Pagesに移動します。そしてCreateを選択し、Pagesタブを選択します。このようにしてgitリポジトリを接続します。

  3. プロジェクトを以下の設定で構成します。

    • Framework preset: Astro
    • Build command: npm run build
    • Build output directory: dist

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

その他のデプロイガイド

貢献する コミュニティ スポンサー