コンテンツにスキップ

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 を使ってデプロイします。
ターミナルウィンドウ
# Wrangler CLI をインストールします
npm install -g wrangler
# CLIからCloudflareアカウントにログインします
wrangler login
# ビルドコマンドを実行します
npm run build
# 新しいデプロイメントを作成します
npx wrangler pages deploy dist

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

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

ターミナルウィンドウ
pnpm add wrangler --save-dev

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

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

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

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

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

ターミナルウィンドウ
npx astro add cloudflare

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

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

    ターミナルウィンドウ
    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を無効にしてください。

オンデマンドレンダリングするプロジェクトをCloudflareのSSRアダプター (EN)を使用してビルドする際、[Error] Could not resolve "XXXX. The package "XXXX" wasn't found on the file system but is built into node.のようなエラーメッセージとともにサーバーがビルドに失敗する場合は、以下に注意してください。

  • これは、サーバーサイド環境で使用しているパッケージまたはインポートが、Cloudflare Workers runtime APIsと互換性がないことを意味します。

  • Node.jsのランタイムAPIを直接インポートしている場合は、CloudflareのNode.jsとの互換性 (EN)に関するAstroのドキュメントを参照して、これを解決するための手順を確認してください。

  • Node.jsのランタイムAPIをインポートするパッケージをインポートしている場合は、node:*インポート構文をサポートしているかどうかをパッケージの作者に確認してください。サポートしていない場合は、代わりのパッケージを見つけるか、別のアダプタを使用する必要があります。

その他のデプロイガイド

貢献する

どんなことを?

GitHub Issueを作成

チームに素早く問題を報告できます。

コミュニティ