Angular 7，NGINX和Docker刷新页面时出现404错误 [英] 404 Error on page refresh with Angular 7, NGINX and Docker
本文介绍了Angular 7，NGINX和Docker刷新页面时出现404错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个用Angular 7编写的应用程序，正在使用NGINX部署到Docker容器中.当我运行容器时，除了如果我在浏览器(F5)中刷新页面，我都会得到一个NGINX 404错误页面.
I have an application written in Angular 7 that I am deploying to a Docker container with NGINX. When I run the container, everything works perfectly except that if i Refresh the page in the browser (F5) I get an NGINX 404 error page.
这是我的nginx.conf文件，从中可以看到我尝试过的"try_files"
Here is my nginx.conf file from which you can see ive tried "try_files"
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;
#tcp_nopush on;
keepalive_timeout 65;
gzip on;
include /etc/nginx/conf.d/*.conf;
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri /index.html;
}
}
}
我的Dockerfile:
My Dockerfile:
FROM node:alpine as builder
RUN apk update && apk add --no-cache make git
WORKDIR /app
COPY package.json package-lock.json /app/
RUN cd /app && npm install
COPY . /app
RUN cd /app && npm run build
FROM nginx:alpine
RUN rm -rf /usr/share/nginx/html/* && rm -rf /etc/nginx/nginx.conf
COPY ./nginx.conf /etc/nginx/nginx.conf
COPY --from=builder /app/dist/hyper-client-admin /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
已部署容器上的目录为:
Directory on the deployed container is:
/usr/share/nginx/html # ls -la
total 23564
drwxr-xr-x 1 root root 4096 May 20 00:18 .
drwxr-xr-x 1 root root 4096 Mar 8 03:05 ..
drwxr-xr-x 2 root root 4096 May 20 00:18 assets
-rw-r--r-- 1 root root 290728 May 20 00:18 es2015-polyfills.js
-rw-r--r-- 1 root root 211178 May 20 00:18 es2015-polyfills.js.map
-rw-r--r-- 1 root root 997 May 20 00:18 favicon.png
-rw-r--r-- 1 root root 770 May 20 00:18 index.html
-rw-r--r-- 1 root root 114749 May 20 00:18 main.js
-rw-r--r-- 1 root root 115163 May 20 00:18 main.js.map
-rw-r--r-- 1 root root 241546 May 20 00:18 polyfills.js
-rw-r--r-- 1 root root 240220 May 20 00:18 polyfills.js.map
-rw-r--r-- 1 root root 6224 May 20 00:18 runtime.js
-rw-r--r-- 1 root root 6214 May 20 00:18 runtime.js.map
-rw-r--r-- 1 root root 1117457 May 20 00:18 styles.js
-rw-r--r-- 1 root root 1191427 May 20 00:18 styles.js.map
-rw-r--r-- 1 root root 10048515 May 20 00:18 vendor.js
-rw-r--r-- 1 root root 10505601 May 20 00:18 vendor.js.map
这是控制台输出:
172.17.0.1 - - [20/May/2019:00:18:30 +0000] "GET / HTTP/1.1" 200 371 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36" "-"lopment\hyper-client-admin>
172.17.0.1 - - [20/May/2019:00:18:30 +0000] "GET /runtime.js HTTP/1.1" 200 6224 "http://localhost:81/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36" "-"
172.17.0.1 - - [20/May/2019:00:18:30 +0000] "GET /polyfills.js HTTP/1.1" 200 241546 "http://localhost:81/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36" "-"
172.17.0.1 - - [20/May/2019:00:18:30 +0000] "GET /main.js HTTP/1.1" 200 114749 "http://localhost:81/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/74.0.3729.157 Safari/537.36" "-"
172.17.0.1 - - [20/May/2019:00:18:30 +0000] "GET /styles.js HTTP/1.1" 200 1117457 "http://localhost:81/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36" "-"
172.17.0.1 - - [20/May/2019:00:18:30 +0000] "GET /vendor.js HTTP/1.1" 200 10048515 "http://localhost:81/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36" "-"
172.17.0.1 - - [20/May/2019:00:18:31 +0000] "GET /assets/logo-white.svg HTTP/1.1" 200 4519 "http://localhost:81/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,
like Gecko) Chrome/74.0.3729.157 Safari/537.36" "-"
172.17.0.1 - - [20/May/2019:00:18:31 +0000] "GET /favicon.png HTTP/1.1" 200 997 "http://localhost:81/login" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36" "-"
172.17.0.1 - - [20/May/2019:00:18:35 +0000] "GET /login HTTP/1.1" 404 188 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36" "-"
2019/05/20 00:18:35 [error] 6#6: *4 open() "/usr/share/nginx/html/login" failed (2: No such file or directory), client: 172.17.0.1, server: localhost, request: "GET /login HTTP/1.1", host: "localhost:81"
有什么想法吗?
更新:对此的实际答案在于@Rajesh的答案的注释.问题是我正在/etc/nginx/nginx.conf上工作，而我需要在/etc/nginx/conf.d/default.conf 上工作
推荐答案
在Angular应用中进行刷新后，我们需要告诉nginx Web服务器首先查看index.html文件(如果请求的路由存在或不存在)，然后再显示错误页面.这对我来说很好:
With a refresh on Angular app, we need to tell nginx web server to first look at the index.html file if the requested route exists or not before showing the error page. This is working fine for me:
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
这篇关于Angular 7，NGINX和Docker刷新页面时出现404错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
