Как использовать Docker с Angular?angular-86

Docker позволяет создать изолированную и воспроизводимую среду для разработки и развертывания Angular-приложений. Рассмотрим ключевые аспекты интеграции.

1. Базовый Dockerfile для Angular

Создайте Dockerfile в корне проекта:

# Этап сборки
FROM node:18-alpine AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
RUN npm run build --prod

# Этап запуска
FROM nginx:alpine
COPY --from=build /app/dist/your-app-name /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

2. Оптимизация Docker-образа

Многоэтапная сборка

  • Уменьшает итоговый образ (использует только необходимые артефакты)
  • Исключает dev-зависимости из production-образа

.dockerignore

Добавьте файл .dockerignore:

node_modules/
.git/
dist/
*.md
.env

3. Настройка Nginx для Angular

Пример nginx.conf:

server {
  listen 80;
  server_name localhost;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
    root /usr/share/nginx/html;
  }
}

4. Docker Compose для разработки

docker-compose.yml для удобной разработки:

version: '3.8'
services:
  frontend:
    build: .
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - "4200:4200"
    command: npm start
    environment:
      - NODE_ENV=development

5. Профили сборки для разных сред

Можно создать несколько Dockerfile:

  • Dockerfile.dev - для разработки
  • Dockerfile.prod - для production

Пример команды сборки для production:

docker build -t angular-app:prod -f Dockerfile.prod .

6. Интеграция с CI/CD

Пример этапа для GitHub Actions:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Build Docker image
        run: docker build -t angular-app .
      - name: Login to Docker Hub
        run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin
      - name: Push to Docker Hub
        run: |
          docker tag angular-app username/repo:latest
          docker push username/repo:latest

7. Оптимизации для production

  1. Используйте Alpine-образы (node:alpine, nginx:alpine)
  2. Минификация статики (убедитесь, что Angular production build выполнен)
  3. Кэширование слоев:
COPY package.json package-lock.json ./
RUN npm ci
# Остальные файлы копируются после установки зависимостей

8. Отладка в Docker

Полезные команды:

# Запуск с интерактивной оболочкой
docker run -it angular-app sh

# Просмотр логов
docker logs <container-id>

# Проверка работающего контейнера
docker exec -it <container-id> sh

9. Безопасность

  1. Не используйте root:
USER node
  1. Сканируйте образы:
docker scan angular-app

Резюмируем

Docker обеспечивает стабильную среду для Angular-приложений на всех этапах - от разработки до production. Используйте многоэтапные сборки, оптимизируйте образы и интегрируйте с CI/CD для максимальной эффективности.

Вопросы

Собеседования