5 вещей, которые должен знать фронтенд-разработчик про Docker

Каждый день граница между фронтендом и бэкендом размывается, поэтому компании всё чаще ищут универсальных разработчиков, способных не только написать код, но и обеспечить стабильную работу приложения на каждом этапе релизного цикла, вплоть до запуска в продакшене.

Много кто пропустил момент, когда Docker стал стандартом в индустрии, а контейнеризация перестала быть приятным опциональным бонусом при найме опытного разработчика.

Сегодня причислять себя к Senior-грейду без знания основ контейнеризации — неоправданно.

Не будем лукавить — также компании любят экономить на сотрудниках, размывая отвественность из смежных областей на фронтенд-разработчика, который находится где-то посредине релизного цикла.

Давайте разбираться, что должен знать фронтенд-разработчик про Docker.

Что такое Docker?

Docker — это программа для создания, развёртывания и управления приложениями в контейнерах. Контейнер создаётся на основе образа, который описан в Dockerfile.

Dockerfile — по сути, инструкция для создания контейнера. В нём описывается окружение, зависимости и команды для запуска приложений внутри, например, прокси-сервера или микросервиса авторизации.

Какие проблемы решает Docker во фронтенде?

В небольшом проекте работа с web-приложением сводится к использованию четырёх команд: start, build, test, deploy.

А вот запуск веб-приложения в большом и устоявшемся коммерческом проекте выглядит так:

• Запусти Nginx, чтобы отдать клиент.
• Подними (а перед этим установи) бекенд на Go и кэш на Redis, чтобы заработало API.
• Запусти БД, чтобы были данные.
• Запусти вспомогательные сервисы для API, например, аутентификацию или backoffice.

Без контейнеризации запуск сложного приложения превращается в филиал ада: разработчики тратят время на запуск инфраструктуры, у пользователей MacOS не работает то, что работает у пользователей Ubuntu, а порты Postgres конфликтуют с портами локально поднятого почтового сервера.

Так ноутбук начинает выполнять функцию обогревателя для помещения площадью 40 квадратных метров 🙂

Для решения каких задач фронтенд-разработчики выбирают Docker чаще всего?

На стороне фронтенда Docker чаще всего используют для:

• Запуска и работы web-приложения.
• Запуска инфраструктуры для web-приложения.
• Запуска тестов (создание скриншотов, e2e-тесты).
• Сборка приложения на CI.

Что же должен знать фронтенд-разработчик про Docker?

Основные команды для работы с Docker

Без знания основных команд вы не сможете ни запустить контейнер, ни отладить, ни понять, что же с ним происходит.

			# Просмотр запущенных контейнеров
docker ps

# Сборка образа
docker build -t my-app .

# Запуск контейнера
docker run -p 3000:3000 my-app

# Остановка контейнера
docker stop container_name

# Перезапуск контейнера
docker restart container_name

# Просмотр логов
docker logs container_name

# Удаление контейнера
docker rm container_name

		

Базовое управление контейнерами также доступно через интуитивно понятный Docker UI.

Важно: все основные команды имеют полезные аргументы. Полный список аргументов вы можете найти в документации.

Как создать базовый Docker-образ для веб-приложения?

Прежде чем запустить контейнер, нужно описать его содержимое, а также выбрать порядок выполнения команд.

Образ стандартного web-приложения выглядит примерно так:

			# Используем базовый образ с Node.js
FROM node:18-alpine AS builder

# Устанавливаем рабочую директорию
WORKDIR /app

# Копируем package.json и package-lock.json
COPY package*.json ./

# Устанавливаем зависимости без обновлений, как есть
RUN npm i --frozen-lockfile

# Копируем исходный код
COPY . .

# Собираем приложение
RUN npm run build

# Используем образ nginx для отдачи статики
FROM nginx:alpine

# Копируем собранное приложение в nginx
COPY --from=builder /app/build /usr/share/nginx/html

# Открываем порт
EXPOSE 80

# Запускаем nginx
CMD ["nginx", "-g", "daemon off;"]

		

При создании Dockerfile рекомендуем следовать минимальному набору лучших практик:

• Использовать базовые образы, чтобы не нагружать образ лишними модулями.
• Добавлять .dockerignore, чтобы исключать лишние файлы из сборки.
• Не запускать контейнер от root, чтобы снизить риски для безопасности.
• Проверять сторонние образы с помощью docker scan, опять же, чтобы снизить риски для безопасности.

Как отправить образ в Container Registry?

Container Registry — это хранилище для Docker-образов.

Container Registry можно сравнить с Github, только вместо репозиториев — готовые для развёртывания образы.

Для работы с Container Registry есть несколько основных команд:

			# Логин в Container Registry (Docker Hub по умолчанию)
docker login

# Добавить тэг для образа (для простоты обращения)
docker tag my-app username/my-app:latest
docker tag my-app username/my-app:v1.2.3

# Пуш образа в registry
docker push username/my-app:latest

