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

尹云溪

目录

• 问题
  
• 解决的思路：
  
  
  
  • 1、查看日志：
    
  • 2、分析
    
  • 3、查找
    
  • 4、采用二级域名
    
  • 5、再查日志
    
  • 6、再分析
    
  • 7、再查找
    
  • 8、添加多一个location
    
  • 9、完整的配置文件
    
  • 10、小结
    
  
  

问题

服务器上有两个web服务ab分别指向3000、3001两个端口，使用nginx进行反向代理，配置文件如下：

1. server {
   
2.     listen 80;
   
3.     server_name www.example.com;
   
4.    
   
5.         location /a/ {
   
6.             proxy_pass http://localhost:3000;
   
7.             proxy_set_header Host $host;
   
8.             proxy_set_header X-Real-IP $remote_addr;
   
9.             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   
10.             proxy_set_header X-Forwarded-Proto $scheme;
    
11.         }
    
12. }
    
13. 
    
14. server {
    
15.     listen 80;
    
16.     server_name www.example.com;
    
17. 
    
18.     location /b/ {
    
19.         proxy_pass http://localhost:3001;
    
20.         proxy_set_header Host $host;
    
21.         proxy_set_header X-Real-IP $remote_addr;
    
22.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
23.         proxy_set_header X-Forwarded-Proto $scheme;
    
24.     }
    
25. }

复制代码

配置好后，重载：

1. sudo systemctl reload nginx

复制代码

用浏览器访问：www.example.com/a/，浏览器是白屏，没有显示任何内容。

解决的思路：


1、查看日志：

1. `tail -n 10 /var/log/nginx/error.log`

复制代码

显示内容如下：

1. [error] 1104804#1104804: *10 open()“/usr/share/nginx/html/static/css/main.54631fc9.css” failed (2: Nosuch file or directory), client: 18.81.26.177, server:www.example.com, request: “GET /static/css/main.54631fc9.cssHTTP/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、查找

1. find / -name main.54631fc9.css

复制代码

结果什么都没有找到

4、采用二级域名

配置文件调整如下：

1. server {
   
2.     listen 80;
   
3.     server_name a.example.com;
   
4. 
   
5.     location / {
   
6.         proxy_pass http://localhost:3000;
   
7.         proxy_set_header Host $host;
   
8.         proxy_set_header X-Real-IP $remote_addr;
   
9.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   
10.         proxy_set_header X-Forwarded-Proto $scheme;
    
11.     }
    
12. }
    
13. 
    
14. server {
    
15.     listen 80;
    
16.     server_name b.example.com;
    
17. 
    
18.     location / {
    
19.         proxy_pass http://localhost:3001;
    
20.         proxy_set_header Host $host;
    
21.         proxy_set_header X-Real-IP $remote_addr;
    
22.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
23.         proxy_set_header X-Forwarded-Proto $scheme;
    
24.     }
    
25. }

复制代码

重载Nginx
在浏览器上b.example.com访问正常，但a.example.com显示Nginx的欢迎页面，并未访问到正确的web页面。

5、再查日志

1. `tail -n 10 /var/log/nginx/error.log`

复制代码

显示内容如下：

1. [error] 1106994#1106994: *780 open()“/usr/share/nginx/html/favicon.ico” failed (2: No such file ordirectory), 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、再查找

1. find / -name favicon.ico

复制代码

找到/favicon.ico文件在以下目录：

1. /usr/local/src/a/web/berry/public/favicon.ico
   
2. /usr/local/src/a/web/default/public/favicon.ico

复制代码

8、添加多一个location

1.     location = /favicon.ico {
   
2.         alias /usr/local/src/a/web/berry/public/favicon.ico;
   
3.     }

复制代码

a应用能正常访问了。

9、完整的配置文件

1. server {    listen 80;    server_name a.example.com;    location = /favicon.ico {
   
2.         alias /usr/local/src/a/web/berry/public/favicon.ico;
   
3.     }    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配置访问白屏内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

解心诺

顶顶更健康！！！

狂三我真爱

感谢楼主分享。

赖绮梦

感谢楼主，顶。