由于配置nginx转发导致页面一片空白的解决办法及排查过程

零、前言

这个一年没有登录的账号,终于又迎来了更新。考研结束后还没玩爽,又马上回归到敲代码的工作中。一年没接触coding,水平有所下降,请见谅。

一、问题复现

装好nginx后,在全局配置文件中引入项目的配置文件,测试通过,nginx开始运行。

由于配置nginx转发导致页面一片空白的解决办法及排查过程_第1张图片

但在浏览器访问nginx端口时,显示的页面只是一片空白,无论如何刷新都是空白,使用谷歌、火狐等不同浏览器症状相同,并且控制台显示vender.js加载失败:

由于配置nginx转发导致页面一片空白的解决办法及排查过程_第2张图片
由于配置nginx转发导致页面一片空白的解决办法及排查过程_第3张图片

错误的思路

一开始没有注意vendor的这个报错,转而去查看网络、前端代码的问题:
由于配置nginx转发导致页面一片空白的解决办法及排查过程_第4张图片

其实网络面板也写了vendor出错但我又一次没当回事,
又单独跑了一遍前端代码,不用nginx转发,可以正常显示,
用nginx转发其他项目,也能正常显示,

只有用nginx转发这个项目会出错。

二、解决问题

翻阅了一下网上的博客,是缓存目录权限问题,修复一下权限问题即可解决。
但这样写这篇博客就没有意义了,本文更重要的意义在于自己动手把问题排查出来。

①找到配置文件

首先,由于系统不同、安装方法不同,导致不同用户安装的nginx配置文件是不一致的,我们要找到自己电脑上的配置文件,

使用nginx -t可以查出当前nginx的配置文件在哪个位置:

nginx -t //测试nginx配置文件并返回文件位置

image.png

我电脑上的配置文件在/opt/homebrew/etc/nginx/nginx.conf
(这个路径与网上大多数是不同的,所以我们查资料时,不要照搬,而要结合实际情况具体问题具体分析)

②启用日志

接下来需要启用日志功能,以便定位问题,日志功能在配置文件中开启:

vim /opt/homebrew/etc/nginx/nginx.conf //编辑配置文件,启用日志功能

文件内容如下:

#user  nobody;
worker_processes  1;

#error_log   error.log; // 此处的注释就是配置文件的示例代码
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;
// (此处略去其他内容)

文件中给出了几个例子,我们仿照着在下面加一行,路径写到自己电脑的某个路径中,例如我用的/var/log/nginx/error.log,也可以改成其他:


#user  nobody;
worker_processes  1;

#error_log  error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
error_log   /var/log/nginx/error.log  info; //把错误日志写到某个路径下
#pid        logs/nginx.pid;

保存退出后,用nginx -s reload使更改生效:
由于配置nginx转发导致页面一片空白的解决办法及排查过程_第5张图片

我们还必须保证日志写入的路径有权限,需要:

// 给日志文件夹加入读、写、执行权限
sudo chmod -R 777 /var/log/nginx/  

接下来nginx就会自动往/var/log/nginx/error.log这个文件里面写入日志了

③查看日志,排查问题

我们在浏览器里面刷新几下,为的是让nginx更新几条日志。

由于配置nginx转发导致页面一片空白的解决办法及排查过程_第6张图片

然后查看日志:

cat /var/log/nginx/error.log

日志中会出现一大堆类似下面的信息:

2021/12/31 15:33:00 [crit] 92317#0: *9819 open() "/opt/homebrew/var/run/nginx/proxy_temp/2/64/0000000642" failed (13: Permission denied) while reading upstream, client: 127.0.0.1, server: 127.0.0.1, request: "GET /vendor.js HTTP/1.1", upstream: "http://127.0.0.1:4201/vendor.js", host: "localhost:8015", referrer: "http://localhost:8015/login/login"
2021/12/31 15:33:01 [crit] 92317#0: *9811 open() "/opt/homebrew/var/run/nginx/proxy_temp/3/64/0000000643" failed (13: Permission denied) while reading upstream, client: 127.0.0.1, server: 127.0.0.1, request: "GET /vendor.js HTTP/1.1", upstream: "http://127.0.0.1:4201/vendor.js", host: "localhost:8015", referrer: "http://localhost:8015/login/login"
2021/12/31 15:33:01 [crit] 92317#0: *9846 open() "/opt/homebrew/var/run/nginx/proxy_temp/4/64/0000000644" failed (13: Permission denied) while reading upstream, client: 127.0.0.1, server: 127.0.0.1, request: "GET /vendor.js HTTP/1.1", upstream: "http://127.0.0.1:4201/vendor.js", host: "localhost:8015", referrer: "http://localhost:8015/login/login"

image.png

在计算机中,人是不能相信自己的眼睛的,只能相信实实在在的计算机返回的信息!
只有看了日志,才能石锤就是权限的问题,是/opt/homebrew/var/run/nginx/这个缓存目录没有权限,
于是我们输入:

sudo chmod -R 777 /opt/homebrew/var/run/nginx/ 

这样就解决了权限问题,再次刷新,页面不再空白,日志也不再报错了。

由于配置nginx转发导致页面一片空白的解决办法及排查过程_第7张图片

这种解决思路也适用于其他问题。

总结

一、不要忽视细节,一旦错过了重要的细节,就会多走弯路
二、对于网络上的资料不要照搬,而是结合自己电脑的实际情况具体分析

版权声明

本文作者: 河北工业大学梦云智开发团队 - 刘宇轩
新人经验不足,有建议欢迎交流,有错误欢迎轻喷

你可能感兴趣的:(nginx日志分析前后端分离)