本文将介绍如何在服务器上使用 Nginx 和 Nginx Proxy Manager（NPM）部署前端应用，包括代理设置和 HTTPS 配置。我们将为你提供一个通用的步骤和配置，适用于任何需要通过 Nginx 和 NPM 进行部署的前端项目。

一、前提条件

宿主机环境：

操作系统：Linux（以 Ubuntu 为例）
端口：8082（可根据实际情况调整端口）
Docker：运行 Nginx Proxy Manager (NPM) 容器，用于管理反向代理和证书

Nginx 配置：Nginx 作为反向代理服务器，负责提供静态文件服务，并将 /dev-api 请求代理到后端接口。
Docker 环境：NPM 运行在 Docker 容器中，因此需要通过 Docker 网关回源宿主机。通常网关 IP 为 172.17.0.1。

二、移动端部署

2.1 打包并上传

cd your-frontend-app-directory
npm install
npm run build

将 dist 文件夹内容上传到目标目录（假设路径为 /path/to/your/static-directory）。

2.2 Nginx 配置

创建并编辑配置文件，例如：/etc/nginx/sites-available/your-frontend-app：

server {
    listen 8082;
    server_name _;

    root /path/to/your/static-directory;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /dev-api/ {
        rewrite ^/dev-api/?(.*)$ /$1 break;
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

启用配置并重启 Nginx：

ln -sf /etc/nginx/sites-available/your-frontend-app /etc/nginx/sites-enabled/your-frontend-app
nginx -t
systemctl reload nginx

2.3 防火墙放行

开放 8082 端口（可以根据实际情况调整端口）：

ufw allow 8082/tcp

验证：

curl -I http://127.0.0.1:8082
curl http://127.0.0.1:8082/dev-api/captchaImage

三、Nginx Proxy Manager 配置

3.1 配置前提

Nginx Proxy Manager (NPM) 容器名为 nginx-proxy-manager。
Docker 网关：通过命令 docker inspect nginx-proxy-manager --format '{{range .NetworkSettings.Networks}}{{.Gateway}} {{end}}' 查询，获取网关 IP（例如：172.17.0.1）。

3.2 配置 Proxy Host

域名：your-domain.com（你自己的域名）
Scheme：http
Forward Hostname / IP：172.17.0.1（Docker 网关 IP）
Forward Port：8082（前端端口）

启用以下选项：

Block Common Exploits
Websockets Support

3.3 通过 NPM 申请 SSL 证书

在 NPM 中的每个 Proxy Host 配置页面，选择 SSL 页：
1. SSL Certificate：Request a new SSL Certificate
2. 输入邮箱并勾选：
  - Force SSL
  - HTTP/2 Support
  - 同意 Let’s Encrypt 条款
3. 保存配置，NPM 会自动申请证书并启用 HTTPS。

四、几个关键坑

前端的 /dev-api 只是一个代理前缀，后端的真实接口路径不包含 /dev-api。
必须在 Nginx 配置中添加：

rewrite ^/dev-api/?(.*)$ /$1 break;

否则后端会收到错误路径。

NPM 容器不能使用 127.0.0.1 作为回源地址，需使用 Docker 网关 172.17.0.1。
Vue 前端配置中需要：

try_files $uri $uri/ /index.html;

否则刷新页面会返回 404 错误。

五、验证链路

访问 https://your-domain.com

NPM -> 172.17.0.1:8082
Nginx -> 静态文件 + /dev-api -> 127.0.0.1:8080