如何修复NGINX服务的已部署Angular应用程序上的404错误

我有一个已经部署在服务器上的应用程序，问题是每次重新加载某个页面时，都会出现NGINX的404错误。我正在使用Docker运行应用程序。下面是我的NGINX配置文件

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;

    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
    if ($request_method = 'POST') {
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
      add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }
    if ($request_method = 'GET') {
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
      add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }
  }
}

Dockerfile

我用于运行docker文件的命令：

docker build --rm -f "Dockerfile" -t e-county:v1 .

docker run --rm -d -p 80:80 e-county:v1

我的default.conf文件包含一个try_文件，其中/index.html作为备用：

server {
    listen 80;
    server_name <obfuscated>;

    root /usr/share/nginx/html;
    index index.html;
    include /etc/nginx/mime.types;

    gzip on;
    gzip_min_length 1000;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

---

我最终找到了下面的码头工人

Dockerfile

---

nginx是否要在Docker容器之外路由到您的应用程序？你是如何为你的应用服务的？你肚子里是什么Dockerfile@Carsten我已经添加了docker文件以获取更多详细信息。您正在Dockerfile中使用默认的nginx配置来为应用程序提供服务吗？默认配置具有try_files$uri$uri/=404；。我的try_文件是try_文件$uri$uri//index.html；以确保返回到index.html。我创建了一个default.conf文件，并在Dockerfile中使用这个文件将其复制到默认配置位置：COPY default.conf/etc/nginx/conf.d/。要我发布一个包含文件内容的答案吗？@Carsten确定您可以共享我想检查Dockerfile和default，conf文件我没有做的是用docker文件覆盖Nginx default config？我使用了您的default.conf文件confs，它已经工作了。

server {
    listen 80;
    server_name <obfuscated>;

    root /usr/share/nginx/html;
    index index.html;
    include /etc/nginx/mime.types;

    gzip on;
    gzip_min_length 1000;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

FROM nginx:alpine

RUN rm -rf /usr/share/nginx/html/*

COPY default.conf /etc/nginx/conf.d/

COPY dist /usr/share/nginx/html

# stage 1 
FROM node:latest as node 

WORKDIR /app

COPY . .


RUN npm i -f

RUN npm audit fix

# RUN npm install 

RUN npm run build --aot

# stage 2 
FROM nginx:alpine 


RUN rm -rf /usr/share/nginx/html/*

COPY  --from=node /app/nginx/*  /etc/nginx/conf.d/default.conf
COPY --from=node /app/dist/e-county /usr/share/nginx/html