反向代理需路径级分离：前端静态资源走根目录，后端API（如/api/）单独配置location反代；子目录部署需手动加alias+try_files fallback；后端必须监听127.0.0.1并关闭外网端口放行。
反向代理配置必须区分前端静态资源和后端 API 路径
宝塔面板里直接用「网站 → 反向代理」功能时，很多人把整个域名全代理给 http://127.0.0.1:3000，结果前端页面能打开，但登录、上传等所有接口都 404 或跨域失败。根本原因是没做路径级分离：前端是纯静态文件（/、/static/、/favicon.ico），后端 API 通常带前缀如 /api/、/v1/，必须拆开处理。
正确做法是：主网站根目录指向前端构建产物（如 /www/wwwroot/myapp-fe），再额外加一条反向代理规则，只把 /api/ 开头的请求转发到后端服务：
位置：网站 → 配置文件 → 在 server {} 块内手动添加
location ^~ /api/ {
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_pass http://127.0.0.1:8080/; 中的 / 会自动剥离 /api/ 前缀，否则后端收到的是 /api/login，而它实际只监听 /login。
多个项目共用 80/443 端口时，子目录反代比子域名更省证书和 DNS 配置
如果不想为每个项目单独配子域名（比如 admin.example.com、api.example.com），用路径隔离更轻量。但宝塔默认不支持「网站根目录 + 子目录反代」混合模式，需手动改 Nginx 配置。
例如部署两个项目：example.com/app1/（前端）→ /www/wwwroot/app1-dist，example.com/app1/api/ → 后端 http://127.0.0.1:9001/：
- 先在宝塔新建网站
example.com，根目录设为/www/wwwroot/example-root - 把
app1-dist放进该目录下/app1/子文件夹 - 在配置文件中加 location 块：
location ^~ /app1/api/ { proxy_pass http://127.0.0.1:9001/; } - 确保前端构建时
publicPath或base设为/app1/，否则 JS/CSS 路径会 404
这种结构下，Nginx 不会把 /app1/ 请求发给后端，而是直接读磁盘文件；只有带 /app1/api/ 的才走代理——这才是真正的「反代目录分离」。
前端路由（如 Vue Router history 模式）需要 Nginx fallback 配置
部署 Vue/React 项目时，如果用了 history 模式（URL 无 #），直接访问 example.com/user/123 会 404，因为 Nginx 找不到对应物理文件。宝塔的「伪静态」模板里选「Vue.js」看似能解决，但它只对根目录生效，不兼容子目录场景（如 /app1/user/123）。
必须手动补 fallback 规则：
location /app1/ {
alias /www/wwwroot/example-root/app1/;
try_files $uri $uri/ /app1/index.html;
}
关键点：alias 后路径末尾要带 /，且 try_files 中的 fallback 路径必须和 alias 对应（不能写 /index.html）。否则刷新页面就 404。
后端服务必须监听 127.0.0.1 而非 0.0.0.0，否则暴露风险
很多教程让后端 listen(3000) 或 app.listen(3000)，没指定 host，默认绑定 0.0.0.0:3000，这意味着服务器公网 IP + 端口可直连，绕过 Nginx 的 SSL、限流、WAF 等所有防护。
务必改成：
- Node.js：
app.listen(3000, '127.0.0.1') - Python Flask：
app.run(host='127.0.0.1', port=8000) - Java Spring Boot：
server.address=127.0.0.1加到application.yml
改完记得在宝塔「安全」里关掉对应端口的外网放行——这是最容易被忽略的一环，也是生产环境最常被扫出的漏洞点。
