如何让我的 Angular 应用程序部署到 S3 以响应路由 URL
How do I get my Angular app deployed to S3 respond to routing URLs
我有 Angular 使用路由的应用程序,构建并部署到 S3 存储桶。如果我转到应用程序 URL 的根目录,它工作正常。例如www.my-app.com.s3.foo.bar.amazonaws.com/
而且它在应用程序中运行良好。例如,如果我跟随一个指向 ['/home'] 的路由器 link,它会转到 www.my-app.com.s3.foo.bar.amazonaws.com/home
等等。
但是如果我直接转到 www.my-app.com.s3.foo.bar.amazonaws.com/home
,我会收到一个 S3 错误,指出该资源不存在。这是真的——/home对应的S3 bucket中没有文件。
如何确保 URL 请求通过应用程序而不是 S3 进行路由?
更新:看起来 CloudFront 可能会这样做。我在 CloudFront 中配置什么?
您可以将 CloudFront 配置为从 S3 角度处理“未找到”页面,方法是返回 SPA 的相应根页面。
- 创建您的 CloudFront 分配。
- 转到分发配置中的“错误页面”选项卡并添加一个新的错误页面。
- 从 CloudFront 的角度来看,您正在处理的错误是 404 未找到错误,因此请在 HTTP 错误代码字段中输入 404。
- Select 自定义响应并输入应用程序根 html 页面的位置(在 S3 存储桶中),例如/index.html.
- 从浏览器的角度来看,这是一个有效的请求和响应,因此在 HTTP 响应代码字段中输入 200。
我有 Angular 使用路由的应用程序,构建并部署到 S3 存储桶。如果我转到应用程序 URL 的根目录,它工作正常。例如www.my-app.com.s3.foo.bar.amazonaws.com/
而且它在应用程序中运行良好。例如,如果我跟随一个指向 ['/home'] 的路由器 link,它会转到 www.my-app.com.s3.foo.bar.amazonaws.com/home
等等。
但是如果我直接转到 www.my-app.com.s3.foo.bar.amazonaws.com/home
,我会收到一个 S3 错误,指出该资源不存在。这是真的——/home对应的S3 bucket中没有文件。
如何确保 URL 请求通过应用程序而不是 S3 进行路由?
更新:看起来 CloudFront 可能会这样做。我在 CloudFront 中配置什么?
您可以将 CloudFront 配置为从 S3 角度处理“未找到”页面,方法是返回 SPA 的相应根页面。
- 创建您的 CloudFront 分配。
- 转到分发配置中的“错误页面”选项卡并添加一个新的错误页面。
- 从 CloudFront 的角度来看,您正在处理的错误是 404 未找到错误,因此请在 HTTP 错误代码字段中输入 404。
- Select 自定义响应并输入应用程序根 html 页面的位置(在 S3 存储桶中),例如/index.html.
- 从浏览器的角度来看,这是一个有效的请求和响应,因此在 HTTP 响应代码字段中输入 200。