Обслуживайте React с помощью docker и nginx, который уже обслуживает django

Я создаю веб-приложение, используя django + react + nginx + docker технологический стек.

Я могу успешно обслуживать мой django REST API, панель администратора и его статические файлы с помощью nginx, но не могу обслуживать react приложение после сборки. Я вижу логотип вкладки браузера, но кажется, что мой index.html не найден. Я получаю кучу 404 в журналах. Кажется, что он всегда ищет внутри каталога django /var/www/staticfiles.

Я докеризировал все компоненты веб-приложения, и вот соответствующие компоненты, которые будут использоваться, как только я получу docker-compose в рабочем состоянии:

Мой docker-compose.yml:

version: "3.9"

services:
  client:
    build:
      context: ../client/
    container_name: my_client
    image: my/client
    networks:
      - my_network
    volumes:
      - client:/client/build

  ...

  nginx:
    container_name: my_nginx_server
    image: nginx
    depends_on:
      - client
      - web_service
    networks:
      - my_network
    ports:
      - 80:80
      - 8080:8080
    restart: always
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
      - client:/var/www/client
      - static:/var/www/staticfiles/static

networks:
  my_network:
    driver: bridge

volumes:
  client:
  db:
  static:

Когда я осматриваю контейнер nginx, все файлы успешно находятся внутри /var/www/client.

Мое приложение react Dockerfile:

FROM node:14.17.5-alpine as build

WORKDIR /usr/src/client

# Set up env
ENV PATH /client/node_modules/.bin:$PATH

# Install app dependencies
COPY ./ ./
RUN yarn install --silent

# Create build dir
RUN yarn build 

FROM node:14.17.5-alpine

WORKDIR /usr/src/client

# Copy build dir only
COPY --from=build /usr/src/client/build ./build

Мой nginx/default.conf:

server {
    listen 80 default_server;

    location / {
        root /var/www/client;
        index index.html index.htm;

        try_files $uri $uri/ /index.html?$args;
    }

    location /admin/ {
        proxy_pass http://web_service:8000;
        proxy_set_header Host $http_host;
    }

    location /api/ {
        proxy_pass http://web_service:8000;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header Host $http_host;
    }

    location /static/ {
        autoindex on;
        root /var/www/staticfiles;
    }
}

Когда я перехожу к 127.0.0.1, я получаю эти журналы из nginx:

$ dc logs | grep nginx                                                                                                    ...
my_nginx_server | 172.24.0.1 - - [16/Aug/2021:10:17:43 +0000] "GET /static/js/main.49614f6d.chunk.js HTTP/1.1" 404 555 "http://127.0.0.1/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36" "-"
my_nginx_server | 2021/08/16 10:17:43 [error] 24#24: *2 open() "/var/www/staticfiles/static/js/main.49614f6d.chunk.js" failed (2: No such file or directory), client: 172.24.0.1, server: , request: "GET /static/js/main.49614f6d.chunk.js HTTP/1.1", host: "127.0.0.1", referrer: "http://127.0.0.1/"
my_nginx_server | 2021/08/16 10:17:43 [error] 24#24: *3 open() "/var/www/staticfiles/static/js/2.293e7321.chunk.js" failed (2: No such file or directory), client: 172.24.0.1, server: , request: "GET /static/js/2.293e7321.chunk.js HTTP/1.1", host: "127.0.0.1", referrer: "http://127.0.0.1/"
my_nginx_server | 172.24.0.1 - - [16/Aug/2021:10:17:43 +0000] "GET /static/js/2.293e7321.chunk.js HTTP/1.1" 404 555 "http://127.0.0.1/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36" "-"
my_nginx_server | 172.24.0.1 - - [16/Aug/2021:10:17:43 +0000] "GET /static/css/main.11ea6c4e.chunk.css HTTP/1.1" 404 555 "http://127.0.0.1/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36" "-"
my_nginx_server | 2021/08/16 10:17:43 [error] 24#24: *1 open() "/var/www/staticfiles/static/css/main.11ea6c4e.chunk.css" failed (2: No such file or directory), client: 172.24.0.1, server: , request: "GET /static/css/main.11ea6c4e.chunk.css HTTP/1.1", host: "127.0.0.1", referrer: "http://127.0.0.1/"
my_nginx_server | 172.24.0.1 - - [16/Aug/2021:10:17:43 +0000] "GET /static/js/2.293e7321.chunk.js HTTP/1.1" 404 555 "http://127.0.0.1/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36" "-"
my_nginx_server | 2021/08/16 10:17:43 [error] 24#24: *2 open() "/var/www/staticfiles/static/js/2.293e7321.chunk.js" failed (2: No such file or directory), client: 172.24.0.1, server: , request: "GET /static/js/2.293e7321.chunk.js HTTP/1.1", host: "127.0.0.1", referrer: "http://127.0.0.1/"
my_nginx_server | 2021/08/16 10:17:43 [error] 24#24: *2 open() "/var/www/staticfiles/static/js/main.49614f6d.chunk.js" failed (2: No such file or directory), client: 172.24.0.1, server: , request: "GET /static/js/main.49614f6d.chunk.js HTTP/1.1", host: "127.0.0.1", referrer: "http://127.0.0.1/"
my_nginx_server | 172.24.0.1 - - [16/Aug/2021:10:17:43 +0000] "GET /static/js/main.49614f6d.chunk.js HTTP/1.1" 404 555 "http://127.0.0.1/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36" "-"

Я не могу найти, что здесь не так, и не уверен, что делать дальше. Не могли бы вы дать совет?

Вернуться на верх