PrepBro
← Назад к вопросам

Как используешь Docker в процессе разработки?

2.0 Middle🔥 141 комментариев
#Инструменты и DevOps

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI3 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Docker в процессе разработки frontend приложения

Docker стал стандартным инструментом для разработки, позволяя создавать консистентное окружение и упростить развёртывание. Вот как я использую Docker при разработке фронтенда.

1. Базовая структура Dockerfile для frontend

# Dockerfile
FROM node:20-alpine

WORKDIR /app

# Копировать package.json и package-lock.json
COPY package*.json ./

# Установить зависимости
RUN npm ci

# Копировать исходный код
COPY . .

# Expose порт (для dev-сервера)
EXPOSE 3000

# Dev-сервер
CMD ["npm", "run", "dev"]

Оптимизация с multi-stage сборкой:

# Stage 1: Build
FROM node:20-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Stage 2: Production
FROM node:20-alpine
WORKDIR /app
COPY --from=builder /app/dist ./dist
COPY package*.json ./
RUN npm ci --omit=dev
EXPOSE 3000
CMD ["npm", "run", "start"]

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

# docker-compose.yml
version: '3.8'

services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development
      - REACT_APP_API_URL=http://backend:8000
    depends_on:
      - backend
    networks:
      - app-network

  backend:
    build:
      context: ./backend
    ports:
      - "8000:8000"
    environment:
      - DATABASE_URL=postgresql://user:pass@db:5432/app
    depends_on:
      - db
    networks:
      - app-network

  db:
    image: postgres:15-alpine
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
      POSTGRES_DB: app
    volumes:
      - postgres_data:/var/lib/postgresql/data
    networks:
      - app-network

volumes:
  postgres_data:

networks:
  app-network:
    driver: bridge

Dockerfile.dev для разработки с hot reload:

# Dockerfile.dev
FROM node:20-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci

EXPOSE 3000

CMD ["npm", "run", "dev"]

3. Запуск контейнера в процессе разработки

# Запустить контейнер с hot reload
docker run -d \
  --name frontend \
  -p 3000:3000 \
  -v "$(pwd)":/app \
  -v /app/node_modules \
  -e NODE_ENV=development \
  myapp:dev

# Проверить логи
docker logs -f frontend

# Войти в контейнер (если нужно)
docker exec -it frontend sh

# Остановить контейнер
docker stop frontend

4. Работа с переменными окружения

# .env.docker
REACT_APP_API_URL=http://backend:8000
REACT_APP_ENV=development
DEBUG=true

# Использовать при запуске
docker run -d \
  --env-file .env.docker \
  -p 3000:3000 \
  -v "$(pwd)":/app \
  frontend:dev

5. Hot reload в Docker

Проблема: Изменения в коде не отражаются в контейнере

Решение: Volume mounting

# docker-compose.yml
services:
  frontend:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app              # Синхронизировать весь код
      - /app/node_modules   # Исключить node_modules (использовать из контейнера)
    environment:
      - CHOKIDAR_USEPOLLING=true  # Для Windows/Mac

Проверить, что работает:

docker-compose up -d
echo "console.log('test')" >> src/App.js
# Страница должна обновиться в браузере

6. Запуск тестов в Docker

# docker-compose.test.yml
version: '3.8'

services:
  frontend-test:
    build:
      context: .
      dockerfile: Dockerfile.dev
    working_dir: /app
    volumes:
      - .:/app
    command: npm run test:run

# Запустить тесты
docker-compose -f docker-compose.test.yml up

# С coverage
docker-compose -f docker-compose.test.yml run --rm frontend-test npm run test:coverage

7. Линтинг в Docker

# Запустить линтер в контейнере
docker-compose run --rm frontend npm run lint

# Исправить ошибки
docker-compose run --rm frontend npm run lint -- --fix

8. Оптимизация размера образа

# Плохо - большой образ
FROM node:20
RUN apt-get update && apt-get install -y build-essential

# Хорошо - компактный образ
FROM node:20-alpine
RUN apk add --no-cache python3 make

.dockerignore файл:

node_modules
npm-debug.log
.git
.gitignore
README.md
.env
.DS_Store
dist
build

9. Работа с .env файлами

# docker-compose.yml
services:
  frontend:
    build: .
    env_file:
      - .env.docker
    environment:
      - NODE_ENV=development

.env.docker

REACT_APP_API_URL=http://backend:8000
REACT_APP_API_KEY=dev_key_12345
REACT_APP_ENVIRONMENT=development

10. Интеграция с IDE

VS Code

Установить расширение: Remote - Containers

.devcontainer/devcontainer.json

{
  "name": "Frontend Dev",
  "image": "node:20-alpine",
  "features": {},
  "forwardPorts": [3000],
  "customizations": {
    "vscode": {
      "extensions": [
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint"
      ]
    }
  }
}

Использование:

# Открыть VS Code в контейнере
code .
# Будет предложено открыть в Remote Container

11. Практический workflow

# 1. Клонировать проект
git clone <repo>
cd <project>

# 2. Запустить Docker Compose
docker-compose up -d

# 3. Установить зависимости (если первый запуск)
docker-compose exec frontend npm install

# 4. Разрабатывать
# Открыть http://localhost:3000
# Код синхронизируется автоматически

# 5. Запустить тесты
docker-compose exec frontend npm test

# 6. Линтинг
docker-compose exec frontend npm run lint

# 7. Собрать для production
docker-compose run --rm frontend npm run build

# 8. Остановить
docker-compose down

12. Решение распространённых проблем

Проблема: Медленная синхронизация файлов на Mac/Windows

# Решение: используй named volumes
services:
  frontend:
    volumes:
      - app-sync:/app:cached
      - /app/node_modules

volumes:
  app-sync:
    driver: local

Проблема: npm install медленный при каждом запуске

# Решение: кешировать слои
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci  # Используй npm ci вместо npm install
COPY . .
EXPOSE 3000
CMD ["npm", "run", "dev"]

Проблема: Port already in use

# Найти контейнер использующий порт
docker ps | grep 3000

# Удалить контейнер
docker stop <container_id>

# Или использовать другой порт
docker run -p 3001:3000 ...

13. Security best practices

# Запускать от непривилегированного пользователя
RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001

USER nextjs

CMD ["npm", "run", "dev"]

14. Production сборка

# Собрать образ
docker build -t myapp:1.0 .

# Запустить в режиме production
docker run -d \
  -p 3000:3000 \
  -e NODE_ENV=production \
  --restart=always \
  myapp:1.0

Преимущества Docker для frontend разработчика

  • Консистентность - одинаковое окружение на всех машинах
  • Изоляция - не влияет на остальную систему
  • Easy onboarding - новичок просто запускает docker-compose up
  • Микросервисы - легко запустить backend, базу, фронт вместе
  • CI/CD - одна команда для build, test, deploy
  • Легко менять версии - просто меняешь версию в Dockerfile

Docker превратился из хипстерского инструмента в essential part разработки, особенно в командных проектах.

Как используешь Docker в процессе разработки? | PrepBro