现在已有一个web网站，域名是www.test.com,使用的是nginx加php搭建的web网站。现在在服务器上的8181端口搭建了一个wiki系统，想使用www.test.com/wiki/来进行访问。百度了下需要使用目录代理，话不多说开始干！

一、配置nginx目录代理

在nginx配置内增加以下配置（注意proxy_pass后面的地址后面有个斜杠‘/’），我是直接插入在下面段配置后的

server
{
listen 80;
server_name copy.ranjuan.cn;

    location /wiki/ {
        proxy_pass http://127.0.0.1:8181/;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header Host            $http_host;
        proxy_set_header   X-Forwarded-Proto $scheme;
        
    }

使用浏览器访问www.test.com/wiki/ 会被nginx代理到 127.0.0.1:8181, 而不是被代理到127.0.0.1:8181/wiki,这个就是proxy_pass 后面的地址带不带斜杠‘/’的区别

配置完后目录代理后发现，使用浏览器访问 www.test.com/wiki/ 发现样式及图片都没有出来，那么下面还要在nginx配置里面把8181端口这个项目的资源目录代理出来！

二、配置静态资源的目录代理

继续加入以下配置，注意static与uploads是我这个8181端口项目请求地址中的带有的路径，正好我现有的www.test.com项目并没有使用到这几个路径，否则可能会导致其中一个原本正常static或uploads目录被定位到另一个项目地址上！

location  ~ (^/static).*  {
        proxy_pass http://127.0.0.1:8181;
        proxy_set_header Host                $host:$server_port;
        proxy_set_header X-Forwarded-For     $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto   $scheme;
        proxy_set_header X-Forwarded-Port    $server_port;
    }
location  ~ (^/uploads).*  {
        proxy_pass http://127.0.0.1:8181;
        proxy_set_header Host                $host:$server_port;
        proxy_set_header X-Forwarded-For     $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto   $scheme;
        proxy_set_header X-Forwarded-Port    $server_port;
    }

至于静态目录代理哪些目录，我使用了两种方法，在8181项目的网页右键查看源码发现使用的是绝对路径引用/static/xxxx/xxx这种。所以在nginx中配置遇到请求url中包含static目录的直接代理到http://127.0.0.1:8181（注意这个后面没有斜杠‘/’），另外页可以在浏览器F12打开调试后的Network中查看哪些请求失败的路径，进行代理！

在此种配置下浏览器访问www.test.com/static/xxxx/x 会被nginx代理到127.0.0.1:8181/static/xxx/x

三、并不是很完美

按照上面配置完毕后，其实并不是很完美，因为正好我的原有web项目没有static和uploads这两个目录，所有直接目录代理问题不大。如果原有项目有的话，那么可以直接将8181的static、uploads目录内的文件直接复制过来（确保不会与已有的静态文件重复）。或者直接改造web项目将静态地址托管到cdn或oss确保与项目独立开来也行。

后面测试发现8181这个项目的登录、分类管理等存在问题又重新增加了相应的目录代理，与其这样不如直接将8181这个项目改造成一个运行于二级目录的web项目，这样直接代理二级目录即可，下面的静态资源这个一个规则就可以搞定了！

再加个备忘的nginx代理配置：

#nginx代理后，如果静态资源无法加载出现404的错误，可以考虑此配置
     #配置静态资源 解决js css文件无法加载无法访问的问题，注意末尾不能有 /
     #location ~ (/static/).*\.(js|css|jpg|jpeg|gif|png|ico|pdf|txt|doc)$ {
     #    proxy_pass http://localhost:8181;
     # }

基于互联网精神，在注明出处的前提下本站文章可自由转载！

本文链接：https://ranjuan.cn/nginx-proxy-pass/