如何在单个Netlify项目中托管多个React应用并映射至同一域名？

你的仓库4个独立React应用的目录结构如下：

root_folder/
  app1/
  app2/
  app3/
  app4/

要实现example.com、example.com/app1、example.com/app2等路径分别访问对应应用，按以下步骤配置即可，完全基于Netlify原生Monorepo能力，不需要额外建多个站点做反向代理。

1. 子应用构建参数调整 #

因为子应用不是部署在域名根路径，首先要给每个应用配置匹配访问路径的公共基础路径：

• 如果是Create React App创建的应用：在每个子应用目录下新建.env文件，根路径对应的应用（比如你选app4作为根路径访问的应用）写PUBLIC_URL=/，app1写PUBLIC_URL=/app1，app2写PUBLIC_URL=/app2，app3写PUBLIC_URL=/app3
• 如果是Vite创建的应用：修改每个子应用的vite.config.js，根应用配置base: '/'，app1配置base: '/app1/'，app2配置base: '/app2/'，app3配置base: '/app3/'
• 路由配置同步修改：React Router的basename参数和对应应用的base路径保持一致，比如app1的路由要加basename="/app1"，避免路由跳转错乱。

2. 根目录新增Netlify配置文件 #

在仓库根目录新建netlify.toml文件，配置统一构建逻辑和SPA路由重写规则，参考配置如下：

[build]
  # 所有应用构建完成后，Netlify统一从这个目录读取部署文件
  publish = "publish"
  # 逐次构建所有应用，把产物按访问路径拷贝到publish目录对应位置
  # 注意：如果是Vite项目，把下面命令里的build目录替换为Vite默认的输出目录dist即可
  command = """
    # 构建根路径应用（这里示例用app4作为根应用，可自行替换）
    npm run build --prefix app4
    mkdir -p publish
    cp -r app4/build/* publish/

    # 构建app1
    npm run build --prefix app1
    mkdir -p publish/app1
    cp -r app1/build/* publish/app1/

    # 构建app2
    npm run build --prefix app2
    mkdir -p publish/app2
    cp -r app2/build/* publish/app2/

    # 构建app3
    npm run build --prefix app3
    mkdir -p publish/app3
    cp -r app3/build/* publish/app3/
  """

# 根路径应用SPA重写规则，解决刷新404问题
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
  force = false
  conditions = {Path = ["/*", "!/app1/*", "!/app2/*", "!/app3/*"]}

# 各子应用SPA重写规则
[[redirects]]
  from = "/app1/*"
  to = "/app1/index.html"
  status = 200

[[redirects]]
  from = "/app2/*"
  to = "/app2/index.html"
  status = 200

[[redirects]]
  from = "/app3/*"
  to = "/app3/index.html"
  status = 200

3. Netlify站点部署配置 #

• 登录Netlify后台新建站点，选择导入对应Git仓库
• 不需要手动修改后台的构建命令、发布目录配置，根目录的netlify.toml会自动覆盖默认配置，直接触发部署即可
• 部署完成后，把你的自定义域名example.com绑定到这个站点，就能实现按路径访问不同应用的效果。

常见问题排查 #

• 如果子应用静态资源加载404，先检查对应应用的publicPath/base配置是否和访问路径一致，不要写死根路径
• 如果子应用路由刷新404，检查netlify.toml里对应路径的重写规则是否正确添加
• 如果构建失败，先在本地逐次跑配置里的构建命令，确认每个应用能正常生成构建产物，再检查拷贝路径是否正确。

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