如何在Amazon S3部署两个Angular5项目并解决路由匹配错误

这个问题我之前帮不少开发者处理过，核心原因是Angular作为单页应用（SPA），前端路由需要依赖入口文件index.html来解析，但S3默认会直接查找对应路径的对象，找不到就返回403/404错误，进而导致Angular路由无法正常初始化。结合你的场景，我们分三步来解决：

1. 为子Angular项目配置正确的base href #

子项目部署在/clients路径下，必须让Angular知道它的根路径是/clients/，否则路由会从域名根目录开始匹配，自然找不到对应的路由。

• 构建子项目时，执行以下命令：

  ng build --prod --base-href /clients/
  

• 构建完成后，打开子项目的dist/clients/index.html，确认<base>标签是否为：

  <base href="/clients/">
  

2. 调整S3静态网站托管的重定向规则 #

你已经配置了403重定向，但规则需要针对根项目和子项目分别设置，确保不同路径下的路由请求都能导向对应的index.html：

在S3控制台的静态网站托管设置中，替换原有的重定向规则为以下JSON配置（如果使用CLI则对应修改桶的websiteConfiguration）：

[
    {
        "Condition": {
            "KeyPrefixEquals": "clients/",
            "HttpErrorCodeReturnedEquals": ["403", "404"]
        },
        "Redirect": {
            "HostName": "example.com",
            "ReplaceKeyPrefixWith": "clients/index.html"
        }
    },
    {
        "Condition": {
            "HttpErrorCodeReturnedEquals": ["403", "404"]
        },
        "Redirect": {
            "HostName": "example.com",
            "ReplaceKeyPrefixWith": "index.html"
        }
    }
]

规则说明： #

• 第一组规则：针对/clients/开头的请求，如果返回403/404，自动重定向到/clients/index.html，让子项目的Angular路由处理请求
• 第二组规则：针对根路径的请求，返回错误时重定向到根目录的index.html，保证根项目路由正常

3. 验证部署结构与桶权限 #

• 确认S3桶内的文件结构与本地一致：
  • 根项目的index.html、assets/直接放在桶的根目录
  • 子项目的index.html、assets/放在桶的clients/目录下
• 确保桶的权限配置允许公开读取（或通过IAM/CloudFront配置了正确的访问权限），避免因权限问题导致的403错误

最后验证 #

部署完成后，访问https://example.com/clients：

• 打开浏览器开发者工具的网络标签，确认是否成功加载了/clients/index.html
• 查看控制台是否还有路由匹配错误，如果有，检查base href是否配置正确

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