Как развернуть Angular‑приложение на Netlify через GitHub

Введение

Если вы хотите бесплатно публиковать Angular‑сайт, Netlify — удобная платформа, которая умеет подключаться к репозиторию на GitHub и автоматически пересобирать сайт при каждом пуше в выбранную ветку. В этой статье мы пройдём весь путь: от простого локального приложения до работающего сайта на Netlify. Объясняю ключевые файлы, команды, распространённые проблемы и альтернативы.

Важно: это руководство предполагает, что у вас установлен Node.js, Angular CLI и Git.

Что нужно знать заранее

• Angular CLI — инструмент для создания и сборки приложений Angular. Установите командой npm i -g @angular/cli.
• Netlify подключается к GitHub и запускает команду сборки, затем публикует папку с результатом (обычно dist/).
• Если в .gitignore закрыт каталог dist, его нужно убрать, чтобы Netlify увидел исходники (если вы хотите пушить готовую сборку).

Подготовка проекта

1. Создайте новый проект Angular, если у вас его ещё нет:

ng new my-netlify-app
cd my-netlify-app

2. Откройте проект в редакторе (например, Visual Studio Code) и замените содержимое app.component.html на простой лендинг:

  
Our Business Website


  

    
Our Business Website
    
Learn how to design, develop, and maintain your professional website in no time.
  


  

    
What We Do
    
We give you the tools to develop websites and unique solutions for your customers. We also provide training for
      maintenance and other website related topics.
  


  

    
About Us
    
We are a small business operating from Melbourne, Australia. Our spaces are uniquely crafted so clients can also
      visit us in person.
  


  
Copyright 2022

3. Добавьте стили для компонента в app.component.css:

* {
  font-family: "Arial", sans-serif;
}
.header {
  padding: 30px 50px;
}
.footer {
  padding: 5px 50px;
  text-align: center;
}
.container-dark {
  background-color: #202C39;
  color: white;
  display: flex;
  align-items: center;
}
.container-orange {
  background-color: #FFD091;
  color: #202C39;
}
.container-white {
  background-color: whitesmoke;
  color: #202C39;
}
.content {
  padding: 100px 25%;
  display: flex;
  flex-direction: column;
  line-height: 2rem;
  font-size: 1.2em;
  align-items: center;
  text-align: center;
}

4. Общие стили приложения (styles.css):

body {
  margin: 0;
  padding: 0;
}

Локальное тестирование

Чтобы проверить приложение локально, выполните в корне проекта:

gng serve

(замет: в инструкциях часто пишут ng serve — команда запускает dev‑сервер Angular). Откройте http://localhost:4200/ и убедитесь, что страница отображается.

Советы по совместимости и сборке

В файле .browserslistrc рекомендуют исключить проблемные версии iOS/Safari, чтобы избежать ненужных консольных ошибок при сборке. Пример содержимого:

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not ios_saf 15.2-15.3
not safari 15.2-15.3

Затем создайте финальную сборку:

ng build --configuration=production

По умолчанию результат окажется в папке dist/<имя-проекта>.

Если в .gitignore есть строка /dist, временно удалите или закомментируйте её, если вы планируете пушить собранные файлы вместе с исходниками (обычно это не требуется — Netlify собирает проект сам):

# /dist

Отправка кода в GitHub

Netlify получает код из репозитория, поэтому ваш проект должен находиться в GitHub (или другом поддерживаемом провайдере).

1. Создайте репозиторий на GitHub: нажмите New и укажите имя, например netlify-app. Не инициализируйте репозиторий с README/.gitignore/лицензией (если вы планируете пушить существующую папку с проектом).

2. В локальной папке проекта выполните:

git init
git add .
git commit -m "first commit"

3. Добавьте удалённый репозиторий и отправьте код (замените на ссылку вашего репозитория):

git remote add origin 
git branch -M main
git push -u origin main

4. Проверьте в веб‑интерфейсе GitHub, что файлы появились в репозитории.

Развёртывание на Netlify

Netlify умеет подключаться к GitHub, запускать команду сборки и публиковать результат. Пошагово:

1. Зарегистрируйтесь или войдите в Netlify. Можно использовать OAuth через GitHub.

2. На дашборде выберите Add new site → Import an existing project.

3. Выберите GitHub как провайдера и авторизуйте доступ.

4. Нажмите Configure Netlify on GitHub → Install, затем выберите репозиторий, который хотите развернуть.

5. В настройках сайта оставьте Owner, Branch to deploy и Base directory по умолчанию (обычно main или master). В поле Build command укажите:

ng build --configuration=production

В Publish directory укажите путь к собранным файлам, например:

dist/netlify-app

Где netlify-app — имя вашего Angular‑проекта (смотрите содержимое папки dist после сборки).

6. Нажмите Deploy site. Процесс деплоя покажет логи сборки — подождите несколько минут.

7. После успешного деплоя вы увидите запись в списке Deploys, откройте Production: main@HEAD и нажмите Open production deploy.

8. Сайт станет доступен по адресу вида .netlify.app. Если у вас есть SPA с маршрутизацией, нужно настроить перенаправления (redirects) — об этом ниже.

Частые проблемы и их решения

• Сборка падает в Netlify с ошибками совместимости: проверьте .browserslistrc и используйте production‑сборку. Иногда помогает явное указание версии Node в файле .nvmrc или в настройках Netlify.
• Приложение роутит на стороне клиента, но при прямом открытии подстраниц вы получаете 404: добавьте файл _redirects или netlify.toml с настройкой для SPA:

