Nginx Proxy Manager (NPM) 是方便的可视化管理 Nginx 代理的工具，同时支持 Let's Encrypt 的 SSL 的申请和自动续申，是非常方便的工具

我是用宝塔面板部署 Web（Vue3项目，就是普通 Web 项目） 和后端 (一些需要反向代理的链接，使用 /api 路径反向代理到其他服务器，我部署的是后端服务)以及一些 Docker 项目 (博客，内部使用了 Caddy 服务器，也是自动申请和续申 SSL 证书)

1. 安装 NPM

首先，我考虑到我管理 Web 项目都是使用宝塔 (就是使用宝塔创建 PHP 静态项目，其实就是纯 Web 项目，然后他会在 /www/wwwroot 下创建文件夹)，于是，如果需要无痛过渡宝塔内置 Nignx 到 NPM 的话就需要加入 dockerfile 中的文件夹映射 /www/wwroot:/www/wwroot

于是根据 NPM 官网的示例 docker-compose. yml 简单修改就得到了下面的配置文件

yml
version: '3.8'
services:
  nginxmgr:
    image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    ports:
	  # HTTP 网站的端口
      - '80:80'
      # NPM管理后台的端口
      - '81:81'
      # HTTPS 网站的端口
      - '443:443'
    volumes:
      - /data:/data
      - /letsencrypt:/etc/letsencrypt
      # 需要映射一个静态资源路径，如果无特殊要求，直接在/data路径下放置静态Web资源即可
      - /www/wwwroot:/www/wwwroot

根据模板文件创建编排项目即可

使用 ip+81 访问 NPM 后台管理平台

首次登录用户名和密码为，需要修改用户名和密码，根据提示修改即可

Email:    admin@example.com
Password: changeme

2. 配置 Web 前端项目

点击 Hosts 创建反代配置

输入域名和本地端口，如果是使用 nginx 代理的话，IP 为本地 IP 和端口为80

对于我的 Web 项目，它的文件路径在 www/wwroot 下

Nginx 配置文件为

config
server {
        listen 80;
        server_name 项目域名;
        location / {
            root   /www/wwwroot/项目路径/;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

       #gzip
       #开启gzip功能
       gzip on;
       ... 省略
       
       # 反向代理后端域名到 前端
        location /api/ {
           proxy_pass http://后端域名:8081;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header REMOTE-HOST $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           
          # rewrite ^/api/(.*)$ /$1 break;
       }
    }

但是我们不能直接将这个配置文件放入 NPM 的配置文件中，我们可以在高级选项卡中添加自定义 Nginx 配置

对于我的 Web 项目，把下面内容粘贴到文本框中即可

config
location / {
	root   /www/wwwroot/项目路径/;
	try_files $uri $uri/ /index.html;
	index  index.html index.htm;
}

#gzip
#开启gzip功能
gzip on;
... 省略

# 反向代理后端域名到 前端
location /api/ {
   proxy_pass http://后端域名:8081;
   proxy_set_header Host $host;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header REMOTE-HOST $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   
  # rewrite ^/api/(.*)$ /$1 break;
}

这样就完成了 NPM 对于 Web 项目的配置，在 data/nginx 下可看见我们的 Nginx 配置文件

配置文件列表

配置文件内容

3. 配置自动申请 SSL 证书

我们讲到 Let's Encrypt 可以免费申请 SSL 证书，它只需要一共邮箱和一个可以访问通的域名即可申请，但是申请证书有效期为90天，90天后需要重新申请，像 Caddy 等一些服务器可以自带 Let's Encrypt SSL 证书的申请和续申，但是 Nginx 肯定是不行的，于是可以使用 NPM 进行申请

NPM 申请也很简单，可以在创建反代配置时配置

也可以在单独的 SSL 管理页进行申请

申请过程请确保网站是可访问的，并且 Let's Encrypt 访问并不一定很通畅，有时候可能需要多次尝试才能成功 (尤其是国内服务器)

4. 普通反向代理

我使用 vanblog 作为博客网站框架，其中使用了 Caddy 作为服务器并自动申请 SSL 证书，但是我不需要使用 Caddy 作为服务器，我需要使用 Nginx 独立管理我的博客，于是我使用 NPM 反代 vanblog 的 HTTP 端口 (我设置的为8089，不能使用80和443端口)

于是配置为

同样可配置 SSL 证书

5. 配置默认未找到页面