Контейнеризация произвела революцию в ландшафте разработки программного обеспечения, предлагая разработчикам упрощенный подход к созданию приложений, которые не только масштабируемы, но и портативны и консистентны в различных средах. В авангарде этого движения находится Docker, ведущая платформа, которая превосходно справляется с управлением сложными приложениями, состоящими из множества сервисов. Это руководство проведет вас через процесс контейнеризации полнофункционального приложения, построенного с использованием React, Node.js, PostgreSQL и Nginx в качестве обратного прокси.
Понимание технологического стека
Прежде чем приступить к настройке Docker, важно ознакомиться с компонентами нашего стека приложений:
- React: Широко используемая библиотека для создания пользовательских интерфейсов, особенно эффективная для одностраничных приложений (SPA).
- Node.js: Среда выполнения JavaScript, которая облегчает разработку масштабируемых бэкендов с использованием JavaScript.
- Postgres: Надежная, открытая система реляционных баз данных, известная своей надежностью.
- Nginx: Высокопроизводительный веб-сервер и обратный прокси, который обслуживает приложение React и перенаправляет API-запросы на бэкенд Node.js.
- Docker: Платформа, которая позволяет разработчикам инкапсулировать приложения в контейнеры, обеспечивая их консистентное выполнение в различных средах.
Настройка структуры проекта
Для поддержания организованного проекта мы структурируем директорию следующим образом:
project-root/
├── client/ # React application
│ └── Dockerfile
├── server/ # Node.js backend
│ └── Dockerfile
├── nginx/ # Nginx configuration
│ └── default.conf
└── docker-compose.yml
Каждая папка и файл играют определенную роль в нашей контейнеризированной среде, которую мы подробно рассмотрим.
Контейнеризация приложения React
Для начала контейнеризации приложения React мы создадим Dockerfile в директории client/. Этот файл описывает шаги по сборке и запуску приложения React внутри контейнера Docker.
# Step 1: Build the React app
FROM node:14 AS build
WORKDIR /app
COPY ./package.json ./package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
# Step 2: Serve the React app using Nginx
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
В этом Dockerfile:
- Первый этап (build) устанавливает зависимости и компилирует приложение React.
- Второй этап использует Nginx для обслуживания собранного приложения, оптимизируя размер образа за счет исключения ненужных файлов из процесса сборки.
Чтобы собрать и запустить этот контейнер, выполните следующие команды:
docker build -t react-app ./client
docker run -p 3000:80 react-app
Контейнеризация бэкенда Node.js
Далее мы контейнеризируем бэкенд Node.js, создав Dockerfile в директории server/.
FROM node:14
WORKDIR /app
COPY ./package.json ./package-lock.json ./
RUN npm install
COPY . .
EXPOSE 5000
CMD ["npm", "start"]
Этот Dockerfile устанавливает необходимые зависимости и запускает сервер Node.js на порту 5000. Чтобы собрать и запустить контейнер, используйте:
docker build -t node-server ./server
docker run -p 5000:5000 node-server
Настройка PostgreSQL с помощью Docker
PostgreSQL будет настроен через Docker Compose для упрощения настройки и управления. Мы определим сервис PostgreSQL в docker-compose.yml.
services:
postgres:
image: postgres:13
environment:
POSTGRES_USER: user
POSTGRES_PASSWORD: password
POSTGRES_DB: mydb
volumes:
- postgres-data:/var/lib/postgresql/data
volumes:
postgres-data: