Nginx 踩坑 —— 自定义位置静态资源

nginx [Engine X] is an HTTP and reverse proxy server, a mail proxy server, and a generic TCP/UDP proxy server, originally written by Igor Sysoev.

写在前面

打算写一个长期系列，把从现在到将来 nginx 中遇到的大坑小坑都介绍一遍。这样做不仅方便自己到时候查阅，也方便遇到同样问题的人能快速解决。

起因

项目后端之前变更为了 flask 框架 + rest 模式，然后通过 gunicorn + supervisor + nginx 部署在 CentOS7 服务器上。最近客户端需要访问服务器提供的静态资源（图片）。我按照正常的配置静态资源的方式在 flask 中配置了静态资源，目录树：

├─.idea
│  └─inspectionProfiles
├─app
│  ├─api_dev
│  ├─api_error
│  ├─api_stable
│  ├─static
│  │  └─images
│  └─templates
├─migrations
└─test

在 app/static/images 文件夹下有一个 test.png 测试图片。在 Win10 本地运行项目，访问 http://127.0.0.1:5000/static/images/test.png 可以正常看到测试图片，但是当部署到服务器后，无法正常访问图片。

排查原因

在 Win10 和手机浏览器访问 https://xxx.com/static/images/test.png 都显示 404 Not Found。

在云服务器使用命令：

curl 127.0.0.1:5000/static/images/test.png

发现结果是乱码：

说明成功访问到了图片资源。

以上测试说明，服务器端代码没有问题。那么问题一定出在 gunicorn + supervisor + nginx 其中的一环，没错，一定是 nginx 配置有问题。

nginx 配置

由于我是用的是 lnmp 一键安装包，所以 nginx 配置是自动生成的，检查配置文件 /use/local/nginx/conf/vhost/xxx.com.conf 发现并没有对静态资源做相应的配置。我们之前出错的页面显示的是 404 Not Found 说明 nginx 并没有找到我们的静态文件。

因为使用了 vhost，所以配置文件中默认的 root 地址并不是我们项目的地址，我首先尝试修改 root 值为 /path/to/project/root/app 但是没有解决问题。

因为是 flask 项目，使用 nginx 做反向代理，所以我尝试这在 proxy_pass 中配置了静态资源的路径。这次尝试不说也罢，说到底还是不熟悉 nginx。

解决问题

通过 Google 发现，需要自己配置静态文件的路径。在参考了 StackOverflow 上部分配置文件的内容后终于成功了！

location ^~ /static {
    root /path/to/project/root/app/;
    expires 30d;
}

还记得我的目录树吗？不记得了可以往上翻。请记住，如果你这样写，root 的路径一定是 static 目录的上层目录。

总结

出现问题，一步一步排查缩小可能出现问题的范围，发现问题原因，尝试手动解决，谷歌、StackOverflow、官方文档，解决问题。按照着这个步骤走下去，大部分 Linux 上的问题都可以成功解决的吧！

nginx 作为一个十分优秀的 HTTP 和反向代理服务器，十分值得我们深入去学习。