如何自动配置Nginx动态路由？无需手动添加产品ID路由

生产环境Nginx配置 #

不用逐个编写location规则，直接通过正则匹配就能批量处理所有数字动态路由，核心配置如下：

# 匹配以/myproject/products/开头、后续为数字的路径
location ~ ^/myproject/products/(\d+)/ {
    # 将捕获到的数字（变量$1）转发给后端服务
    proxy_pass http://localhost:8000/$1;
    # 可选：传递请求头，确保后端能正确识别请求来源
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

说明：

• ~ 标记启用正则匹配模式
• ^/myproject/products/(\d+)/ 中的(\d+)会捕获路径里的数字部分，作为变量$1传递给后端
• Nginx默认会保留原请求的查询字符串（比如?rand=something），无需额外配置

如果需要兼容不带末尾斜杠的路径（如/myproject/products/1），可将正则修改为^/myproject/products/(\d+)/?$，/?表示末尾斜杠可选。

开发模式（npm run dev）下的处理 #

前端开发阶段无需修改Nginx，直接在项目的开发服务器配置中添加代理规则即可，以下是两种常见框架的配置示例：

1. Vite项目（vite.config.js）

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/myproject/products': {
        target: 'http://localhost:8000',
        // 重写路径：移除/myproject/products前缀，仅保留数字部分
        rewrite: (path) => path.replace(/^\/myproject\/products\/(\d+)/, '/$1')
      }
    }
  }
})

2. Vue CLI项目（vue.config.js）

module.exports = {
  devServer: {
    proxy: {
      '/myproject/products': {
        target: 'http://localhost:8000',
        // 重写路径：将/myproject/products/替换为/
        pathRewrite: { '^/myproject/products/': '/' }
      }
    }
  }
}

配置完成后启动开发服务，访问http://localhost:5173/myproject/products/1?rand=something时，请求会自动转发到后端的http://localhost:8000/1?rand=something。

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