# Скачивание образа
docker pull username/my-app:latest

		

По тегу latest вы всегда можете получить последнюю версию вашего контейнера.

Популярные Container Registry:

• Docker Hub (публичный, простой и бесплатный для открытых проектов);
• GitHub Container Registry (платный, интегрирован с GitHub);
• Google Container Registry (платный);
• Yandex Container Registry (платный).

Важно: старайтесь подбирать Container Registry под экосистему, в которой будет работать ваше приложение. Это сэкономит много сил и времени.

Как запустить Docker-контейнер локально и на сервере?

Для локального запуска контейнера потребуется пройти простой пайплайн:

			# Собрать образ
docker build -t my-react-app .

# Запустить контейнер
docker run -p 3000:80 my-react-app

		

Если вы хотите запустить контейнер на удалённом сервере с установленным Docker, то вам потребуется пройти пайплайн посложнее:

Важно: в данном примере мы используем в качестве Container Registry — Docker Hub.

			# Авторизоваться локально в Docker
docker login

# Собрать образ
docker build -t my-react-app .

# Переименовать образ для удобного обращения
docker tag my-react-app:latest docker_login/my-react-app:latest

# Запушить образ в Container Registry
docker push docker_login/my-awesome-app:latest

# Подключится к своему серверу по SSH
ssh username@ip-адрес-вашего-сервера

# Авторизоваться в Docker
docker login

# Запустить контейнер
docker run -d --name my-react-app -p 80:5000 docker_login/my-react-app:latest

		

Как подключить фронтенд к бэкенду внутри Docker?

Чтобы не настраивать общение клиента и сервера через порты, хорошая практика — объединять сервисы в рамках единой Docker-сети.

Обычно этой задачей занимается файл-оркестратор docker-compose.yml:

			version: '3.8'

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

  backend:
    build: 
      context: ./backend
      dockerfile: Dockerfile
    ports:
      - "5000:5000"
    environment:
      - NODE_ENV=development
      - DB_HOST=database
    networks:
      - app-network

  database:
    image: postgres:13
    environment:
      - POSTGRES_DB=myapp
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=password
    volumes:
      - postgres_data:/var/lib/postgresql/data
    networks:
      - app-network

volumes:
  postgres_data:

networks:
  app-network:
    driver: bridge

		

Чтобы поднять весь стэк, нам понадобятся команды:

			# Запуск всех сервисов
docker-compose up

# Запуск в фоне
docker-compose up -d

# Остановка
docker-compose down

# Пересборка и запуск
docker-compose up --build

		

Ключевые моменты:

• Сервисы в одной сети могут общаться по имени (в примере фронтенд обращается к бэкенду по http://backend:5000);
• depends_on гарантирует порядок запуска, но не ждёт готовности сервиса; 
• Для продакшена можно разделить конфигурации на docker-compose.yml и docker-compose.prod.yml.

Бонус: Как управлять контейнерами через UI?

В случае отсутствия опыта контейнеризации у команды разработки, управление контейнерами можно осуществлять через UI (вместо терминала) при помощи Portainer.

Portainer — это легковесная панель управления Docker-контейнерами. Через удобный графический интерфейс он позволяет выполнять операции, которые обычно отправляются через терминал (docker run, docker ps, docker compose up).

Админ панель Portainer.IO для управления контейнерами и их образами

Portainer делает управление докер-контейнерами доступным для широкого круга пользователей: от разработчиков и тестировщиков до системных администраторов.

Portainer не заменяет необходимость знания Docker, но значительно ускоряет и упрощает такие рутинные операции, как развёртывание и мониторинг.

Когда Docker необходим, а когда можно обойтись?

Используйте Docker когда:

• работаете в команде с разными ОС;
• проект имеет сложные внутренние и внешние зависимости;
• нужно обеспечить идентичность разных сред: разработки, тестирования, продакшена;
• работаете с full-stack приложениями, где фронтенд тесно связан с бэкендом.

Без Docker можно обойтись когда:

• работаете над небольшим проектом;
• вся команда использует одинаковое железо и ОС;
• проект не имеет сложных зависимостей;
• нет необходимости в изоляции окружений.

Заключение

В последние годы Docker прочно вошёл в арсенал фронтенд-разработчиков, перестав быть инструментом исключительно для бэкенда и DevOps.

Основная ценность Docker для фронтенд разработчика заключается в решении двух ключевых задач: быстрый запуск сложной рабочей среды приложения и обеспечение стабильности на протяжении релизного цикла.

Поэтому даже базовое знание Docker поможет выделиться на фоне других разработчиков, ведь вы сможете не просто создать приложение, но и провести его через полный релизный цикл.

В своём телеграмм-канале я делюсь практическим опытом разработки, честно рассказываю о трудностях в работе, а также показываю кейсы проектов, которыми занимаюсь в свободное время!

Буду рад каждому, кто подписался ✨

Возможно, вам будет интересно:

Делитесь своими находками и полезными командами для работы с Docker в комментариях!