如何在Netlify上将多个React应用部署至同一URL

一、使用同一GitHub仓库部署 #

1. 调整项目结构
   • 将主React应用放在仓库根目录，子应用分别放在独立子目录（比如/apps/app-one、/apps/app-two），每个子目录都是完整的React项目。
2. 配置Netlify站点
   • 主应用部署：新建Netlify站点关联该仓库，设置构建命令为npm run build，发布目录填主应用的构建输出目录（通常是./build），直接部署到https://example.netlify.app。
   • 子应用部署：分别为每个子应用新建Netlify站点，同样关联该仓库，在站点设置里指定基础目录为子应用的路径（比如apps/app-one），构建命令设为npm run build，发布目录填子应用的./build。之后进入站点的「域名设置」，添加example.netlify.app/app-one作为该站点的自定义路径。
3. 关键配置
   • 每个子应用的package.json里必须添加"homepage": "/app-one"（对应各自的子路径），确保构建后的静态资源路径正确。
   • 子应用如果使用BrowserRouter，要设置basename属性：<BrowserRouter basename="/app-one">，避免路由跳转到主应用路径。
   • 子应用的发布目录里添加_redirects文件，内容为/* /index.html 200，解决单页应用刷新404的问题。

二、使用不同GitHub仓库部署 #

1. 仓库准备：每个React应用对应独立的GitHub仓库，主应用、app-one、app-two各占一个仓库。
2. 部署每个站点
   • 主应用：新建Netlify站点关联主仓库，正常部署到https://example.netlify.app。
   • 子应用：分别为每个子应用的仓库新建Netlify站点，完成构建部署后，在站点的「域名设置」中添加对应的子路径（比如example.netlify.app/app-one）。
3. 关键配置
   • 和同一仓库方案一致，子应用需设置package.json的homepage、路由的basename，以及添加_redirects文件。

注意事项 #

• 确保主应用的路由不会和子应用的路径（/app-one、/app-two）冲突，主应用不要设置这些路径的路由。
• Netlify的路径映射需要等待DNS生效，通常几分钟内完成。

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