前端配置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
    }
}

二、核心区别对比

特性rootalias
路径拼接方式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;
        }
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

五秒法则

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值