コンテンツにスキップ

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

Cloudflare Pagesは、フロントエンド開発者が静的ウェブサイト(JAMstack)やSSRウェブサイトを共同でデプロイするためのプラットフォームです。

このガイドには以下の内容が含まれています。

始めるには、以下のものが必要です。

  • Cloudflareアカウント。まだお持ちでない場合は、無料のCloudflareアカウントを作成できます。
  • アプリのコードがGitHubまたはGitLabリポジトリにプッシュされていること。
  1. Cloudflare Pagesで新しいプロジェクトを作成します。

  2. コードをgitリポジトリ(GitHub、GitLab)にプッシュする。

  3. Cloudflareダッシュボードにログインし、アカウントホーム > Pagesで自分のアカウントを選択します。

  4. Gitに接続オプションを選択します。

  5. デプロイしたいgitプロジェクトを選択し、セットアップの開始をクリックします。

  6. 以下のビルド設定を使用します。

    • フレームワークプリセット: Astro
    • ビルドコマンド: npm run build
    • ビルド出力ディレクトリ: dist
  7. 保存してデプロイするボタンをクリックします。

  1. Wrangler CLIをインストールします。
  2. wrangler loginを使ってCloudflareアカウントでWranglerを認証します。
  3. ビルドコマンドを実行します。
  4. npx wrangler pages deploy dist を使ってデプロイします。
Terminal window
# Wrangler CLI をインストールします
npm install -g wrangler
# CLIからCloudflareアカウントにログインします
wrangler login
# ビルドコマンドを実行します
npm run build
# 新しいデプロイメントを作成します
npx wrangler pages deploy dist

アセットがアップロードされると、Wranglerはサイトを確認するためのプレビューURLを提供します。Cloudflare Pagesダッシュボードにログインすると、新しいプロジェクトが表示されます。

プレビューを機能させるには、wranglerをインストールする必要があります。

Terminal window
pnpm add wrangler --save-dev

これにより、プレビュースクリプトを更新して、Astro組み込みのプレビューコマンドの代わりにwranglerを実行できるようになりました。

package.json
"preview": "wrangler pages dev ./dist"

astrojs/cloudflareアダプターを使用して、Cloudflare PagesにデプロイするためのAstro SSRサイトを構築することができます。

以下の手順に従って、アダプタをセットアップしてください。その後、上記のいずれかの方法でデプロイできます。

以下のastro addコマンドを使用して、AstroプロジェクトにSSRを有効にするCloudflareアダプタを追加します。これにより、アダプタがインストールされ、astro.config.mjs ファイルに適切な変更が加えられます。

Terminal window
npx astro add cloudflare

アダプターを手動でインストールする場合は、以下の2つのステップを実行してください。

  1. お好みのパッケージマネージャを使用して、@astrojs/cloudflareアダプタをプロジェクトの依存関係に追加します。npmを使用しているか、よくわからない場合は、ターミナルで以下を実行します。

    Terminal window
    npm install @astrojs/cloudflare
  2. astro.config.mjsファイルに以下を追加します。

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import cloudflare from '@astrojs/cloudflare';
    export default defineConfig({
    output: 'server',
    adapter: cloudflare()
    });

現在、@astrojs/cloudflareアダプターでPages Functionsを使用する場合、2つのモードがサポートされています。

  1. アドバンスモード: このモードはdist内の_worker.jsをピックアップするadvancedモードや、プロジェクトルートにあるfunctionsフォルダからWorkerをコンパイルするディレクトリモードで関数を実行したい場合に使用します。

    モードが設定されていない場合、デフォルトは"advanced"です。

  2. ディレクトリモード: 関数をdirectoryモードで実行したい場合にこのモードを使用します。つまり、アダプタはアプリのクライアントサイド部分を同じようにコンパイルしますが、ワーカースクリプトをプロジェクトルートのfunctionsフォルダに移動します。アダプタはそのフォルダに[[path]].jsを置くだけなので、プラグインやページのミドルウェアを追加して、バージョン管理でチェックすることができます。

    astro.config.mjs
    export default defineConfig({
    adapter: cloudflare({ mode: "directory" }),
    });

Pages Functionsにより、専用のサーバーを実行することなしに、サーバーサイドのコードを実行して動的な機能を実現できます。

使い始めるには、プロジェクトのルートに/functionsディレクトリを作成します。このディレクトリにPages Functionsのファイルを作成すると、指定されたルートにカスタム機能を持ったWorkerが自動的に生成されます。Functionsの書き方については、Pages Functionsのドキュメントを参照してください。

📚 AstroでのSSRについてもっと読む。

エラーが発生する場合は、ローカルで使用しているnodeのバージョン(node -v)が環境変数で指定しているバージョンと一致しているかどうかを再確認してください。

CloudflareはNode v16.13を必要とします。このバージョンはAstroが必要とする最小値よりも新しいので、少なくともv16.13を使用していることを再確認してください。

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

その他のデプロイガイド

デプロイ種別でフィルタ