nginx 代理配置

一、root与alias配置静态资源的区别

核心区别：

• root：会将location匹配的路径拼接到root指定的目录后
• alias：会用alias指定的目录直接替换location匹配的路径（仅替换匹配部分）

配置示例

server {
    listen 80;
    server_name localhost;

    # 场景1：使用root配置静态资源
    # 目录结构：/home/files/ 下有 image.jpg 和 doc.pdf
    # 访问规则：http://localhost/files/xxx → 实际访问 /home/files/xxx
    location ^~/files/ {  # ^~ 表示优先匹配该路径（非正则）
        root /home/;      # 根目录为 /home/
        expires 1d;       # 缓存1天，优化静态资源访问
        autoindex on;     # 允许目录浏览（调试用，生产环境建议关闭）
    }

    # 场景2：使用alias配置静态资源
    # 目录结构：/home/static/ 下有 image.jpg 和 doc.pdf
    # 希望通过 http://localhost/res/xxx 访问 /home/static/xxx
    location ^~/res/ {
        alias /home/static/;  # 用 /home/static/ 替换 /res/
        expires 1d;
        autoindex on;
    }
}

实际访问案例

访问URL	配置方式	实际访问的服务器文件路径	说明
http://localhost/files/image.jpg	root	/home/files/image.jpg	root路径 + location路径
http://localhost/res/image.jpg	alias	/home/static/image.jpg	alias路径直接替换location路径

二、请求后台接口的代理配置

核心规则：proxy_pass末尾是否带/，决定了location匹配的路径是否会被拼接至代理地址后。

配置示例

server {
    listen 8080;
    server_name localhost;

    # 通用代理头配置（建议添加）
    proxy_set_header Host $host;               # 传递原始主机名
    proxy_set_header X-Real-IP $remote_addr;   # 传递客户端真实IP
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 传递代理链IP
    proxy_set_header X-Forwarded-Proto $scheme;  # 传递协议（http/https）

    #################### 场景1：代理地址不带斜杠 ####################
    # 访问 http://localhost:8080/api/user → 代理到 http://127.0.0.1:8000/api/user
    location ^~/api/ {
        proxy_pass http://127.0.0.1:8000;  # 末尾无/，拼接location路径
    }

    #################### 场景2：代理地址带斜杠 ####################
    # 访问 http://localhost:8080/v1/order → 代理到 http://127.0.0.1:8000/order
    location ^~/v1/ {
        proxy_pass http://127.0.0.1:8000/;  # 末尾有/，不拼接location路径（仅保留后面部分）
    }

    #################### 场景3：代理地址带固定前缀 ####################
    # 访问 http://localhost:8080/app/login → 代理到 http://127.0.0.1:8000/system/login
    location ^~/app/ {
        proxy_pass http://127.0.0.1:8000/system/;  # 用/system/替换/app/
    }

    #################### 场景4：精准匹配单个接口 ####################
    # 访问 http://localhost:8080/pay/callback → 代理到 http://127.0.0.1:9000/payment/notify
    location = /pay/callback {  # = 表示精确匹配
        proxy_pass http://127.0.0.1:9000/payment/notify;
    }
}

代理路径映射案例

访问URL	proxy_pass配置	实际代理地址
http://localhost:8080/api/user	http://127.0.0.1:8000	http://127.0.0.1:8000/api/user
http://localhost:8080/v1/order	http://127.0.0.1:8000/	http://127.0.0.1:8000/order
http://localhost:8080/app/login	http://127.0.0.1:8000/system/	http://127.0.0.1:8000/system/login
http://localhost:8080/pay/callback	http://127.0.0.1:9000/payment/notify	http://127.0.0.1:9000/payment/notify

三、前端项目部署

核心需求：

• 前端静态文件（HTML/CSS/JS）正确映射
• 单页应用（SPA）路由跳转不404（通过try_files实现）

配置示例

server {
    listen 8090;
    server_name localhost;

    # 关闭版本号显示（安全优化）
    server_tokens off;

    # 场景1：根路径部署前端项目（如Vue/React项目）
    # 项目目录：/home/web/spa_demo/（包含index.html及静态资源）
    # 访问路径：http://localhost:8090/
    location / {
        root /home/web/spa_demo/;  # 项目根目录
        index index.html;          # 默认首页
        # SPA路由支持：如果文件不存在，转发到index.html由前端路由处理
        try_files $uri $uri/ /index.html;
        # 静态资源缓存（CSS/JS/图片等）
        location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg)$ {
            expires 7d;  # 缓存7天
            add_header Cache-Control "public, max-age=604800";
        }
    }

    # 场景2：带前缀路径部署前端项目（如子应用）
    # 项目目录：/home/web/apps/admin/（包含index.html及静态资源）
    # 访问路径：http://localhost:8090/admin/
    location ^~/admin/ {
        root /home/web/apps/;  # 父目录（子目录为admin）
        index index.html;
        # 前缀路径的SPA路由支持：转发到/admin/index.html
        try_files $uri $uri/ /admin/index.html;
        # 静态资源缓存
        location ~* \.(css|js|jpg|png)$ {
            expires 30d;
        }
    }

    # 场景3：部署多版本前端（用于灰度发布）
    # 项目目录：/home/web/versions/v1/ 和 /home/web/versions/v2/
    location ^~/v1/ {
        alias /home/web/versions/v1/;  # 用alias直接映射版本目录
        try_files $uri $uri/ /v1/index.html;
    }
    location ^~/v2/ {
        alias /home/web/versions/v2/;
        try_files $uri $uri/ /v2/index.html;
    }
}

前端访问案例

访问URL	项目部署路径	实际访问的文件/处理逻辑
http://localhost:8090/	/home/web/spa_demo/	直接返回 index.html
http://localhost:8090/about	同上（SPA路由）	由前端路由处理，Nginx转发到index.html
http://localhost:8090/admin/login	/home/web/apps/admin/	前端路由处理，转发到/admin/index.html
http://localhost:8090/v1/dashboard	/home/web/versions/v1/	转发到/v1/index.html

总结

1. 静态资源：root适合路径层级一致的场景，alias适合路径映射需要替换的场景。
2. 接口代理：proxy_pass末尾的/决定是否拼接location路径，复杂映射需精确配置。
3. 前端部署：try_files是SPA路由的关键，配合缓存配置可优化访问性能。

根据实际项目结构选择合适的配置方式，避免路径拼接错误导致404。