如何解决Nginx部署多版本React静态应用的资源路径问题？

核心问题分析 #

你的配置存在两个关键问题：

1. /version的location未捕获版本号（如X.X.X），$1变量为空，导致路径指向错误；
2. React构建生成的资源路径为绝对路径（/static/xxx），而非相对路径，使得请求会跳转到根目录下的static，而非当前版本路径下的static。

步骤1：调整React构建配置（最优解） #

让React构建时输出相对路径的资源，资源请求会自动基于当前URL路径：

• 若使用Create React App：在package.json中添加"homepage": "."，重新执行npm run build。
• 若使用Vite：在vite.config.js中设置base: './'，再重新构建。

步骤2：修正Nginx配置 #

替换原有的/version location配置，改用正则捕获版本号，并处理SPA路由刷新问题：

# 最新版本服务（保持不变，新增try_files处理SPA路由）
location / {
    root /etc/application_development/latest;
    index index.html;
    try_files $uri $uri/ /index.html;
}

# 版本化服务配置
location ~^/version/([^/]+) {
    # 捕获URL中的版本号到$1，alias指向对应版本的目录
    alias /etc/kosmikpwa_development/$1;
    index index.html;
    # 处理静态资源请求和SPA路由刷新
    try_files $uri $uri/ /version/$1/index.html;
}

可选：兼容绝对路径资源的临时方案 #

如果无法重新构建React应用，可添加额外Nginx规则，将根路径的/static请求根据来源转发到对应版本的目录：

location ~^/static/(.*) {
    set $target_version '';
    # 从请求来源中提取版本号
    if ($http_referer ~* /version/([^/]+)) {
        set $target_version $1;
    }
    # 若来自版本路径，指向对应版本的static目录
    if ($target_version != '') {
        root /etc/kosmikpwa_development/$target_version;
        try_files /static/$1 =404;
    }
    # 否则指向最新版本的static目录
    root /etc/application_development/latest;
    try_files /static/$1 =404;
}

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