Docker撰写与Nginx页面刷新给出404

Question

我正在使用docker compose来提供前端(vue.js)、后端和nginx反向代理。

当我导航到路由并点击刷新时，我得到一个404 nginx错误。

这是我的docker撰写的一部分，为了简洁省略了几行

version: '3'
services:
# Proxies requests to internal services
dc-reverse-proxy:
image: nginx:1.17.10
container_name: reverse_proxy_demo
depends_on:
- dc-front-end
- dc-back-end
volumes:
- ./reverse_proxy/nginx.conf:/etc/nginx/nginx.conf
ports:
- 5004:80

dc-front-end:
..
container_name: dc-front-end
ports:
- 8080:80

# API
dc-back-end:
container_name: dc-back-end
ports:
- 5001:5001

这里是nginx.conf，它属于反向代理服务

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;
events {
worker_connections 1024;
}
http {
server {
listen 80;
server_name 127.0.0.1;
location / {
proxy_pass          http://dc-front-end:80;
proxy_set_header    X-Forwarded-For $remote_addr;
}
location /dc-back-end/ {
proxy_pass          http://dc-back-end:5001/;
proxy_set_header    X-Forwarded-For $remote_addr;
}
}

}

这是前端的nginx.conf

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
worker_connections  1024;
}
http {
include            /etc/nginx/mime.types;
default_type       application/octet-stream;
log_format  main   '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log         /var/log/nginx/access.log  main;
sendfile           on;
keepalive_timeout  65;
server {
listen       80;
server_name  localhost;
root   /app;
#root   /usr/share/nginx/html;
location / {
index  index.html;
try_files $uri $uri/ /index.html;
}
error_page   500 502 503 504  /50x.html;
location = /50x.html {
root   /usr/share/nginx/html;
}
}
}

最后是前端服务的docker文件

# build stage
FROM node:16-alpine3.12 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

我已经尝试在两个nginx文件中使用try_files $uri $uri/ /index.html;，但它仍然在页面刷新时给出404，或者如果我尝试导航到浏览器中的页面(而不是单击链接)

Answer 1

像往常一样，Stackoverflow的法则规定，一旦你发布了问题，你只能解决自己的问题。

docker文件错误。

FROM node:16-alpine3.12 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build
FROM nginx:stable-alpine as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80