Как выстроить 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. Основные этапы пайплайна

Стандартный пайплайн состоит из:

  1. Lint — проверка стиля кода;

  2. Unit Tests — запуск юнит-тестов (Karma, Jest);

  3. Build — сборка продакшн-версии (ng build --configuration production);

  4. E2E Tests — интеграционные/браузерные тесты (Cypress, Playwright);

  5. Deploy — выкладка на staging/production;

  6. 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-приложений в продакшн.