前端配置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;
    #上传文件的大小限制  默认1m
    client_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;
        }
    }
}