在 aws 中使用相同的域名进行前端和后端部署答案

【问题标题】：Using same domain name for frontend and backend deployment in aws在 aws 中使用相同的域名进行前端和后端部署
【发布时间】：2019-10-20 22:05:28
【问题描述】：

我正在尝试在 aws 上部署我的 Angular 应用程序和 nodejs 服务器。为了部署 Angular 应用程序，我使用 s3 存储桶并启用静态网站托管。要部署nodejs，我使用的是ec2。 我选择将服务器和 Angular 前端分开。

我想知道这将如何提供给外界。我购买了一个域名，比如 www.example.com。我正在附加一个 s3 存储桶，因此在启动 www.example.com 时，我可以看到我的 Angular 应用程序。但我也想为我的 nodejs 服务器使用相同的域，因为我的 angular 应用程序正在对 nodejs 服务器进行 API 调用。我需要为我的后端服务器购买不同的域吗？在我的本地开发中，我只是在 localhost:4200 上运行我的前端，在 localhost:3000 上运行 nodje。但我不确定它在云上会如何工作。

【问题讨论】：

您可以使用亚马逊的 API 网关之类的东西，或者建立一个在 API 和 UI 服务器之间拆分流量的反向代理，或者您只需为 API 获取第二个域 (api.example.com) 并配置与之对话的 UI。
这能回答你的问题吗？ CloudFront static website and EC2 API on same domain
@Joe，您不购买子域。如果您想要 example.com 的子域，则需要在 DNS 配置中创建 A 或 CNAME 记录，以便将子域解析为不同于顶级域的 IP 或服务。如果您想使用 CloudFront 或可能的其他 AWS 服务作为源，则需要使用 AWS Route53 DNS 服务。

标签： amazon-web-services amazon-s3 amazon-ec2

【解决方案1】：

这个问题有多种解决方案。

您可以让 www.example.com 指向您的 S3 存储桶，而 api.example.com 指向您的后端。

另一种解决方案是使用 CloudFront 并为其配置多个来源：一个用于您的前端 (S3)，一个用于您的后端（自定义来源、API 网关或 Application Load Balancer）。然后你会有一个特定的行为，比如/api/* 为你的后端服务。此解决方案的优点是在您的前端和后端都有一个 CDN，并在前端避免了 CORS 请求（+ CloudFront 提供的更多功能）。

【讨论】：

这很棒。我能够使用上述解决方案成功启动它。非常感谢。
嗨，API 前面的云端不是意味着额外费用（对于 http/https 请求）。
如果您在 CloudFront 中设置自定义错误响应，它也会从您的 API 中吞下 HTTP 错误代码。 Afaik，这些自定义错误响应不能应用于特定路径。

【解决方案2】：

我制作了下图，显示了此请求将流经的部分：

正如@jogold 所说，关键是 CloudFront，它将重定向到前端或后端（相同分布、多个来源、多种行为）

记住要创建一个新的原点（“Origins and Origin Groups”选项卡），还要创建一个新的行为（“Behaviors”选项卡）：使用预期的“Path Param”（您的应用也应该将其作为 BasePath）和注意“优先级”（默认必须始终是最后一个）。

就我而言，BackEnd 的“PathParam”值为“/api/*”

【讨论】：