前端配置nginx代理

一、定义静态文件的路径的两种方式

1. root 指令

（1）作用

• 指定文件系统的 基础路径，location 的 URI 会 追加到该路径后 形成完整路径。

（2）语法

location /uri/ {root /path/to/files;
}

（3）路径解析规则

• 最终路径 = root + location URI
  例如：

  location /static/ {root /var/www/html;
  }

  • 请求 /static/logo.png → 服务器文件路径：/var/www/html/static/logo.png

（4）特点

• 适用于 location 的 URI 需要作为子目录 的情况。

• 默认会 自动拼接 location 和 root。

（5）示例

server {listen 80;server_name example.com;location /images/ {root /data/website;  # 访问 /images/cat.jpg → /data/website/images/cat.jpg}
}

2. alias 指令

（1）作用

• 指定文件系统的 精确路径，location 的 URI 会 被替换为该路径。

（2）语法

location /uri/ {alias /path/to/files/;
}

（3）路径解析规则

• 最终路径 = alias + (URI 去除 location 前缀)
  例如：

  location /assets/ {alias /var/www/static/;
  }

  • 请求 /assets/js/app.js → 服务器文件路径：/var/www/static/js/app.js

（4）特点

• 适用于 location 的 URI 需要映射到不同目录 的情况。

• 必须以 / 结尾（否则可能拼接异常）。

• 不会自动拼接 location 路径，而是直接替换。

（5）示例

server {listen 80;server_name example.com;location /static/ {alias /data/shared/;  # 访问 /static/logo.png → /data/shared/logo.png}
}

---

二、核心区别对比

特性	root	alias
路径拼接方式	root + location	替换 location 为 alias
结尾斜杠 /	可省略	必须包含（如 /data/）
适用场景	URI 是文件子目录（如 /img/）	URI 需要映射到其他目录
性能影响	无差异	无差异

---

三、常见问题与注意事项

1. 结尾斜杠问题

• alias 必须明确以 / 结尾，否则路径解析会出错：

  # 错误示例（缺少 /）
  location /static {alias /data/static;  # 请求 /static/file → 可能解析为 /data/staticfile
  }# 正确示例
  location /static/ {alias /data/static/;  # 请求 /static/file → /data/static/file
  }

2. 正则匹配 location

• 如果 location 使用正则表达式（如 ~* \.(jpg|png)$），必须用 alias，因为 root 不支持正则替换。

3. 安全性

• 避免将 alias 指向敏感目录（如 /etc/），否则可能引发安全问题。

---

四、示例场景

场景 1：普通静态资源

# 使用 root（URI 是子目录）
location /uploads/ {root /var/www/site;  # 文件路径：/var/www/site/uploads/file.txt
}# 使用 alias（URI 需要重映射）
location /docs/ {alias /mnt/shared/documents/;  # 文件路径：/mnt/shared/documents/file.txt
}

场景 2：单页应用（SPA）

location / {root /var/www/app/dist;try_files $uri $uri/ /index.html;  # Vue/React 路由支持
}

五、完整案例

worker_processes 1;events {worker_connections 1024;
}http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 600;client_header_timeout 600;client_body_timeout 600;#上传文件的大小限制  默认1mclient_max_body_size 10m;underscores_in_headers on;server {# 访问端口listen 8080;server_name localhost;location / {root D:/Users/22972/work/nginx-1.23.3/web/dist/;index index.html index.htm;}location ^~/api/auth/ {proxy_pass http://192.168.0.125:8081/auth/;}# 后端线上服务代理location /api/system/ {proxy_pass http://192.168.0.125/api/system/;}# 前端子应用代理location /system-ui/ {proxy_pass http://localhost:8001/system-ui/;}error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}}
}