Как подключить React контейнер к контейнеру nginx

Question

Подскажите, как передать индекс из сборки Реакта в контейнер с Nginx и как должен выглядеть nginx.conf

    services:
      client:
        build:
          context: ./react-app
          dockerfile: Dockerfile
        ports:
          - "3000:3000"
      nginx:
        image: nginx:latest
        ports:
          - "80:80"
          - "433:433"

Answer 1

Для того, чтобы UI приложение работало в Docker вам можно создать более простую конфигурацию, состоящую только из nginx, но будет использоваться Multi Stage Build.

Dockerfile:

FROM node:latest as build
ENV NODE_ENV=production
WORKDIR /usr/src/app
COPY ["package.json", "package-lock.json*", "./"]
RUN npm install --production --silent && mv node_modules ../
COPY . .
RUN ["npm", "run", "build"]

FROM nginx:alpine as base
EXPOSE 80
COPY --from=build /usr/src/app/build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

На первом этапе (stage) мы собирает наше ReactJS приложение, после чего оно находится в папке /usr/src/app/build. А потом просто копируем его в nginx. Для этого подойдет и конфигурация по-умолчанию. Также если это просто для теста, то не думаю, что вам стоит заморачиваться с SSL, т.к. это потребует создания self-signed сертификатов, которым браузеры по-умолчанию не доверяют и сайт не откроется (нужно будет менять настройки браузера или ОС). Но, если интересно, про то как можно это сделать написано тут и тут.

docker-compose.yml

version: '3'
services: 
  app:
    build: ./react-app
    ports: 
      - "80:80"

БЛОГ НА HUSL

Как подключить React контейнер к контейнеру nginx

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