Хостинг Angular-приложения на Netlify через GitHub

В этой инструкции описано, как бесплатно хостить Angular-сайт на Netlify с исходниками в GitHub. Netlify может автоматически пересобирать и разворачивать сайт при каждом пуше в выбранную ветку репозитория.

Что потребуется перед началом

• Установленный Node.js и Angular CLI на вашей машине
• Учётная запись GitHub
• Учётная запись Netlify (можно авторизоваться через GitHub)
• Проект Angular, готовый к сборке

Пояснение терминов: CLI — командная строка для управления Angular проектами; dist — папка, куда Angular складывает собранный код для публикации.

Как создать базовое Angular-приложение для примера

Ниже приведён минимальный пример оформления главной страницы и стилей. Его можно использовать как шаблон для проверки деплоя на Netlify.

1. Создайте новое Angular-приложение через Angular CLI или в редакторе кода, например в VS Code.
2. Замените содержимое файла 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;
}

5. Для локального теста в терминале запустите команду:

ng serve

6. Дождитесь компиляции и откройте в браузере http://localhost:4200/ чтобы убедиться, что приложение работает.

7. В файле .browserslistrc удалите записи, относящиеся к iOS safari 15.2-15.3 чтобы избежать ошибок совместимости при билде. Пример содержимого:

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

Пояснение: browserslist управляет таргетированными браузерами при трансформации и полифилах. Исключение проблемных версий часто решает неподтверждённые ошибки в консоли.

8. Соберите проект для продакшена:

ng build

9. В файле .gitignore удалите или закомментируйте строку с /dist чтобы папка dist попала в коммит и была доступна Netlify при импорте, если вы планируете пушить содержимое dist напрямую:

# /dist

Важно: чаще всего в Git хранится только исходный код, а сборка выполняется на CI/CD. Но в некоторых простых проектах можно пушить собранную папку dist в репозиторий и использовать Netlify как статический хост без удалённой сборки.

Как отправить код в GitHub

Netlify требует доступа к репозиторию, поэтому код должен быть в удалённом репозитории GitHub.

1. Создайте новый репозиторий на GitHub, не инициализируйте его README или .gitignore если вы будете пушить существующий локальный проект.

2. Введите имя репозитория, например netlify-app, и описание. Оставьте полями для инициализации пустыми.

3. В терминале инициализируйте git в корне проекта и сделайте первый коммит:

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

4. Свяжите локальный репозиторий с удалённым и запушьте код. GitHub после создания репозитория покажет нужные команды, например:

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

5. Обновите страницу репозитория на GitHub и убедитесь, что файлы появились.

Как подключить GitHub репозиторий к Netlify и настроить деплой

Netlify умеет читать репозиторий, собирать проект и деплоить содержимое папки dist. Ниже шаги по подключению.

1. Войдите в Netlify или зарегистрируйтесь. Можно подключиться через GitHub для упрощения доступа.

2. На главной странице выберите Add new site -> Import an existing project.

3. Выберите Git provider GitHub и нажмите Configure Netlify on GitHub, затем Install чтобы дать доступ к репозиториям.

4. Выберите репозиторий, который хотите развернуть, например netlify-app.

5. В настройках проекта оставьте Owner, Branch to deploy и Base directory по умолчанию, если вы не публикуете отдельную ветку или подкаталог. Установите Build command в ng build и Publish directory в dist/<имя проекта>, например dist/netlify-app.

6. Нажмите Deploy site и дождитесь завершения процесса. В списке деплоев появится запись Production: main@HEAD или аналогичная, после чего можно открыть опубликованный сайт.

7. Ссылка на сайт будет вида .netlify.app. Если приложение использует Angular Router и HTML5 history API, добавьте правило перенаправлений, чтобы все маршруты отдавали index.html.

Обязательные и рекомендованные дополнения перед деплоем

• Добавьте тег base в index.html, если приложение не в корне домена, например:

• Для корректной работы SPA создать файл _redirects в папке dist с содержимым:

