如何隐藏部署在S3上的Angular 4网站的base href

嘿，这个需求很常见——既要保留你按版本分文件夹的灵活部署方式，又要让用户看到干净的无版本号URL对吧？我来给你一步步拆解实现方法：

1. 调整CloudFront分发的行为配置 #

这是核心步骤，让CloudFront帮你做路径映射：

• 登录CloudFront控制台，找到你的分发，进入行为标签页，编辑默认的行为（路径模式为*）。
• 在源路径（Origin Path）字段中填入/v1.0.0（注意不要加末尾的斜杠）。这样一来，用户请求https://mywebsite.com/pricing时，CloudFront会自动把请求转发到S3存储桶的/v1.0.0/pricing路径下，完全对用户透明。
• 别忘了配置错误页面：在CloudFront的错误页面设置里，添加一条规则——把404错误码指向/index.html，返回状态码200。这是因为Angular是单页应用，所有路由请求都需要由index.html来处理，避免用户直接访问子路径时出现404。

2. 修改Angular的base href配置 #

现在可以去掉版本号了：

• 把index.html里的<base href="/v1.0.0/">改成<base href="/">，这样Angular生成的所有路由链接都会以根路径开头，用户看到的URL就是https://mywebsite.com/pricing这种干净格式。
• 如果你用ng build打包，直接用命令ng build --base-href /，这样打包出来的index.html会自动设置正确的base href，不用手动修改。

3. 确认S3存储桶的配置 #

确保S3的静态网站托管设置和CloudFront配合：

• 开启S3存储桶的静态网站托管，把索引文档和错误文档都设置为index.html，和CloudFront的错误页面配置形成配合，保证Angular路由正常工作。
• 检查S3的权限，确保CloudFront有访问存储桶内容的权限（推荐用CloudFront OAI（Origin Access Identity）来限制访问，比直接开公共权限更安全）。

4. 版本迭代时的无缝切换 #

当你要发布v2.0.0版本时，只需要做两步：

• 把CloudFront行为里的源路径改成/v2.0.0。
• 触发CloudFront的缓存失效，清除旧的路径映射缓存（在CloudFront控制台的缓存失效标签页，输入/*即可）。
  这样用户访问的就是新版本内容，URL依然保持干净，完全不需要修改Angular代码或重新打包。

注意事项 #

• 保留index.html的无缓存设置：之前你设置index.html无缓存是对的，确保版本切换后用户能立刻获取到最新的index.html，不会被旧缓存影响。可以在CloudFront的行为里，对index.html单独设置缓存策略，比如TTL设为0，或者直接排除缓存。
• 测试环节：先在本地用ng serve --base-href /测试路由是否正常跳转，再部署到S3，修改CloudFront配置后，用浏览器的隐私模式测试线上URL，确保路径正确且无版本号显示。

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