Как запустить 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, чтобы изменения были видны в реальном времени?

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

enter image description here


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