/*    /index.html   200

Это гарантирует, что все адреса будут перенаправлены на index.html и маршрутизация на клиенте будет работать.

• Если вы используете environment переменные для API ключей, настройте их в Netlify в разделе Site settings -> Build & deploy -> Environment variables.

• Если хотите использовать собственный домен, привяжите его в разделе Domain management и включите автоматический SSL через LetsEncrypt.

Когда подход не сработает и альтернативы

• Если проект использует серверный рендеринг Angular Universal, Netlify как статический хост не подходит. В этом случае используйте платформы с Node.js runtime, например Vercel, Heroku, Render или собственный VPS.

• Если сборка занимает много времени или требует приватных пакетов, лучше собирать артефакты на CI и деплоить только статические файлы, либо использовать приватные token для доступа к пакетам.

Альтернативы Netlify:

• GitHub Pages для простых статических сайтов
• Vercel для приложений с SSR и API-функциями
• Render и DigitalOcean App Platform для гибких деплоев

Чек-листы по ролям

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

• Убедиться, что проект собирается локально командой ng build
• Добавить base href если требуется
• Добавить _redirects для SPA
• Проверить .browserslistrc на конфликтные записи

Сопровождающий / DevOps:

• Настроить доступ Netlify к GitHub
• Установить переменные окружения в Netlify
• Протестировать автоматический deploy при пуше в main
• Настроить кастомный домен и SSL

Менеджер релиза:

• Проверить acceptance критерии перед мержем
• Контролировать откаты при критических ошибках

Миниметодология деплоя

1. Локальная сборка и smoke тесты на localhost
2. Пуш в feature ветку, PR и код ревью
3. CI проверяет сборку и тесты
4. Мерж в main триггерит автоматический деплой в Netlify
5. Проверка продакшн деплоя и мониторинг

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

• Сайт доступен по опубликованному URL
• Все маршруты работают и не возвращают 404
• HTTPS включён и валиден
• Сборка занимает адекватное время и не содержит ошибок

Тестовые сценарии и приемочные тесты

1. Открыть корень сайта и проверить наличие контента
2. Открыть внутренние маршруты напрямую по URL и убедиться, что показывается необходимая страница
3. Изменить контент, запушить в main и подтвердить, что Netlify автоматически пересобрал и обновил сайт
4. Проверить, что кастомный домен корректно привязан и имеет валидный SSL

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

Проблема: После деплоя внутренние URL возвращают 404 Решение: Добавьте файл _redirects с правилом /* /index.html 200 в папку dist и повторите деплой

Проблема: Netlify не находит publish directory Решение: Укажите точный путь вида dist/. Проверьте, что сборка действительно помещает файлы в эту папку

Проблема: Ошибки совместимости при сборке, связанные с browserslist Решение: Проверьте .browserslistrc и исключите проблемные ранние версии браузеров

Проблема: Приватные зависимости не скачиваются на сборке Netlify Решение: Добавьте доступы через Netlify environment variables или используйте токены в Netlify build settings, либо собирайте локально и пушьте артефакты

Советы по безопасности и стабильности

• Не храните секреты в репозитории. Используйте environment variables в Netlify
• Включите автоматические бэкапы настроек и документируйте шаги отката
• Настройте мониторинг доступности и логирование ошибок на клиенте

Совместимость и миграция

• Перед миграцией на новую версию Angular проверьте поддерживаемые browserslist и полифилы
• Если планируете переход на SSR, заранее спланируйте перенос с Netlify на платформу с Node.js runtime

Короткое объявление для команды

Готово: теперь проект можно хостить на Netlify через GitHub. После пуша в main Netlify будет автоматически собирать и публиковать сайт, все маршруты SPA защищены правилом перенаправлений, а SSL поднят автоматически.

Итог: использование Netlify удобно для статических SPA приложений на Angular. Для серверного рендеринга либо сложных backend-зависимостей лучше выбирать платформы с поддержкой Node.js. Следуйте чек-листам и настройкам перенаправлений чтобы избежать типичных проблем при деплое.