如何在 S3 和 CloudFront 中托管网站？

Question

我正在尝试使用 CloudFront、S3 和 Amazon EC2 托管我的 Angular 网站 实例。我正在为例如创建一个桶bucket_name 并在其中创建 3 个文件夹命名：- 1. 例子 2.登录 3.注销

我的网址是：- 1. abc.com/example/ 2. abc.com/example/login 3. abc.com/example/logout

但是当我托管我的网站时，我可以访问 abc.com/example/，但我面临的问题是，当我尝试访问登录和注销 URL 时，我收到错误“404 未找到”。因为它试图在 S3 存储桶的示例文件夹中找到 index.html，就像这样 example/login/index.html 和 EC2 实例用于 API 调用。

Answer 1

要在 S3 存储桶和 aws CloudFront 上托管您的网站，您必须在 S3 存储桶中包含您的父文件 index.html，然后您需要在 S3 存储桶的属性下配置静态网站托管。将这些字段设置为use this bucket to host website，然后输入索引文档index.html此文件必须在 S3 存储桶中，并保存。

下一步您可以编辑此存储桶的公共访问权限，如果您希望此站点可以在外部访问，则 turn off 在 S3 存储桶的权限选项卡下阻止公共访问。

稍后，要使用 CloudFront 托管此内容，您需要创建 CloudFront 分配，并将 Origin Domain name = Your S3 bucket name 和 默认根对象 设置为您的父 index.html 文件（即存储在 s3 存储桶中）并保存此 CloudFront 分配，现在检查浏览器上的 域名 URL，它应该可以正常工作。

完成此操作后，您可以根据需要为后端 API 调用设置 EC2 实例。