React app в докер контейнере

Question

В компании полный зоопарк с проектами. Есть java, php, различные cms вроде wordpress / drupal, nextjs, react. Есть желание все это унифицировать, и заворачивать в докер контейнеры. Со всем вроде как всё понятно, но есть вопрос с реактом. Что бы все было в едином формате, react приложения тоже хочется заворачивать в контейнер. Но пока не очень понятно как правильно поступить. Есть два варианта:

Можно внутри образа хранить файлы, и монтировать их в директорию на хосте, и на эту директорию направить nginx, но это кажется костылем.
Либо можно react app заворачивать в nginx контейнер, а уже через хостовой nginx проксировать запросы на nginx в контейнере, который в свою очередь будет отдавать статические файлы. Это вроде как более правильный путь, но какой-то оверхед получается.

Понятное дело что на сайте используется не только react приложение. Есть ещё и бэк.

Можно было бы конечно создать отдельный контейнер с nginx, который будет проксировать запросы ко всем сервисам(бэк, фронт) сайта, но в таком случае он должен быть один на сервере, так как на него тогда надо направить 80 и 443 порты. Но так сделать не получится, потому что на сервере куча проектов, которые как раз обслуживает хостовой nginx.

Как правильно поступить в такой ситуации?

Answer 1

внутри образа хранить файлы, и монтировать их в директорию на хосте

Насколько знаю, так нельзя.

Можно с машины внутрь контейнера монтировать, а вот в обратную сторону - нет. Файлы изнутри можно получить только через docker cp. Или смонтировать том, потом запустить сборку в работающем контейнере (не образе) yarn build, что запишет файлы в файловую систему машины.

какой-то оверхед получается

По памяти Nginx потребляет мало, у меня 10 Мб по docker stats в режиме прокси.

По CPU - оверхед небольшой, это же докер.

По диску: можно собрать "худой" образ, где будет Nginx + статические файлы. Это делается в два приема с помощью COPY --from=.

Пример Dockerfile для сборки документации на vuepress, для React в принципе делается аналогично:

# Тут используется свой образ vendor:vuepress, не доступный с докерхаба
FROM vendor:vuepress AS vuepress

# Копируем файлы проекта и конфиг
COPY /docs/vuepress /app/docs
COPY /docs/vuepress.config.js /app/docs/.vuepress/config.js

# Окружение влияет на сборку
ARG APP_ENV=production
ENV APP_ENV=${APP_ENV}

# Сборка
RUN npm run docs:build

# Второй этап - берем образ Nginx, копируем в него файлы билда, сорцы не копируются
FROM nginx:latest AS nginx-doc

# Настройка Nginx
RUN rm /etc/nginx/conf.d/default.conf

COPY ./docker/nginx-doc/configs/conf.d /etc/nginx/conf.d

# Копирование только файлов билда
COPY --from=vuepress /app/docs/.vuepress/dist /var/www

WORKDIR /var/www

EXPOSE 80

CMD ["nginx"]

БЛОГ НА HUSL

React app в докер контейнере

Ответы (1 шт):