Nginx 多项目静态托管与反向代理需按域名或路径隔离配置：域名方式用独立 server 块配 server_name 和 root；路径方式用 location + alias；动静结合时，静态走本地文件、API 用 proxy_pass 分流，并注意权限、斜杠和重载。
Nginx 实现多项目独立静态资源托管 + 反向代理，关键在于按域名或路径区分请求，并分别指向不同本地目录（静态）或后端服务（动态）。不是所有静态资源都混在一起，而是每个项目有自己专属的 root、location 和缓存策略。
下面直接讲清楚怎么配，不绕弯。
一、按域名区分多静态项目（推荐）
每个项目用独立域名（如 `admin.example.com`、`shop.example.com`），Nginx 通过 `server_name` 匹配，各自托管自己的 dist 目录：示例配置（放在 /etc/nginx/conf.d/admin.conf）：
server {
listen 80;
server_name admin.example.com;
root /var/www/admin/dist;
index index.html;
# 单页应用路由回退（Vue/React 必加）
location / {
try_files $uri $uri/ /index.html;
}
# 静态文件强缓存（JS/CSS/图片）
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}另一个项目（/etc/nginx/conf.d/shop.conf）：
server {
listen 80;
server_name shop.example.com;
root /var/www/shop/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}✅ 效果：访问 admin.example.com 加载 `/var/www/admin/dist`，访问 shop.example.com 加载 `/var/www/shop/dist`，完全隔离，互不影响。
二、按路径前缀区分（适合子路径部署）
如果只能用一个域名（比如 `example.com/admin/` 和 `example.com/shop/`），就用 `location` 前缀 + `alias`（注意：不能用 `root`）：⚠️ 关键点：用 alias，且路径末尾要带斜杠；proxy_pass 后端也需注意结尾斜杠是否一致
server {
listen 80;
server_name example.com;
root /var/www/default; # 默认首页可放这里
# 管理后台（/admin/ → /var/www/admin/dist/）
location ^~ /admin/ {
alias /var/www/admin/dist/;
index index.html;
try_files $uri $uri/ @admin_fallback;
}
location @admin_fallback {
rewrite ^/admin/(.*)$ /admin/index.html break;
}
# 商城前端（/shop/ → /var/www/shop/dist/）
location ^~ /shop/ {
alias /var/www/shop/dist/;
index index.html;
try_files $uri $uri/ @shop_fallback;
}
location @shop_fallback {
rewrite ^/shop/(.*)$ /shop/index.html break;
}
# API 接口统一走反向代理（和静态资源不冲突）
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;
}
}✅ 这样 `example.com/admin/xxx.js` 就从 `/var/www/admin/dist/xxx.js` 读取，`example.com/shop/logo.png` 从 `/var/www/shop/dist/logo.png` 读取，API 请求则转发给后端服务。
三、动静分离 + 多项目共存（生产常用组合）
真实场景中，一个项目往往既有静态资源（前端 dist），又需要调用自身后端（如 `/api/`），这时建议：- 前端构建时，把 API 基地址设为相对路径（如 `/api/xxx`），不写死后端域名
- Nginx 在同一 server 块里，用不同 location 分流：静态走本地文件系统，API 走 proxy_pass
- 多个项目就建多个 server 块（按域名）或多个 location 块（按路径），彼此独立配置缓存、gzip、HTTPS
例如，一个完整项目（`app.example.com`）同时托管静态 + 代理后端：
server {
listen 443 ssl http2;
server_name app.example.com;
ssl_certificate /etc/nginx/ssl/app.example.com.pem;
ssl_certificate_key /etc/nginx/ssl/app.example.com.key;
root /var/www/app/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
# 静态资源缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# API 请求全部转发到本机 SpringBoot
location /api/ {
proxy_pass http://127.0.0.1:9001/; # 注意结尾 /
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;
}
}不复杂但容易忽略：每个项目的 root 或 alias 路径权限要对 nginx 用户（通常是 www-data 或 nginx）可读，配置完记得 nginx -t && nginx -s reload。