# файл _redirects
/*    /index.html   200

• Netlify не видит dist: убедитесь, что Publish directory указан правильно и что сборка действительно помещает файлы туда.
• Проблемы с переменными окружения: задавайте их в Settings → Build & deploy → Environment.

Когда Netlify не подходит (контрпример)

• Вам нужны тонкая настройка backend‑функций или сложная серверная логика (тогда лучше выбирать платформы с функциями серверлесс, например AWS Amplify с Lambda, или полноценный сервер).
• Очень большие статические сайты с миллионами файлов и кастомными CDN‑требованиями — тогда корпоративный CDN/облачная инфраструктура будет предпочтительнее.

Альтернативы Netlify для Angular

• Vercel — прост в использовании, хорошая интеграция с фронтендом.
• Firebase Hosting — мощная экосистема Google, хорош для проектов с Firebase backend.
• GitHub Pages — бесплатен и прост, но требует обхода для SPA‑маршрутизации.
• AWS Amplify — больше контролирует backend и auth, подходит для сложных приложений.

Выбирайте по критериям: скорость сборки, поддержка функций serverless, простота переадресаций, цена при трафике и персональные предпочтения.

Паттерн ментальной модели для CI/CD (heuristic)

1. Источник правды — GitHub (основная ветка хранит продакшен‑код).
2. CI — проверка/сборка при каждом PR или push (Netlify выполняет сборку автоматически при push).
3. Артефакт — статические файлы в dist — деплоятся в CDN (Netlify CDN).
4. Наблюдаемость — логи сборки и правила отката.

Эта модель помогает понять, где вставить тесты, линтер и когда требовать review перед мёрджем.

Чек‑лист ролей перед деплоем

Разработчик:

• Приложение собирается локально (ng build).
• Нет ошибок линтера и автотесты проходят.
• Маршрутизация SPA корректно настроена.

DevOps / инженер релизов:

• Настроены переменные окружения в Netlify.
• Проверено поведение в production‑режиме.
• Настроены уведомления о неудачных билдах.

Продакт‑оунер / менеджер:

• Утверждён контент и метрики успешности релиза.
• Проверены критические пути пользователя.

SOP: Быстрое развёртывание и откат

1. Создайте Pull Request в ветку main и дождитесь прохождения CI (тесты, линтер).
2. После мёрджа Netlify автоматически запустит сборку. Мониторьте логи.
3. При проблемах: откройте Deploys → выбрать предыдущий успешный деплой → Roll back to deploy.
4. Для адекватного мониторинга применяйте простые smoke‑тесты: проверка 200 на корень сайта и на пару ключевых маршрутов.

Критерии приёмки

• Страница главной загружается за допустимое время (ориентировочно 2–5 с в продакшн‑сценарии на медленном канале).
• Навигация между маршрутами работает без 404.
• Логи сборки в Netlify без ошибок.
• Все конфигурационные переменные заданы.

Тест‑кейсы приёмки

1. Проверить, что http://.netlify.app/ возвращает 200 и содержит заголовок Our Business Website.
2. Перейти по нескольким маршрутам SPA — прямые переходы в адресной строке не должны возвращать 404.
3. Выполнить пуш с изменением контента в main — билд Netlify должен начаться автоматически.

Мини‑фактобокс — ключевые моменты

• Источник: GitHub. Платформа хостинга: Netlify.
• Команда сборки: ng build –configuration=production.
• Папка для публикации: dist/.
• Автодеплой: включён при подключении репозитория.

Краткий словарь

• SPA: single‑page application — одностраничное приложение, где маршруты обрабатываются на клиенте.
• Publish directory: папка, которую Netlify публикует как статический сайт.

Социальный превью и анонс

OG title suggestion: Angular на Netlify через GitHub — быстрый гайд OG description suggestion: Пошаговое руководство: создание Angular‑проекта, пуш в GitHub и автоматический деплой на Netlify.

Короткая анонс‑версия (100–200 слов):

Разместите своё Angular‑приложение в сети за несколько шагов: создайте проект через Angular CLI, протестируйте локально, загрузите код в репозиторий GitHub и подключите его к Netlify. Netlify автоматически собирает и публикует папку dist/, поддерживает автоматические развёртывания при пушах и дает бесплатный subdomain. В статье собраны команды, примеры файлов и список распространённых ошибок с их решениями. Подойдёт для небольших сайтов и прототипов.

Итог и рекомендации

Netlify — отличный выбор для быстрого и бесплатного размещения статических сборок Angular. Он избавляет от настройки CI/CD вручную и предоставляет удобный интерфейс для управления деплоями и переменными окружения. Если вам нужна расширенная серверная логика или жёсткий контроль над инфраструктурой, рассмотрите AWS Amplify, Vercel или Firebase Hosting.

Ключевые шаги: создавать и тестировать локально, убедиться в корректной сборке, пушить в GitHub и правильно указать Publish directory в настройках Netlify.

В конце — краткое резюме и следующие шаги:

• Проверьте SPA redirect через _redirects.
• Настройте переменные окружения в Netlify.
• Автоматизируйте тесты в CI перед мёрджем.

Спасибо — теперь ваш Angular‑сайт может быть доступен в интернете за считанные минуты.