Docker部署多React应用：同一域名下Nginx /marketing静态文件加载失败

问题原因分析 #

当前Nginx配置中，location /marketing 使用root指令会导致Nginx尝试在/usr/share/nginx/html/web/marketing/目录下查找静态资源，但你的marketing项目文件实际存放在/usr/share/nginx/html/web/目录，路径不匹配；同时React打包时默认静态资源路径为根路径/，在/marketing路径下请求静态资源会指向根目录，导致加载失败。

配置调整步骤 #

1. 修改Nginx配置 #

将location /marketing中的root替换为alias，并调整try_files的最终 fallback 路径：

server{
    listen 4000;
    server_name localhost;
    
    location / { 
        root /usr/share/nginx/html/stg;
        try_files $uri /index.html =404;       
    }   
    location /marketing {
        alias /usr/share/nginx/html/web/;
        try_files $uri $uri/ /marketing/index.html =404;
    }   
}

• alias会将/marketing路径直接映射到/usr/share/nginx/html/web/目录，而非拼接路径
• try_files最后指定/marketing/index.html，确保单页应用路由刷新时能正确加载入口文件

2. 调整marketing项目的静态资源路径 #

在marketing项目的package.json中添加homepage字段，指定项目的基础路径：

{
  "name": "marketing-app",
  "homepage": "/marketing",
  // 其他配置...
}

或者在项目的webpack配置中设置output.publicPath：

module.exports = {
  // 其他配置...
  output: {
    publicPath: '/marketing/',
    // 其他输出配置...
  }
};

修改后重新打包marketing项目，替换./new-build/目录下的文件，确保静态资源路径都带有/marketing前缀。

3. 重启Nginx容器 #

执行以下命令重启Nginx使配置生效：

docker-compose restart nginx

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