Docker下Vue3 SSR的NGINX location规则配置问题咨询

过往三份配置无法满足需求的核心原因：

• 第一份配置仅覆盖了单条精确路径，没有对/my/prefix/下的其他请求配置对应处理规则，导致这类请求无匹配逻辑返回404
• 第二份配置没有掌握NGINX proxy_pass 的路径拼接规则：当proxy_pass 地址不含末尾路径段时，会自动将完整原始请求路径拼接到上游地址，因此动态路由的/my/prefix 前缀没有被剥离
• 第三份配置的正则捕获范围不足，仅抓取了page1/page2 本身的路径字符串，没有捕获后续的嵌套路径段，导致转发时丢失了123、789这类参数化路径节点

该配置适配Docker容器网络场景（上游服务地址为newserver:8080，即Vue3 SSR应用容器），所有规则完全匹配转发要求

# 定义Vue3 SSR应用上游
upstream vue_ssr_backend {
    server newserver:8080;
}

server {
    listen 80;
    server_name 你的服务域名/IP;

    # 1. 精确匹配根前缀请求：/my/prefix/ 转发为上游 /
    location = /my/prefix/ {
        proxy_pass http://vue_ssr_backend/;
        # 常规代理请求头，避免SSR应用识别错误的客户端信息
        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;
    }

    # 2. 匹配静态资源路径：/my/prefix/css/、/my/prefix/js/ 下的请求，原样透传不修改路径
    # 用^~ 标记提升匹配优先级，避免被动态路由的正则规则覆盖
    location ^~ /my/prefix/css/ {
        proxy_pass http://vue_ssr_backend;
        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;
    }

    location ^~ /my/prefix/js/ {
        proxy_pass http://vue_ssr_backend;
        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;
    }

    # 3. 匹配动态路由（page1、page2开头的所有嵌套路径）：完整剥离 /my/prefix 前缀
    # 用命名捕获组抓取前缀后的全部路径内容，确保嵌套子路径不丢失
    location ~ ^/my/prefix/(?<dynamic_path>page1/.*|page2/.*)$ {
        # 拼接捕获到的动态路径+原始请求参数，实现无丢失透传
        proxy_pass http://vue_ssr_backend/$dynamic_path$is_args$args;
        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;
    }
}

逐请求验证转发逻辑，完全匹配需求：

• 请求/my/prefix/：被精确匹配规则拦截，实际转发为http://vue_ssr_backend/，满足去前缀要求
• 请求/my/prefix/page1/123?name=one：被动态路由规则匹配，捕获的动态路径为page1/123，拼接参数后实际转发为http://vue_ssr_backend/page1/123?name=one，无路径段丢失
• 请求/my/prefix/page2/789?id=123&name=one：被动态路由规则匹配，捕获的动态路径为page2/789，拼接参数后实际转发为http://vue_ssr_backend/page2/789?id=123&name=one，参数完整保留
• 请求/my/prefix/css/styles.css、/my/prefix/js/app.js：被静态资源规则拦截，proxy_pass 无末尾路径段，实际转发时完整保留原始路径，即转发为http://vue_ssr_backend/my/prefix/css/styles.css、http://vue_ssr_backend/my/prefix/js/app.js，满足静态资源不修改路径的要求

• 动态路由正则中的 (?<dynamic_path>page1/.*|page2/.*) 是解决旧配置路径丢失问题的核心：.* 会匹配page1/page2 下的所有嵌套路径，不会仅截断到page1/page2本身
• 静态资源location使用^~标记，是为了确保NGINX在匹配到这类前缀路径后，不再执行后续的正则路由匹配，避免静态资源被错误匹配到动态路由规则
• $is_args$args 变量会自动携带原始请求的查询字符串，无需手动拼接参数，避免参数丢失

内容的提问来源于stack exchange，提问作者se22as