如何在同一域名下部署多个Create React App应用？

核心结论：不需要将所有应用一同部署，完全可以分开独立部署，每个应用对应域名下的一个子路径，各自维护自己的代码仓库和部署流程即可。

AWS Amplify 部署方案 #

这是你优先考虑的方案，操作步骤如下：

1. 给每个React应用配置子路径 #

每个Create React App必须先设置好子路径，否则会出现路由或静态资源加载错误：

• 在项目根目录新建.env.production文件，添加：

  PUBLIC_URL=/app1
  

  （把app1换成对应应用的子路径，第二个应用就写/app2）
• 修改package.json里的homepage字段：

  "homepage": "/app1"
  

• 如果用了React Router，记得给BrowserRouter加basename属性：

  import { BrowserRouter } from 'react-router-dom';
  
  ReactDOM.render(
    <BrowserRouter basename="/app1">
      <App />
    </BrowserRouter>,
    document.getElementById('root')
  );
  

2. 逐个在Amplify上部署应用 #

• 登录AWS Amplify控制台，给每个应用单独创建部署项目：
  • 关联对应的代码仓库（GitHub、GitLab都行）
  • 构建命令用默认的npm run build，输出目录选build，Amplify会自动识别，不用改
• 部署完成后，进入每个项目的Domain management：
  • 点击Add domain，选择你的自定义域名（如果还没绑定，先在Route 53或域名服务商做好解析）
  • 在域名配置页设置Path mapping，把当前应用映射到对应的子路径（比如/app1）
  • 所有应用都重复这个操作，用同一个主域名，各自对应不同的子路径

3. 验证功能 #

部署完后，访问domain.com/app1、domain.com/app2，检查页面加载、静态资源（CSS、图片、JS）是否正常，路由跳转有没有404。如果资源加载失败，回去检查PUBLIC_URL和homepage的配置是否正确。

其他可行部署方案 #

1. AWS S3 + CloudFront #

• 每个应用构建后，上传到独立的S3桶，或者同一个桶的不同前缀目录（比如s3://your-bucket/app1/、s3://your-bucket/app2/）
• 配置CloudFront分发，用自定义域名，然后给每个子路径（/app1/*、/app2/*）设置对应的源（S3桶或前缀）
• 注意：要给每个子路径配置CloudFront的错误页面，把404导向对应的index.html，避免React路由刷新后报错

2. Nginx反向代理（自建服务器/ECS/EKS） #

• 每个应用独立构建后，部署到不同容器或服务器目录
• 配置Nginx的反向代理规则：

  server {
    listen 80;
    server_name domain.com;
  
    location /app1 {
      alias /path/to/app1/build;
      try_files $uri $uri/ /app1/index.html;
    }
  
    location /app2 {
      alias /path/to/app2/build;
      try_files $uri $uri/ /app2/index.html;
    }
  }
  

• 这个方案适合有自建服务器或用容器编排的场景，灵活度高，但需要自己维护服务器和Nginx配置

3. Vercel多项目路径映射 #

• 每个应用在Vercel上单独部署，拿到各自的部署域名
• 在Vercel的自定义域名设置里，添加主域名，然后配置Path rewrites：把/app1/*重写到第一个应用的Vercel域名，/app2/*重写到第二个应用的Vercel域名
• 同样要给每个React应用配置homepage和路由basename

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