← Cloudflare Pages / pages / framework-guides
Angular
Angular ↗ это невероятно популярный фреймворк для создания реактивных и мощных фронтенд-приложений.
В этом руководстве вы создадите новое приложение Angular и развернете его с помощью Cloudflare Pages.
Создайте новый проект с помощью create-cloudflare CLI (C3)
Используйте create-cloudflare ↗ CLI (C3) для настройки нового проекта. C3 создаст каталог нового проекта, запустит официальный инструмент настройки Angular и предложит возможность мгновенного развертывания.
Чтобы использовать create-cloudflare чтобы создать новый проект Angular, выполните следующую команду:
npm create cloudflare@latest -- my-angular-app --framework=angular --platform=pagescreate-cloudflare установит зависимости, включая Wrangler CLI и адаптер Cloudflare Pages, а затем задаст вопросы по настройке.
Интеграция с Git
Помимо Direct Upload развертываний вы можете развертывать проекты через Интеграция с Git. Интеграция с Git позволяет подключить репозиторий GitHub или GitLab к приложению Pages, чтобы оно автоматически собиралось и развертывалось после каждой отправки нового коммита.
Для настройки потребуется базовое понимание Git ↗. Если вы новичок в Git, обратитесь к руководству GitHub краткое руководство по Git ↗ о том, как настроить Git на локальном компьютере.
Создайте репозиторий GitHub
Создайте новый репозиторий GitHub, перейдя по адресу repo.new ↗. После создания нового репозитория перейдите в каталог только что созданного проекта, чтобы подготовить локальное приложение и отправить его в GitHub, выполнив в терминале следующие команды:
# Skip the following three commands if you have built your application
# using C3 or already committed your changes
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/<YOUR_GH_USERNAME>/<REPOSITORY_NAME>
git push -u origin mainСоздайте проект Pages
Чтобы развернуть сайт в Pages:
-
На панели управления Cloudflare перейдите к разделу Workers & Pages страницу.
Перейдите в Workers & Pages ↗ -
Выберите Создать приложение.
-
Выберите Pages на вкладке.
-
Выберите Импорт существующего репозитория Git.
-
Выберите созданный вами новый репозиторий GitHub, а затем нажмите Начало настройки.
-
В Настройка сборок и деплоев раздел и укажите следующую информацию:
| Параметр конфигурации | Значение |
|---|---|
| Продакшен-ветка | main |
| Команда сборки | npm run build |
| Директория сборки | dist/cloudflare |
При желании можно настроить Название проекта поле. По умолчанию оно совпадает с именем репозитория GitHub, но совпадение не обязательно. Поле Название проекта значение присваивается в качестве вашего *.pages.dev поддомен.
- После завершения настройки выберите Save and Deploy.
Ознакомьтесь с ходом выполнения первого конвейера развертывания. Pages устанавливает все зависимости и собирает проект согласно заданной конфигурации. Cloudflare Pages будет автоматически пересобирать ваш проект и развертывать его при каждом новом отправленном коммите.
Кроме того, у вас будет доступ к развёртывания предпросмотра, которые повторяют процесс сборки и развёртывания для pull request. Благодаря им можно просматривать изменения проекта по реальному URL-адресу до развёртывания изменений в продакшене.
Подробнее
После выполнения этого руководства вы успешно развернули свой сайт на Angular на Cloudflare Pages. Чтобы начать работу с другими фреймворками, обратитесь к списку руководств по фреймворкам.