import ReadMore from '~/components/ReadMore.astro'

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

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

前提条件

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

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

Gitを使ったサイトのデプロイ方法

  1. Cloudflare Pagesで新しいプロジェクトを作成します。

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

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

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

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

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

    • フレームワークプリセット： Astro
    • ビルドコマンド： npm run build
    • ビルド出力ディレクトリ： dist

  7. 保存してデプロイするボタンをクリックします。

Wranglerを使ったサイトのデプロイ方法

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

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

Wranglerでローカルにプレビューを有効にする

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

bash
pnpm add wrangler --save-dev

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

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

SSRサイトのデプロイ方法

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

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

クイックインストール

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

bash
npx astro add cloudflare

手動インストール

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

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

    bash
    npm install @astrojs/cloudflare

  2. astro.config.mjsファイルに以下を追加します。

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

2つのモード

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

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

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

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

    ts
    export default defineConfig({  adapter: cloudflare({ mode: "directory" }),});

Pages Functionsの使用

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アダプターを使用してビルドする際、[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との互換性に関するAstroのドキュメントを参照して、これを解決するための手順を確認してください。

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

Astro コース