Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

Astro

最終更新 Markdown で表示Agent セットアップ

Astro ↗ は、高速でコンテンツ重視の Web サイトを作るオールインワンの Web フレームワークです。デフォルトでは、ランタイムの JavaScript を含まない Web サイトをビルドします。

Astro の詳細やプロジェクトのサポートは、Astro Docs ↗ を参照してください。

このガイドでは、新しい Astro アプリケーションを作成し、Cloudflare Pages でデプロイします。

動画チュートリアル

新しいプロジェクトをセットアップする

create-cloudflare で新しい Astro プロジェクトを作成するには、次のコマンドを実行します。

npm create cloudflare@latest -- my-astro-app --framework=astro --platform=pages

Astro は次の内容を尋ねます。

  1. セットアップするプロジェクトの種類です。回答はこのチュートリアルの以降の手順には影響しません。プロジェクトに合うものを選んでください。

  2. Git リポジトリを初期化するかどうかです。No を選び、このガイドの Git の手順 に従うことをおすすめします。Yes を選んだ場合は、下記の Git 手順をそのまま使わず、状況に合わせて調整してください。

create-cloudflare は、Wrangler CLI と @astrojs/cloudflare adapter を含む依存関係をインストールし、セットアップの質問を表示します。

Astro の設定

@astrojs/cloudflare adapter ↗ を使うと、Astro のサーバーサイドレンダリング（SSR）サイトを Cloudflare Pages にデプロイできます。SSR サイトは Pages Functions 上でレンダリングされ、動的な機能やカスタマイズが可能です。

プロジェクトの package.json に @astrojs/cloudflare adapter ↗ を追加するには、次のコマンドを実行します。

npm run astro add cloudflare

続ける前に

すべてのフレームワークガイドは、Git ↗ の基本的な理解があることを前提としています。Git を初めて使う場合は、この Git ハンドブックの要約 ↗ で、ローカルマシンへの Git のセットアップ方法を確認してください。

SSH でクローンする場合は、GitHub に対して push または pull する各コンピューターで SSH キーを生成 ↗ する必要があります。

詳細は GitHub のドキュメント ↗ と Git のドキュメント ↗ を参照してください。

GitHub リポジトリを作成する

repo.new ↗ にアクセスして、新しい GitHub リポジトリを作成します。作成後、新しく作ったプロジェクトディレクトリに移動します。次のコマンドをターミナルで実行して、ローカルアプリケーションを GitHub へプッシュします。

git init
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

Cloudflare Pages でデプロイする

create-cloudflare CLI（C3）でデプロイする

create-cloudflare（C3） ↗ で新しい Astro プロジェクトを作成すると、C3 はプロジェクトに必要な依存関係をすべてインストールし、CLI からデプロイするかどうかを尋ねます。デプロイするとサイトが公開され、デプロイ URL が渡されます。

Cloudflare ダッシュボードからデプロイする

サイトを Pages にデプロイするには、次の手順を実行します。

  1. Cloudflare ダッシュボードで Workers & Pages ページを開きます。

    Workers & Pages を開く ↗

  2. Create application を選びます。

  3. Pages タブを選びます。

  4. Import an existing Git repository を選びます。

  5. 作成した新しい GitHub リポジトリを選び、Begin setup を選びます。

  6. Set up builds and deployments セクションで、次の情報を入力します。

設定項目値
本番ブランチmain
ビルドコマンドnpm run build
ビルドディレクトリdist

任意で Project name フィールドを変更できます。デフォルトは GitHub リポジトリ名ですが、一致させる必要はありません。Project name の値が *.pages.dev サブドメインになります。

設定が終わったら Save and Deploy を選びます。

最初のデプロイが進行中であることが表示されます。Pages は依存関係をすべてインストールし、指定どおりにプロジェクトをビルドします。

新しいコミットをプッシュするたびに、Cloudflare Pages はプロジェクトを自動で再ビルドしてデプロイします。

あわせて プレビューデプロイ も利用できます。プルリクエストに対してビルドとデプロイを繰り返します。本番に出す前に、実際の URL で変更を確認できます。

ローカルランタイム

ローカルランタイムのサポートは、platformProxy オプションで設定します。

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

export default defineConfig({
	adapter: cloudflare({
		platformProxy: {
			enabled: true,
		},
	}),
});

Astro アプリケーションでバインディングを使う

バインディング を使うと、アプリケーションが KV、Durable Object、R2、D1 ↗ などの Cloudflare 開発者向けプロダクトと連携できます。

Astro コンポーネントと API ルートでは、Astro Middleware ↗ の context.locals で Cloudflare ランタイムにアクセスし、バインディングを使います。このランタイムには、ほかのフィールドに加えて Cloudflare の環境と、アプリケーションに設定したバインディングが含まれます。

TypeScript で KV 名前空間にアクセスする例は次のとおりです。

まず、env.d.ts を更新して Cloudflare ランタイムと KV の型を定義します。wrangler types を実行して、Cloudflare ランタイムの型を生成してください。

/// <reference types="astro/client" />

type ENV = {
	// replace `MY_KV` with your KV namespace
	MY_KV: KVNamespace;
};

// use a default runtime configuration (advanced mode).
type Runtime = import("@astrojs/cloudflare").Runtime<ENV>;
declare namespace App {
	interface Locals extends Runtime {}
}

その後、API エンドポイントから次のように KV へアクセスできます。

import type { APIContext } from "astro";

export async function get({ locals }: APIContext) {
	const { MY_KV } = locals.runtime.env;

	return {
		// ...
	};
}

エンドポイント以外にも、Astro コンポーネントから直接バインディングを使えます。

---
const myKV = Astro.locals.runtime.env.MY_KV;
const value = await myKV.get("key");
---
<div>{value}</div>

Astro の Cloudflare ランタイムについて詳しくは、Astro ドキュメントの Access to the Cloudflare runtime ↗ を参照してください。

さらに学ぶ

このガイドを完了すると、Astro サイトを Cloudflare Pages にデプロイできています。ほかのフレームワークを始めるには、Framework ガイドの一覧 を参照してください。

役に立ちましたか？