← Cloudflare Pages / pages / framework-guides

Astro

Astro ↗ это универсальный веб-фреймворк для создания быстрых сайтов, ориентированных на контент. По умолчанию Astro собирает сайты без JavaScript-кода времени выполнения.

См. Astro Docs ↗ чтобы узнать больше об Astro или получить помощь по проекту на Astro.

В этом руководстве вы создадите новое приложение 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 адаптера и задаст вам вопросы по настройке.

Сайт Astro с серверным рендерингом (SSR) можно развернуть в Cloudflare Pages с помощью @astrojs/cloudflare адаптер ↗. Сайты SSR рендерятся с помощью Pages Functions и поддерживают динамическую функциональность и настройку.

Добавьте @astrojs/cloudflare адаптер ↗ вашего проекта package.json выполнив:

npm run astro add cloudflare

Все руководства по фреймворкам предполагают, что у вас уже есть базовое понимание Git ↗. Если вы новичок в Git, обратитесь к этому краткое руководство по Git ↗ о том, как настроить Git на локальном компьютере.

Если вы клонируете по SSH, необходимо сгенерировать ключи SSH ↗ на каждом компьютере, с которого вы отправляете или получаете данные из GitHub.

См. документация GitHub ↗ и Документация Git ↗, где это описано подробнее.

Создайте новый репозиторий GitHub, перейдя по адресу repo.new ↗. После создания нового репозитория перейдите в каталог только что созданного проекта, чтобы подготовить локальное приложение и отправить его в 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

Если вы используете create-cloudflare(C3) ↗ чтобы создать новый проект Astro: C3 установит все зависимости, необходимые проекту, и предложит развернуть его через CLI. Если вы согласитесь, сайт станет доступен в сети, и вы получите URL-адрес развертывания.

Чтобы развернуть сайт в Pages:

1. На панели управления Cloudflare перейдите к разделу Workers & Pages страницу.

   Перейдите в Workers & Pages ↗

2. Выберите Создать приложение.

3. Выберите Pages на вкладке.

4. Выберите Импорт существующего репозитория Git.

5. Выберите созданный вами новый репозиторий GitHub, а затем нажмите Начало настройки.

6. В Настройка сборок и деплоев раздел и укажите следующую информацию:

При желании можно настроить Название проекта поле. По умолчанию оно совпадает с именем репозитория GitHub, но совпадение не обязательно. Поле Название проекта значение присваивается в качестве вашего *.pages.dev поддомен.

После завершения настройки выберите Save and Deploy.

Вы увидите, как выполняется ваше первое развёртывание. Pages устанавливает все зависимости и собирает проект согласно заданным настройкам.

Cloudflare Pages будет автоматически пересобирать ваш проект и разворачивать его при каждом новом отправленном коммите.

Кроме того, у вас будет доступ к развёртывания предпросмотра, которые повторяют процесс сборки и развёртывания для pull request. Благодаря им можно просматривать изменения проекта по реальному URL-адресу до их развёртывания в продакшене.

Поддержка локальной среды выполнения настраивается через platformProxy параметр:

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

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

A привязка позволяет вашему приложению взаимодействовать с продуктами Cloudflare для разработчиков, такими как KV, Durable Object, R2, а также D1 ↗.

Используйте привязки в компонентах Astro и маршрутах API с помощью context.locals от Astro Middleware ↗ для доступа к среде выполнения Cloudflare, которая среди прочих полей содержит окружение Cloudflare, а также любые привязки (bindings), заданные для вашего приложения.

Ознакомьтесь со следующим примером доступа к пространству имен KV с помощью TypeScript.

Сначала нужно определить runtime и тип KV для Cloudflare, обновив env.d.ts. Убедитесь, что вы сгенерировали типы среды выполнения Cloudflare, выполнив wrangler types.

/// <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 {}
}

После этого доступ к KV из конечной точки API можно получить следующим образом:

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 runtime см. Доступ к среде выполнения Cloudflare ↗ в документации Astro.

После выполнения этого руководства вы успешно развернули свой сайт на Astro на Cloudflare Pages. Чтобы начать работу с другими фреймворками, обратитесь к списку руководств по фреймворкам.