Nginx多应用部署：Webpack与React Router 4的URL前缀配置问题

我来帮你搞定这个问题！同一域名下部署多个React应用，静态资源路径和路由前缀确实是最容易踩的两个坑，我之前部署类似项目时也遇到过，给你一步步拆解解决：

1. 修复静态资源路径404问题 #

Create React App（假设你用的是这个脚手架）其实提供了全局配置静态资源前缀的方式，就是在每个应用的package.json里添加homepage字段：

• 针对bookstore应用，修改package.json：

  {
    "name": "bookstore",
    "homepage": "/bookstore",
    // 其他原有配置...
  }
  

• 针对library应用，修改package.json：

  {
    "name": "library",
    "homepage": "/library",
    // 其他原有配置...
  }
  

添加这个字段后，Webpack在构建时会自动给所有静态资源（JS、CSS、图片等）的引用路径加上对应的前缀，比如原来的static/js/main.js会变成/library/static/js/main.js，正好匹配Nginx的路由规则，不会再出现404。

2. 让React Router 4识别前缀路由 #

React Router 4默认会把路由指向根路径，要让它适配前缀，只需要给BrowserRouter组件加上basename属性即可：

方式一：硬编码前缀（适合固定部署场景） #

直接在路由组件里指定前缀：

import { BrowserRouter, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter basename="/library">
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/books" component={BookList} />
        {/* 其他路由 */}
      </Switch>
    </BrowserRouter>
  );
}

方式二：用环境变量动态配置（更灵活） #

如果需要在不同环境切换前缀，可以通过环境变量传递：
首先修改应用的package.json的scripts字段：

{
  "scripts": {
    "start": "REACT_APP_BASE_PATH=/library react-scripts start",
    "build": "REACT_APP_BASE_PATH=/library react-scripts build"
  }
}

然后在代码里读取环境变量：

<BrowserRouter basename={process.env.REACT_APP_BASE_PATH}>
  {/* 路由内容 */}
</BrowserRouter>

这样不管是开发还是生产环境，都能灵活调整前缀。

3. 补全Nginx配置的关键细节 #

你已经实现了基本的路由转发，但为了适配React单页应用的特性，需要确保所有前缀下的路由请求都能正确落到index.html上，推荐这样配置：

server {
  listen 80;
  server_name www.example.com;

  # 处理bookstore应用
  location /bookstore {
    alias /path/to/your/bookstore/build; # 替换为bookstore构建产物的实际路径
    try_files $uri $uri/ /bookstore/index.html;
  }

  # 处理library应用
  location /library {
    alias /path/to/your/library/build; # 替换为library构建产物的实际路径
    try_files $uri $uri/ /library/index.html;
  }
}

这里用alias而不是root，是因为alias会直接把/library路径映射到指定的构建目录，而root会在指定目录下追加/library路径，容易导致路径错误。

按照这三步操作，静态资源路径和路由前缀的问题应该就能彻底解决了！

内容的提问来源于stack exchange，提问作者Michał J. Gąsior