Как выстроить CI/CD для Angular-приложения (инструменты, best practices)?
Построение CI/CD для Angular-приложения — это автоматизация процессов сборки, тестирования, линтинга и деплоя. Эффективная CI/CD-пайплайн обеспечивает высокое качество кода, быструю доставку и стабильность релизов. Ниже приведены ключевые этапы, инструменты и best practices для настройки CI/CD в Angular-проектах.
1. CI/CD-платформы
Популярные сервисы:
-
GitHub Actions;
-
GitLab CI/CD;
-
Bitbucket Pipelines;
-
CircleCI;
-
Jenkins;
-
Azure DevOps;
-
GitHub Enterprise + self-hosted runners.
Выбор зависит от репозитория, бюджета и инфраструктуры.
2. Основные этапы пайплайна
Стандартный пайплайн состоит из:
-
Lint — проверка стиля кода;
-
Unit Tests — запуск юнит-тестов (Karma, Jest);
-
Build — сборка продакшн-версии (ng build --configuration production);
-
E2E Tests — интеграционные/браузерные тесты (Cypress, Playwright);
-
Deploy — выкладка на staging/production;
-
Notifications — уведомления (Slack, Email).
3. Пример GitHub Actions Workflow
name: CI/CD Pipeline
on:
push:
branches: \[main\]
pull_request:
branches: \[main\]
jobs:
build-and-test:
runs-on: ubuntu-latest
steps:
\- uses: actions/checkout@v3
\- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
\- name: Install dependencies
run: npm ci
\- name: Lint
run: npm run lint
\- name: Unit Tests
run: npm run test -- --watch=false --browsers=ChromeHeadless
\- name: Build
run: npm run build -- --configuration=production
\- name: Deploy to Firebase
if: github.ref == 'refs/heads/main'
uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: "${{ secrets.GITHUB_TOKEN }}"
firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
channelId: live
projectId: your-project-id
4. Best practices
Разделение пайплайнов по окружениям
-
Отдельный workflow для dev, staging, production;
-
Использование стратегий manual approval перед деплоем на prod.
Использование .env и environment.ts
-
Конфигурации окружений (src/environments/);
-
Секреты в CI хранятся в зашифрованных переменных (secrets);
Кэширование node_modules
\- name: Cache node_modules
uses: actions/cache@v3
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
Снижает время сборки.
5. Code Quality: линтеры и форматтеры
-
ESLint + Prettier;
-
npm run lint — обязательно в CI;
-
Добавление в pre-commit hook (husky, lint-staged) для локальной проверки.
6. Unit Tests + Coverage
-
Karma, Jest;
-
Включение покрытия:
ng test --watch=false --code-coverage
- Публикация покрытия:
- name: Upload Coverage
uses: actions/upload-artifact@v3
with:
name: coverage-report
path: coverage/
Или с интеграцией Codecov, Coveralls.
7. E2E-тесты (Playwright / Cypress)
Пример для Cypress:
- name: Install Cypress
run: npm install cypress
- name: Run E2E Tests
run: npm run e2e
CI запускает в headless-режиме.
8. Сборка
ng build --configuration=production
Можно добавить параметры:
-
--output-hashing=all
-
--source-map=false
-
--optimization=true
9. Деплой
Варианты:
-
Firebase Hosting (ng deploy);
-
GitHub Pages (angular-cli-ghpages);
-
AWS S3 + CloudFront;
-
Azure Static Web Apps;
-
Netlify / Vercel;
-
Docker + NGINX.
Пример деплоя на S3:
\- name: Deploy to S3
run: aws s3 sync ./dist/ s3://your-bucket-name/ --delete
10. Docker для унификации
Docker позволяет стандартизировать сборку и запуск на всех этапах:
Dockerfile:
FROM node:18-alpine
WORKDIR /app
COPY . .
RUN npm ci
RUN npm run build -- --configuration=production
В CI:
\- name: Build Docker image
run: docker build -t your-image-name .
11. Автоматическая версия и changelog
-
Использовать semantic-release или standard-version;
-
Автоматическая генерация релизов и changelog;
-
Метки: fix:, feat:, chore:, refactor:.
12. Мониторинг и откаты
-
Настроить оповещения (Slack, Discord, Email);
-
При ошибке деплоя — автоматический откат (blue/green deployment);
-
Использовать Sentry/LogRocket для отслеживания ошибок в рантайме.
13. Preview-окружения на PR
-
Vercel/Netlify позволяет автоматически поднимать preview-приложение по каждой ветке;
-
Удобно для QA и дизайнеров до мёрджа в main.
14. Branch protection
-
Защищённые ветки (main, release);
-
Требование прохождения CI до merge;
-
Автоматическое создание release после успешного CI.
15. Монорепозитории и Nx
Если используется Nx (или Lerna):
-
Разделение приложений/библиотек;
-
Incremental builds;
-
Affected commands: nx affected:build, nx affected:test;
-
Кэширование build и тестов.
16. Secrets и токены
-
Никогда не коммить секреты в репозиторий;
-
Использовать GitHub secrets, GitLab CI/CD Variables, AWS Secrets Manager.
17. Поддержка rollback и версионирования
-
Деплой с nginx и версионированной папкой;
-
Возможность откатиться на предыдущий dist при ошибке.
18. Пример структуры CI-пайплайна
.github/workflows/
├── lint.yml
├── test.yml
├── build.yml
└── deploy.yml
Каждый этап изолирован, можно переиспользовать и запускать независимо.
Эти практики помогают выстроить надёжную, быструю и безопасную доставку Angular-приложений в продакшн.