如何在AWS Amplify中将多个独立ReactJS应用部署到同一域名的不同上下文路径

完全可以实现这个需求！我之前配置过类似的场景，核心是利用AWS Amplify的**路径路由（Path-based routing）**功能，把同一域名下的不同子路径分别映射到对应的React应用。下面是一步步的实操指南：

1. 先确认准备工作 #

• 两个已经成功部署到AWS Amplify的React应用（咱们姑且叫它们App1和App2）
• 你已经拥有目标域名（比如www.mydomain.com），并且有权修改该域名的DNS记录

2. 配置域名关联与路径映射 #

这一步是核心，我们要把主域名绑定到Amplify，并设置路径规则：

• 登录AWS Amplify控制台，随便选其中一个应用（比如App1），进入Domain management页面
• 点击「Add domain」，输入你的主域名www.mydomain.com，然后点「Configure」
• 在域名配置页面找到Path mappings模块：
  • 点击「Add path mapping」，第一个路径填/app1/*，然后从下拉框里选你的App1应用
  • 再点一次「Add path mapping」，路径填/app2/*，选择App2应用
  • 还可以设置一个默认路径（比如/*），用户访问根域名时可以跳转到其中一个应用，或者自定义一个 landing 页
• 配置完后点「Save」，Amplify会自动生成需要的DNS记录（CNAME或A记录）

3. 更新DNS记录 #

• 复制Amplify给出的DNS记录，到你的域名注册服务商（比如Route 53、Godaddy这些）的DNS管理后台添加这些记录
• 耐心等DNS生效，快的话几分钟，慢的话可能要几小时，Amplify会自动验证域名所有权

4. 调整React应用的路由配置 #

因为React是单页应用（SPA），默认路由是基于根路径的，所以必须修改每个应用的路由配置来适配子路径：

针对App1（对应/app1）： #

• 如果用的是React Router，在路由组件里加上basename="/app1"：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router basename="/app1">
      <Routes>
        {/* 你的路由规则 */}
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

• 同时，在应用的package.json里添加"homepage": "/app1"，确保构建后的静态资源路径正确

针对App2（对应/app2）： #

• 同理，设置basename="/app2"和"homepage": "/app2"就好

5. 重新部署应用 #

改完路由配置后，重新构建并部署两个应用到Amplify：

• 直接把代码推送到关联的Git仓库就行，Amplify会自动触发构建部署
• 嫌麻烦的话，也可以在Amplify控制台手动点重新部署

6. 验证配置 #

等部署完成后，测试一下：

• 访问www.mydomain.com/app1，应该能正常打开App1
• 访问www.mydomain.com/app2，应该能正常打开App2
• 如果设置了默认路径，访问根域名也会跳转到你指定的应用

一些踩过的坑要注意 #

• 路径映射规则别冲突，比如不要同时设/app1/*和/app1/sub/*（除非你有特殊的嵌套需求）
• DNS生效需要时间，刚配置完访问不了别慌，等半小时再试试
• 如果遇到路由404问题，先检查React Router的basename是不是设对了，再看Amplify的路径映射有没有配置错误

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