Установить прокси nginx для многоступенчатой сборки react с помощью docker compose

#django #reactjs #docker #nginx

#django #reactjs #docker #nginx

Вопрос:

Я — в очередной раз — очень запутался с nginx, docker и react.

Вот что я хочу: 1.) api Django REST, который предоставляет порт только локально 2.) Я хочу, чтобы статические файлы REST api обрабатывались nginx 3.) интерфейс ReactJS, который обслуживается через nginx на порту 80 (я не знаю, обязательно ли обслуживать react через nginx — но я слышал, что это уменьшает размер изображения).

Проблема: это не работает. Все контейнеры могут запускаться по отдельности, но их обслуживание через docker compose не будет выполняться должным образом. Кажется, я не могу подключиться через прокси к api и интерфейсу.

Я намекаю на свою проблему: я вижу, что изображение, которое я накладываю в ReactJS «tiangolo / node-frontend: 10», также копирует файл nginx.conf, который может перезаписать мой.

Используя миллион руководств, я здесь:

nginx.conf

 upstream website_rest {
        server restapi:8000;
    }

upstream website_frontend {
    server frontend:8080;
}

server {

    listen 80;

    location /rest_call/ {
        proxy_pass http://website_rest;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    location / {
        proxy_pass http://frontend;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    location /rest_call/staticfiles/ {
        alias /usr/src/website-dj/staticfiles/;
    }

}
  

Это файл dockerfile для react:

 # Stage 0, "build-stage", based on Node.js, to build and compile the frontend
FROM tiangolo/node-frontend:10 as build-stage
WORKDIR /website-rj
COPY package*.json /website-rj/
RUN npm install
COPY ./ /website-rj/
RUN npm run build

# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
FROM nginx:1.15
COPY --from=build-stage /website-rj/build/ /usr/share/nginx/html
# Copy the default nginx.conf provided by tiangolo/node-frontend
COPY --from=build-stage /nginx.conf /etc/nginx/conf.d/default.conf
  

Dockercompose:

 version: '3.7'

services:
  frontend:
    expose:
      - 8080
    build: "./website_rj_docker"
    volumes:
      - ./website_rj_docker/build:/usr/src/website-rj/
  restapi:
    build: "./website_dj_docker/"
    # command: python /usr/src/website-dj/manage.py runserver 0.0.0.0:8000 --settings=rest.settings.production
    command: gunicorn rest.wsgi:application --bind 0.0.0.0:8000
    volumes:
      - ./website_dj_docker/:/usr/src/website-dj/
      - static_volume:/usr/src/website-dj/staticfiles
    expose:
      - 8000
    environment:
      - SECRET_KEY='something...'
      - SQL_ENGINE=django.db.backends.postgresql
      - SQL_DATABASE=postgres
      - SQL_USER=something...
      - SQL_PASSWORD=something...
      - SQL_HOST=db
      - SQL_PORT=5432
      - DATABASE=postgres
    depends_on:
      - db
  db:
    image: postgres:10.5-alpine
    volumes:
      - postgres_data:/var/lib/postgresql/data/
  nginx:
    build: ./nginx
    volumes:
      - static_volume:/usr/src/website-dj/staticfiles
    ports:
      - 1337:80
    depends_on:
      - restapi
  

Комментарии:

1. Проблема: тома, определенные в вашем файле docker compose, недоступны во время сборки docker, а только при запуске docker (compose). Единственное решение, которое я вижу, — это иметь узел-контейнер, создающий ваше приложение react в качестве run-CMD, используя ваш том docker, который затем будет доступен из вашего контейнера nginx — также только при запуске docker (compose).

2. Открытая проблема, связанная с монтированием томов docker во время сборки docker: github.com/moby/moby/issues/14080

3. Хороший пример, показывающий, как объединить Docker, react, серверную службу и nginx: github.com/ifischer/django-nginx-reactjs-docker