Как запустить React контейнер без использования Nginx
Всем привет, буду краток как смогу, нужен совет от человека, который хорошо разбирается в контейнеризации.
У нас на проекте сейчас используется 3 контейнера -- DB, backend, frontend.
Dockerfile для Frontend контейнера:
FROM node:16-buster-slim as builder
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
# add app
COPY . ./
RUN yarn build
FROM nginx:1.21.1-alpine
RUN rm -rf /etc/nginx/conf.d
COPY localconf /etc/nginx
COPY --from=builder /app/build/ /usr/share/nginx/html/
WORKDIR /usr/share/nginx/html
COPY ./env-config.* ./
COPY ./env.sh .
RUN chmod +x env.sh
RUN apk add --no-cache bash openssl
RUN chmod +x env.sh
CMD ["/bin/bash", "-c", "env && /usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]
Вся проблема заключается в том, что фронтенд разработчики не могу отслеживать изменения с этим контейнером из-за Nginx'a. Они запускают фронт на хостовой машине с помощью yarn build && yarn start и когда изменения стабильны, то они собирают контейнер.
Чтобы исправить это дело, я обрезал докерфайл до следующего:
FROM node:16-buster-slim
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
# add app
COPY . ./
RUN yarn build
CMD ["yarn", "start"]
И чтобы изменения можно было отслеживать в реальном времени, добавил volume в docker-compose.yaml file:
frontend:
container_name: frontend
build:
context: ../../client/project
dockerfile: local.dockerfile
ports:
- "80:80"
- "443:443"
command: yarn start
env_file:
- ../../client/project/.env
volumes:
- ../../client/project:/app/
- /app/node_modules
restart: on-failure
depends_on:
- backend
Я не знаю почему, но приложение не отвечает ни на один запрос и реджектит любое соединение, если обращаться к нему через localhost:443, где оно отлично работало с Nginx.
Не могли бы вы рассказать о некоторых best practices как обернуть в контейнер React приложение без Nginx, чтобы изменения были видны в реальном времени?
Поискал разные статьи и доки, но ничего подобного не нашел, хотя уверен, что задача очень популярная.
