| title | description | type | i18nReady |
|---|---|---|---|
AstroサイトをCloudflare Pagesにデプロイする |
Cloudflare Pagesを使用してAstroサイトをデプロイする方法。 |
deploy |
true |
import ReadMore from '~/components/ReadMore.astro'; import { Steps } from '@astrojs/starlight/components';
Cloudflare Pagesは、フロントエンド開発者が静的ウェブサイト(JAMstack)やSSRウェブサイトを共同でデプロイするためのプラットフォームです。
このガイドには以下の内容が含まれています。
- Cloudflare Pagesダッシュボードからデプロイする方法
- CloudflareのCLIであるWranglerを使ったデプロイ方法
- SSRサイトを
@astrojs/cloudflareを使ってデプロイする方法
始めるには、以下のものが必要です。
1. Cloudflare Pagesで新しいプロジェクトを作成します。-
コードをgitリポジトリ（GitHub、GitLab）にプッシュする。
-
Cloudflareダッシュボードにログインし、アカウントホーム > Pagesで自分のアカウントを選択します。
-
Gitに接続オプションを選択します。
-
デプロイしたいgitプロジェクトを選択し、セットアップの開始をクリックします。
-
以下のビルド設定を使用します。
- フレームワークプリセット：
Astro - ビルドコマンド：
npm run build - ビルド出力ディレクトリ：
dist
- フレームワークプリセット：
-
保存してデプロイするボタンをクリックします。
-
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をインストールする必要があります。
pnpm add wrangler --save-devこれにより、プレビュースクリプトを更新して、Astro組み込みのプレビューコマンドの代わりにwranglerを実行できるようになりました。
"preview": "wrangler pages dev ./dist"astrojs/cloudflareアダプターを使用して、Cloudflare PagesにデプロイするためのAstro SSRサイトを構築することができます。
以下の手順に従って、アダプタをセットアップしてください。その後、上記のいずれかの方法でデプロイできます。
以下のastro addコマンドを使用して、AstroプロジェクトにSSRを有効にするCloudflareアダプタを追加します。これにより、アダプタがインストールされ、astro.config.mjs ファイルに適切な変更が加えられます。
npx astro add cloudflareアダプターを手動でインストールする場合は、以下の2つのステップを実行してください。
1. お好みのパッケージマネージャを使用して、`@astrojs/cloudflare`アダプタをプロジェクトの依存関係に追加します。npmを使用しているか、よくわからない場合は、ターミナルで以下を実行します。```bash
npm install @astrojs/cloudflare
```
-
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つのモードがサポートされています。
-
アドバンスモード： このモードは
dist内の_worker.jsをピックアップするadvancedモードや、プロジェクトルートにあるfunctionsフォルダからWorkerをコンパイルするディレクトリモードで関数を実行したい場合に使用します。モードが設定されていない場合、デフォルトは
"advanced"です。 -
ディレクトリモード： 関数を
directoryモードで実行したい場合にこのモードを使用します。つまり、アダプタはアプリのクライアントサイド部分を同じようにコンパイルしますが、ワーカースクリプトをプロジェクトルートのfunctionsフォルダに移動します。アダプタはそのフォルダに[[path]].jsを置くだけなので、プラグインやページのミドルウェアを追加して、バージョン管理でチェックすることができます。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アダプターを使用してビルドする際、[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:*インポート構文をサポートしているかどうかをパッケージの作者に確認してください。サポートしていない場合は、代わりのパッケージを見つけるか、別のアダプタを使用する必要があります。