import ReadMore from '~/components/ReadMore.astro'

Вы можете развернуть ваш проект Astro на Cloudflare Pages, платформе для фронтенд-разработчиков для совместной работы и развёртывания статических (JAMstack) и SSR веб-сайтов.

Это руководство включает:

Необходимые условия

Чтобы начать работу, вам понадобятся:

  • Учётная запись Cloudflare. Если у вас её ещё нет, вы можете создать бесплатную учётную запись Cloudflare в процессе.

  • Ваш код приложения загруженный в GitHub или в репозиторий GitLab.

Как развернуть сайт с использованием Git

  1. Настройте новый проект на Cloudflare Pages.

  2. Загрузите свой код в ваш репозиторий Git (GitHub, GitLab).

  3. Войдите в панель управления Cloudflare и выберите вашу учётную запись в Account Home > Pages.

  4. Выберите Create a new Project и опцию Connect Git.

  5. Выберите проект Git, который вы хотите развернуть, и нажмите Begin setup.

  6. Используйте следующие настройки сборки:

    • Предустановленный фреймворк: Astro
    • Команда сборки: npm run build
    • Каталог вывода сборки: dist

  7. Нажмите кнопку Сохранить и развернуть.

Как развернуть сайт с использованием Wrangler

  1. Установите CLI Wrangler.
  2. Аутентифицируйте Wrangler с вашей учётной записью Cloudflare, используя wrangler login.
  3. Запустите вашу команду сборки.
  4. Разверните, используя npx wrangler pages deploy dist.
bash
# Установите CLI Wranglernpm install -g wrangler# Войдите в учётную запись Cloudflare из командной строкиwrangler login# Запустите вашу команду сборкиnpm run build# Создайте новое развертываниеnpx wrangler pages deploy dist

После загрузки ваших ресурсов, Wrangler даст вам URL для предварительного просмотра вашего сайта. Когда вы войдёте в панель управления Cloudflare Pages, вы увидите ваш новый проект.

Включение предварительного просмотра локально с помощью Wrangler

Для работы предварительного просмотра, вам необходимо установить wrangler

bash
pnpm add wrangler --save-dev

Затем можно обновить скрипт предварительного просмотра для запуска wrangler вместо встроенной команды предварительного просмотра Astro:

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

Как развернуть сайт SSR

Вы можете собрать сайт Astro SSR для развертывания на Cloudflare Pages с помощью адаптера @astrojs/cloudflare.

Для настройки адаптера выполните следующие действия. Затем вы можете развернуть систему, используя любой из описанных выше подходов.

Быстрая установка

Добавьте адаптер Cloudflare для включения SSR в ваш проект Astro с помощью следующей команды astro add. Это позволит установить адаптер и внести соответствующие изменения в файл astro.config.mjs за один шаг.

bash
npx astro add cloudflare

Ручная установка

Если вы предпочитаете установить адаптер вручную, выполните следующие два шага:

  1. Добавьте адаптер @astrojs/cloudflare в зависимости вашего проекта, используя ваш менеджер пакетов по умолчанию. Если вы используете npm или не уверены, выполните следующее в терминале:

    bash
    npm install @astrojs/cloudflare

  2. Добавьте следующий код в ваш файл astro.config.mjs:

    js
    import { defineConfig } from 'astro/config';import cloudflare from '@astrojs/cloudflare';export default defineConfig({  output: 'server',  adapter: cloudflare()});

Узнайте больше о SSR в Astro.

Устранение неполадок

Гидратация на стороне клиента

Гидратация на стороне клиента может завершиться неудачно из-за настройки автоматического минимизирования Cloudflare. Если вы видите Hydration completed but contains mismatches в консоли, убедитесь, что автоматическое минимизирование отключено в настройках Cloudflare.

API среды выполнения Node.js

Если вы собираете проект, использующий рендеринг по требованию с адаптером Cloudflare SSR, и сервер не может быть собран с сообщением об ошибке, например [Error] Could not resolve "XXXX. The package "XXXX" wasn't found on the file system but is built into node.:

  • Это означает, что пакет или импорт, который вы используете в среде сервера, не совместим с API среды выполнения Cloudflare.

  • Если вы напрямую импортируете API среды выполнения Node.js, обратитесь к документации Astro по совместимости с Cloudflare Node.js, чтобы узнать, как решить эту проблему.

  • Если вы импортируете пакет, который импортирует API среды исполнения Node.js, уточните у автора пакета, поддерживает ли он синтаксис импорта node:*. Если нет, вам, возможно, придется найти альтернативный пакет.

Курсы Astro