INTEGRITY Документация

← Cloudflare Pages / pages / framework-guides

Preact

Preact ↗ это популярный фреймворк с открытым исходным кодом для создания современных веб-приложений. Preact также можно использовать как лёгкую альтернативу React, поскольку у них общий API и модель компонентов.

В этом руководстве вы создадите новое приложение Preact и развернете его с помощью Cloudflare Pages. Вы будете использовать create-preact ↗, легковесный инструмент для создания структуры проекта, который позволяет настроить новое приложение Preact за считанные секунды.

Настройка нового проекта

Создайте новый проект, выполнив npm init ↗ в терминале, указав название:

npm init preact
cd your-project-name

Прежде чем продолжить

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

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

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

Создайте репозиторий GitHub

Создайте новый репозиторий 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

Развернуть с помощью Cloudflare Pages

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

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

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

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

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

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

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

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

Параметр конфигурации Значение
Продакшен-ветка main
Команда сборки npm run build
Директория сборки dist

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

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

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

После того как вы развернёте сайт, вы получите уникальный поддомен для своего проекта на *.pages.dev.

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

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

Подробнее

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