Обслуживайте 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" "-"
Я не могу найти, что здесь не так, и не уверен, что делать дальше. Не могли бы вы дать совет?