NginxProxyManager(下文简称NPM)是一个很好用的反代管理器,部署web项目网上很多教程,但是Nginx也可以作为静态资源服务器(html,css,image)等,以下是托管HTML页面的教程.

具体方法就是就是在NPM的每个反代server块中设置location块指定不同路径的请求.

1. 部署静态资源

由于作者的NginxProxyManager是运行在Docker上的,因此静态资源存放于挂载的.../data/static文件夹内,请根据自身需求更改.以下是作者的静态资源文件夹结构:

📂 data
└── 📂 static
    ├── 📄 colorclock.html
    └── 📂 ip
        └── 📄 ip.html

2. 配置代理

在NPM页面新配置一个代理Add Proxy Host:

然后在Advanced选项卡中修改Custom Nginx Configuration并添加location块:

location / {
    root /data/static;
    index colorclock.html;
}

最后点击右下角Save即可.这样,就可以通过访问域名/来访问配置的静态资源.

至此,大功告成.

3. 进阶配置

说是进阶配置,其实就是如何运用location块的问题,熟悉Nginx的同学可以退出了.

如果想其他访问资源路径,例如示例文件夹中的ip文件夹,可以修改location块如下:

location /ip/ {
    root /data/static/;
    index ip.html;
}

这样,当请求URL为域名/ip/时,Nginx会匹配ip目录内设定index名为ip.html的文件.

如果是不常变动的静态资源,可以通过expires命令来控制页面缓存,expires命令通过给资源设定过期时间,由浏览器自行确认是否过期,无需再次请求服务器确认.

location / {
    expires 7d;
}

如果静态资源不存在,可以通过设置error_page来修改请求路径

location / {
    error_page 404 /index.html;
}

通过proxy_pass命令重新发起请求

location /blog {
    proxy_pass http://eslyf.cn/;
}

当访问域名/blog时将重新请求(可以是主机名称,IP:端口,UNIX-domain套接字路径等形式)

通过location块解决过期域名问题

location / {
    default_type text/html;
    add_header Content-Type "text/html; charset=utf-8";
    return 200 '<div>该网站域名已更改，请访问新域名：<a href="https://eslyf.cn" target="_blank">博客</a></div>';
}

注意事项

1. location的URL结尾带不带/

情况一:结尾带/,表示访问目录,请求会匹配目录

location /ip/ {
    root /data/static/;
    index ip.html;
}

情况二:结尾不带/,表示访问文件,请求会先匹配文件,如果文件不存在再匹配目录

location /ip {
    root /data/static/;
    index ip.html;
}

2. proxy_pass指令的URL结尾带不带/

情况一:结尾带/

location /blog {
    proxy_pass http://eslyf.cn/;
}

此时,proxy_pass上的URL有资源路径/,那么location的/blog会被替换成/,Nginx代理后的请求变为:http://eslyf.cn/

情况二:结尾不带/

location /blog {
    proxy_pass http://eslyf.cn;
}

此时,proxy_pass上的URL没有资源路径,那么location的/blog会匹配到Nginx代理后的URL中,Nginx代理后的请求变为:http://eslyf.cn/blog

3. location的URL结尾带/,并且要执行的命令式是proxy_pass

location /blog/ {
    proxy_pass http://eslyf.cn;
}

此时,proxy_pass上的URL没有资源路径,Nginx会做特殊处理,访问http://eslyf.cn/blog等同于http://eslyf.cn/blog/,如果你想这两种请求对应不同的处理，就要明确增加不带/结尾的location配置

location /blog {
    proxy_pass http://eslyf.cn;
}

location /blog/ {
    proxy_pass http://test.eslyf.cn;
}

总结上文

客户端请求URL	location上的URL	proxy_pass上的URL	Nginx代理后发送给服务器的请求URL
test.eslyf.cn	/blog/	test.eslyf.cn	test.eslyf.cn/blog
test.eslyf.cn	/blog/	test.eslyf.cn/vlog	test.eslyf.cn/vlog
test.eslyf.cn	/blog	test.eslyf.cn	test.eslyf.cn/blog
test.eslyf.cn	/blog	test.eslyf.cn/vlog	test.eslyf.cn/vlog

结束