脚本之家

电脑版
提示:原网页已由神马搜索转码, 内容由www.jb51.net提供.
您的位置:首页网站技巧服务器nginx→ nginx配置访问白屏

nginx配置后访问出现白屏的问题解决

  更新时间:2024年06月12日 09:18:46  作者:weixin_43425561 
本文主要介绍了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-naxsi白名单规则详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
      2019-08-08
    • 这篇文章主要介绍了Linux下Nginx负载均衡多个tomcat配置的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2019-04-04
    • gzip是针对于请求实时进行压缩,cpu开销大,gzip_static 完全可以在编译后使用压缩工具搞出来,下面这篇文章主要给大家介绍了如何通过一篇文章读懂nginx的gzip_static模块,需要的朋友可以参考下
      2022-05-05
    • 最近在工作中遇到了一个问题,发现nginx cache居然不缓存,后来通过查找网上的资料找到了原因和解决方案,下面整理好分享给大家,同样遇到这个问题的朋友们可以参考借鉴,下面和小编一起来学习学习吧。
      2016-10-10
    • 这篇文章主要介绍了使用nginx同域名下部署多个vue项目并使用反向代理的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2019-02-02
    • 这篇文章主要介绍了nginx搭建文件服务器,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
      2023-06-06
    • nginx是一款优秀的反向代理工具,通过Nginx自带的rtmp模块,也可以实现rtmp服务器的搭建,本文主要介绍了nginx临时搭建rtmp服务器,具有一定的参考价值,感兴趣的可以了解一下
      2024-02-02
    • 这篇文章主要介绍了CentOS 6.3安装配置Nginx方法,需要的朋友可以参考下
      2014-11-11
    • 这篇文章主要为大家详细介绍了centos6.4下nginx1.12.1安装教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
      2017-07-07
    • 本文主要介绍了Nginx配置虚拟主机的三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
      2023-06-06

    最新评论