脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网站技巧 → 服务器 → 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日志轮转与定时启动脚本的实现

    Nginx日志轮转与定时启动脚本的实现

    本文主要介绍了Nginx日志轮转与定时启动脚本的实现,通过批处理脚本rotate-logs.bat实现日志轮转,使用start-nginx.bat启动和重启Nginx服务,借助Windows任务计划程序每日凌晨自动执行日志轮转,确保Nginx服务正常启动,感兴趣的可以了解一下
    2026-04-04
  • Nginx 启用 OCSP Stapling的配置

    Nginx 启用 OCSP Stapling的配置

    本篇文章主要介绍了Nginx 启用 OCSP Stapling的配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Nginx之https证书配置实现

    Nginx之https证书配置实现

    本文主要介绍了Nginx之https证书配置的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-12-12
  • Nginx手动编译、安装超详细教程

    Nginx手动编译、安装超详细教程

    Nginx安装除了编译以外,我们还可以直接用操作系统上自带的工具比如说yum、apt-get直接安装,这篇文章主要介绍了Nginx手动编译、安装超超详解,需要的朋友可以参考下
    2023-09-09
  • Nginx中rewrite(地址重定向)的深入剖析

    Nginx中rewrite(地址重定向)的深入剖析

    Rewrite主要实现url地址重写,以及url地址跳转,下面这篇文章主要给大家介绍了关于Nginx中rewrite(地址重定向)的深入剖析,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Nginx监控模块(vts模块)详解

    Nginx监控模块(vts模块)详解

    国内用Nginx的比较多,下面这篇文章主要给大家介绍了关于Nginx监控模块(vts模块)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Nginx Socket代理的实现方法

    Nginx Socket代理的实现方法

    Nginx的socket代理通常指的是Nginx通过stream模块来处理非HTTP的 TCP 流量,本文就来介绍一下Nginx Socket代理的实现方法,具有一定的参考价值,感兴趣的可以了解一下
    2024-04-04
  • Nginx服务状态监控的方法

    Nginx服务状态监控的方法

    这篇文章主要介绍了Nginx服务状态监控的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • nginx实现反向代理出现502的问题解决

    nginx实现反向代理出现502的问题解决

    本文主要介绍了nginx实现反向代理出现502的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-08-08
  • Nginx+cpolar实现内网穿透多个Windows Web站点端口的步骤详解

    Nginx+cpolar实现内网穿透多个Windows Web站点端口的步骤详解

    这篇文章主要给大家介绍了Nginx+cpolar实现内网穿透多个Windows Web站点端口的详细步骤,文章通过图文介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-10-10

最新评论