Astro

Astro ↗ は、高速でコンテンツに焦点を当てたウェブサイトを構築するためのオールインワンのウェブフレームワークです。デフォルトでは、AstroはJavaScriptランタイムコードを持たないウェブサイトを構築します。

Astroについての詳細やAstroプロジェクトの支援については、Astro Docs ↗を参照してください。

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

新しいプロジェクトのセットアップ

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

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

yarn create cloudflare@latest my-astro-app --framework=astro

pnpm create cloudflare@latest my-astro-app --framework=astro

Astroは次のように尋ねます：

どのプロジェクトタイプを設定したいか。あなたの回答はこのチュートリアルの残りの部分には影響しません。プロジェクトに最適な回答を選択してください。
Gitリポジトリを初期化したいか。Noを選択し、このガイドのGitの指示に従うことをお勧めします。Yesを選択した場合は、以下のGitの指示に正確に従わず、必要に応じて調整してください。

create-cloudflareは、その後、Wrangler CLIや@astrojs/cloudflareアダプターを含む依存関係をインストールし、設定に関する質問をします。

Astroの設定

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

次のコマンドを実行して、プロジェクトのpackage.jsonに@astrojs/cloudflareアダプター ↗を追加します：

npm run astro add cloudflare

Before you continue

All of the framework guides assume you already have a fundamental understanding of Git ↗. If you are new to Git, refer to this summarized Git handbook ↗ on how to set up Git on your local machine.

If you clone with SSH, you must generate SSH keys ↗ on each computer you use to push or pull from GitHub.

Refer to the GitHub documentation ↗ and Git documentation ↗ for more information.

Create a GitHub repository

Create a new GitHub repository by visiting repo.new ↗. After creating a new repository, go to your newly created project directory to prepare and push your local application to GitHub by running the following commands in your terminal:

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でデプロイ

Deploy via the `create-cloudflare` CLI (C3)

If you use create-cloudflare(C3) ↗ to create your new Astro project, C3 will install all dependencies needed for your project and prompt you to deploy your project via the CLI. If you deploy, your site will be live and you will be provided with a deployment URL.

Cloudflareダッシュボード経由でデプロイ

Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
アカウントホームで、Workers & Pages > アプリケーションを作成 > Pages > Gitに接続を選択します。

まだ行っていない場合は、GitHubアカウントへのアクセスを承認するよう求められます。Cloudflareは、ソースからプロジェクトを監視およびデプロイするためにこれが必要です。特定のリポジトリへのアクセスを制限することもできますが、Cloudflare Pagesに追加のリポジトリを追加したい場合は、GitHubの設定 ↗内で手動でこのリストを更新する必要があります。

作成した新しいGitHubリポジトリを選択し、ビルドとデプロイの設定セクションで次の情報を提供します：

Configuration option	Value
Production branch	`main`
Build command	`npm run build`
Build directory	`dist`

オプションで、プロジェクト名フィールドをカスタマイズできます。デフォルトではGitHubリポジトリの名前になりますが、一致する必要はありません。プロジェクト名の値は、*.pages.devサブドメインとして割り当てられます。

設定が完了したら、保存してデプロイを選択します。

最初のデプロイメントが進行中であることが表示されます。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ルートでcontext.localsを使用してバインディングを使用し、Cloudflareランタイムにアクセスします。これには、Cloudflareの環境やアプリケーションに設定されたバインディングが含まれます。

TypeScriptを使用してKV名前空間にアクセスする方法の例を次に示します。

まず、env.d.tsを更新してCloudflareランタイムとKVタイプを定義する必要があります：

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

type KVNamespace = import("@cloudflare/workers-types").KVNamespace;
type ENV = {
  // `MY_KV`をあなたのKV名前空間に置き換えてください
  MY_KV: KVNamespace;
};

// デフォルトのランタイム設定を使用します（高度なモード）。
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) {
  // KVNamespaceの型は@cloudflare/workers-typesパッケージから来ています
  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ドキュメントのCloudflareランタイムへのアクセス ↗を参照してください。

Learn more

By completing this guide, you have successfully deployed your Astro site to Cloudflare Pages. To get started with other frameworks, refer to the list of Framework guides.

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings