代码之家 › 专栏 › 技术社区 › Philip Mutua

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

nginx angular

Philip Mutua · 技术社区 · 5 年前

我有一个应用程序,我已经部署在服务器上的问题,每次我重新加载某个页面,我得到一个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文件

# 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 
COPY --from=node /app/dist/e-county /usr/share/nginx/html

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

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

0 回复 | 直到 5 年前

Carsten 5 年前

我的 default.conf 文件包含 try_files 具有 /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;
    }
}

我的文件如下所示:

FROM nginx:alpine

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

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

COPY dist /usr/share/nginx/html

Philip Mutua 5 年前

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

Dockerfile文件

# 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