在 S3 上托管 React 页面并对 Elastic Beanstalk 上的服务器进行 REST api 调用

Posted 2023-03-04

【中文标题】在 S3 上托管 React 页面并对 Elastic Beanstalk 上的服务器进行 REST api 调用

【英文标题】：Hosting React page on S3 and making REST api calls to server on Elastic Beanstalk

【发布时间】：2020-10-31 17:23:13

【问题描述】：

背景

我正在尝试部署一个虚拟应用程序，其中 React 前端和 Django 后端通过 REST api 进行交互。我做了以下事情：

使用 S3 存储桶来托管静态网站并将我的反应代码部署到其中 为 S3 存储桶放置 Cloudfront - 设置证书并更改我的域名（来自 GoDaddy）以链接到此地址 按照AWS的python环境教程启动Elastic Beanstalk环境 设置 Postgres RDS 并链接 Django 服务器

所以现在我可以做以下事情

通过我的域名 (https://www.example.com) 使用 https 访问我的前端 使用 elastic beanstalk 的路径访问 django 管理站点并更新项目

即每个组件都已启动并运行

问题

我遇到了问题：

从静态页面向 Elastic Beanstalk 环境进行安全的 REST API 调用。在我设置证书之前，我可以轻松地进行 REST API 调用。 我可以找到的指南通常涉及为 Elastic Beanstalk 设置一个域名，我认为这不适用于我的案例（或者它是否适用？） 我尝试遵循此faq 并更新了负载均衡器中的配置，该配置接受 443 https 并重定向到 80 http。但我使用的证书与来自 CloudFront 的证书相同，这听起来不合适。

不胜感激

如何解决上述 ssl 连接问题 或者是否有更好的架构来实现我想要在这里实现的目标？

根据Request a certificate in ACM for Elastic Beanstalk backend，听起来我必须使用子域并为该子域请求证书，并使用 Cloud 53 将对该子域的请求定向到 Elastic Beanstalk 环境。会这样吗？

提前谢谢你！

【参考方案1】：

默认情况下，EB url 将只使用 HTTP。要使用 HTTPS，您需要在 ALB 上部署 SSL 证书。

为此，您需要一个自定义域，因为您只能将 SSL 证书与您控制的域相关联。因此，通常你会得到一个域（你似乎已经有一个来自 godaday 的域）。所以在这种情况下，您可以在 godady 上设置一个子域（例如api.my-domian.com）。然后您可以使用 AWS ACM 为 api.my-domian.com 注册一个免费的公共 SSL 证书。

验证证书后，使用 DNS（更简单）或电子邮件技术，您可以使用 HTTPs 侦听器将其部署在 ALB 上。显然，您需要将 api.my-domian.com 指向 EB 的 https url。您还可以将 ALB http 流量从端口 80重定向到 443，以始终使用 https。

那么在你的前端应用中你只使用https://api.my-domian.com，而不是原始的EB url。

除此之外还可能存在 CORS 问题，因此也必须有所不同。