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

零、前言

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

一、问题复现

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

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

错误的思路

一开始没有注意vendor的这个报错，转而去查看网络、前端代码的问题：

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

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

二、解决问题

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

①找到配置文件

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

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

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

我电脑上的配置文件在/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使更改生效：

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

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

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

③查看日志，排查问题

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

然后查看日志:

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"

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

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

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

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

总结

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

版权声明

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