使用 AWS 在特定路径下提供单页应用程序答案

【问题标题】：Serve single page app under specific path with AWS使用 AWS 在特定路径下提供单页应用程序
【发布时间】：2019-06-03 19:57:36
【问题描述】：

目前，我有 mydomain.com 指向一个 Django EC2 实例，它前面有 ABL，ABL 前面有 CF。现在我需要在特定路径 mydomain.com/my-specific-path 下提供 React 单页应用程序（当然是 HTTPS 下的所有内容）

我尽我所能将我的 SPA 托管在 S3 存储桶中，并使用 CF 将调用重定向到该 S3。但是以这种方式通过 HTTPS 为应用程序提供服务是不可能的（因为 S3 托管和子文件夹）。

我现在正在考虑在我的 Django 应用程序前面设置一个反向代理。但我不知道这是否是最好的解决方案，我也不知道最好的方法。

能否请您给我一些关于如何在特定路径下服务 SPA 的见解？

提前谢谢你。

【问题讨论】：

【解决方案1】：

你需要：

1) 将您的 ALB 作为源添加到您的 CloudFront 分配

2) 将您的 S3 存储桶网站 URL 作为来源添加到您的 CloudFront 分配

注意：从此处自动填充的下拉框中将 S3 添加为来源不适用于在 S3 之外托管网站。此功能仅用于托管静态文件。

2a) 可选择使用存储桶策略中的条件将您的 S3 存储桶锁定到 CloudFront，该条件检查只有 CloudFront 和您的 S3 存储桶知道的标头值

3) 将 CloudFront 分配中的默认根对象设置为 index.html

4) 将您的 react 应用上传到 S3 存储桶中的子文件夹，而不是根目录中。此子文件夹必须与您在 CloudFront 中的 React 应用程序源上设置的路径相匹配

5) 在指向 ALB 的 CloudFront 分配中设置默认行为

6) 在您的 CloudFront 分配中设置一个行为，将 my-specific-path/* 指向您的 S3 存储桶源

7) 使用 AWS Certificate Manager 在您的 CloudFront 分配上终止 SSL

此设置应该为您的 Django 应用和托管在 S3 中的 React 应用提供 SSL。

我已经开始运行了，屏幕截图如下：

【讨论】：

我们无法在 https 下提供我们的 index.html 文件。也许我们没有Terminate SSL on your CloudFront distribution using AWS Certificate Manager ... 有任何相关文档以便我仔细检查吗？
此外，我们必须将 CF 指向 S3 域 URL 才能提供文件。这是正确的吗？
顺便说一句，我们在通过 HTTPS 服务时遇到了超时（如果我没记错的话）
是的，当您设置 S3 源时，您可以从 CloudFront 中的预填充值中自动选择它（它知道您的 S3 存储桶）。该字段由 S3 存储桶 URL 或类似内容填充。已使用有关如何将 SSL 证书安装到 CloudFront + 如何使用 CloudFront 通过 SSL 提供 S3 内容的一些文档更新了答案。
谢谢，我想我们已经尝试过了。问题是在没有文件名的情况下点击 URL 时我们无法提供它。所以https://example.com/my-specific-path/index.html 但https://example.com/my-specific-path/ 只是下载一个零字节文件（请求设置为content-type: application/x-directory），https://example.com/my-specific-path 给出错误（请求设置为content-type: application/xml）。有什么想法吗？？