Эпизод 13 — Dockerize React: многоэтапная сборка образа NGINX размером 40 МБ

Мы возьмём работающее приложение React на виртуальной машине и преобразуем его в образ Docker производственного уровня, используя многоэтапную сборку: скомпилируем с помощью Node на этапе 1, а затем запустим статическую сборку с помощью NGINX на этапе 2. Результат: небольшой, безопасный и быстрый образ, который можно запускать где угодно.

Вам предстоит:
Очистить устаревшую виртуальную машину (удалить /var/www/html)
Написать многоэтапный Dockerfile (сборщик Node → среда выполнения NGINX)
Сборка, запуск и проверка на порту 80
Отслеживать логи в реальном времени и управлять жизненным циклом контейнера
Дополнительно: конфигурация NGINX, совместимая со SPA (обработка клиентских маршрутов)
Бонус: .dockerignore для экономии места в образах

*Многоэтапный Dockerfile (React)*
---------- Этап 1: Сборка (Node)
FROM node:18-alpine AS build
WORKDIR /app

Установка зависимостей с использованием кэшированных слоев
COPY package*.json ./
RUN npm ci

Копировать исходный код и сборку
COPY . .
RUN npm run build

---------- Этап 2: Выполнение (NGINX)
FROM nginx:1.27-alpine
Необязательно: пользовательская конфигурация NGINX для SPA (см. ниже)
COPY nginx.conf /etc/nginx/conf.d/default.conf

Копировать скомпилированный статический сайт
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
Команда NGINX по умолчанию уже установлена

*Конфигурация NGINX для SPA (маршрутизация на стороне клиента)*
nginx.conf
server {
listen 80;
server_name _;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri /index.html;
}
Статическое кэширование (настройте по мере необходимости)
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 7d;
access_log off;
}
}

*.dockerignore (сохранить контекст крошечным)*
node_modules
build
.git
.gitignore
*.log
.DS_Store
.env

--------
*Дополнительные ресурсы:*
Мой курс AWS для начинающих: https://www.udemy.com/course/aws-fund...
DevOps для начинающих: https://www.udemy.com/course/devops-f...
AWS Mastery: 26 облачных проектов AWS для инженеров и архитекторов - https://www.udemy.com/course/aws-mast...

#Docker #React #DevOps #Контейнеры #Dockerfile #MultiStageBuild #NGINX #Alpine #JavaScript #NodeJS #SPA #WebPerformance #CICD #Cloud