nginx配置后访问出现白屏的问题解决
问题
服务器上有两个web服务ab分别指向3000、3001两个端口，使用nginx进行反向代理，配置文件如下：
server {
listen 80;
server_name www.example.com;
location /a/ {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
server {
listen 80;
server_name www.example.com;
location /b/ {
proxy_pass http://localhost:3001;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
配置好后，重载：sudo systemctl reload nginx用浏览器访问：www.example.com/a/，浏览器是白屏，没有显示任何内容。
解决的思路：
1、查看日志：
`tail -n 10 /var/log/nginx/error.log`
显示内容如下：
[error] 1104804#1104804: *10 open()
“/usr/share/nginx/html/static/css/main.54631fc9.css” failed (2: No
such file or directory), client: 18.81.26.177, server:
www.example.com, request: “GET /static/css/main.54631fc9.css
HTTP/1.1”, host: “www.example.com”, referrer:
“http://www.example.com/a/”
2、分析
根据错误日志，Nginx正在尝试在/usr/share/nginx/html/static/css/目录下查找main.54631fc9.css文件，但是没有找到。这是因为我的web应用在/a路径下寻找静态文件，但是Nginx在默认的静态文件目录下查找。
3、查找
find / -name main.54631fc9.css
结果什么都没有找到
4、采用二级域名
配置文件调整如下：
server {
listen 80;
server_name a.example.com;
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
server {
listen 80;
server_name b.example.com;
location / {
proxy_pass http://localhost:3001;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
重载Nginx
在浏览器上b.example.com访问正常，但a.example.com显示Nginx的欢迎页面，并未访问到正确的web页面。
5、再查日志
`tail -n 10 /var/log/nginx/error.log`
显示内容如下：
[error] 1106994#1106994: *780 open()
“/usr/share/nginx/html/favicon.ico” failed (2: No such file or
directory), client: 18.81.26.177, server: example.com, request: “GET
/favicon.ico HTTP/1.1”, host: “a.example.com”, referrer:
“http://a.example.com/”
6、再分析
根据错误日志中的提示信息，可以看到请求的是/favicon.ico文件，但是在/usr/share/nginx/html/目录下找不到该文件。因此，与该错误相关的语句是代理到a.example.com的location块中的proxy_pass语句。这条语句将请求代理到localhost:3000，而不是/usr/share/nginx/html/目录下的文件。
7、再查找
find / -name favicon.ico
找到/favicon.ico文件在以下目录：
/usr/local/src/a/web/berry/public/favicon.ico /usr/local/src/a/web/default/public/favicon.ico
8、添加多一个location
location = /favicon.ico {
alias /usr/local/src/a/web/berry/public/favicon.ico;
}
a应用能正常访问了。
9、完整的配置文件
server {
listen 80;
server_name a.example.com;
location = /favicon.ico {
alias /usr/local/src/a/web/berry/public/favicon.ico;
}
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
server {
listen 80;
server_name b.example.com;
location / {
proxy_pass http://localhost:3001;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
10、小结
nginx配置后遇到问题，查error.log是解决问题的关键，通过仔细分析里面的错误提示信息，不难找到解决的办法。
到此这篇关于nginx配置后访问出现白屏的问题解决的文章就介绍到这了,更多相关nginx配置访问白屏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
nginx 配置静态缓存及静态缓存文件没有生成的问题及解决方案
这篇文章主要介绍了nginx 配置静态缓存及静态缓存文件没有生成的问题及解决方案,本文分步骤结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-11-11
虽然nginx的源码非常精致，但是不得不说开发nginx很有挑战性，越想更大程度上定制自己的模块，越需要对nginx的每个细节了解颇深。2015-08-08
这篇文章主要给大家介绍了Nginx 502 Bad Gateway 错误的原因及解决方法,在php服务当中,有两个参数非常的重要：max_requestst和max_children,具体的原因必须要查看日志才可以弄明白,接下就和小编一起来看看具体原因及解决方法吧2023-08-08
这篇文章主要介绍了为Nginx启用Brotli压缩算法的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了CentOS7安装Nginx并配置自动启动的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了nginx日志导入elasticsearch的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了Nginx处理跨域问题小结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-01-01
本文介绍下，重启nginx服务后丢失nginx.pid文件的解决方法，有需要的朋友，可以作个参考2014-01-01
nginx作为一款高性能的服务器,用途很多,下面这篇文章主要给大家介绍了Nginx多种匹配方式的相关资料,文中通过图文介绍的介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了给小白的 Nginx 30分钟入门指南(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
最新评论