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

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

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

Cloudflare Pagesダッシュボードからデプロイする方法
CloudflareのCLIであるWranglerを使ったデプロイ方法
SSRサイトを@astrojs/cloudflareを使ってデプロイする方法

前提条件

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

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

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

Cloudflare Pagesで新しいプロジェクトを作成します。
コードをgitリポジトリ（GitHub、GitLab）にプッシュする。
Cloudflareダッシュボードにログインし、アカウントホーム > Pagesで自分のアカウントを選択します。
Gitに接続オプションを選択します。
デプロイしたいgitプロジェクトを選択し、セットアップの開始をクリックします。
以下のビルド設定を使用します。
- フレームワークプリセット： Astro
- ビルドコマンド： npm run build
- ビルド出力ディレクトリ： dist
保存してデプロイするボタンをクリックします。

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

Wrangler CLIをインストールします。
wrangler loginを使ってCloudflareアカウントでWranglerを認証します。
ビルドコマンドを実行します。
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でローカルにプレビューを有効にする

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

pnpm add wrangler --save-dev

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

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

SSRサイトのデプロイ方法

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

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

クイックインストール

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

npx astro add cloudflare

手動インストール

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

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

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

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server',
  adapter: cloudflare()
});

2つのモード

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

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

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