在 AWS 中 - 具有 SSL 证书的子域在 RESTful 调用中不起作用
In AWS - Subdomain with SSL Certificate doesn't work in RESTful call
我有一个 AWS Amplify 实例来启动我拥有的 REACT 应用程序。它还有一个 SSL 证书，所以我可以通过输入以下内容在浏览器上访问该应用程序：
https://myreactapp.com（不是我的真实应用url，只是一个例子）
我在没有 SSL 证书的 Elastic Beanstalk 实例上有一个 Web servlet 运行ning，我的 REACT 应用程序使用我拥有的代码片段与它交互：
var myObject = {
data1: this.state.data1,
data2: this.state.data2
}
$.ajax({
type: "POST",
url: 'http://<my-backend-webservices-app>.us-east-1.elasticbeanstalk.com/doSomething', // works only from React app when running on local machine (http://localhost:3000), not from https url
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
data: myObject,
success: function(response) {
console.log('success -- ' + response);
},
function(errMsg) {
alert('Major Error');
}
});
这段代码工作正常，当我 运行 我的 React App 在我的本地机器上时，我从 my-backend-webservices-app 得到了响应。因为当我在本地使用它时，反应应用程序在 http://localhost:3000 上（注意它不是 https）并且它与也在 http.
上的 Elastic Beanstalk 实例通信
但是，当我 运行 来自 AWS Amplify 的带有 SSL 证书的 React 应用程序时，它抱怨来自 HTTPS 的 RESTFul 请求无法与 http url 通信。这是浏览器的错误：
jquery.js:8676 Mixed Content: The page at
'https://master.<.....>.amplify<...>.com/' was loaded over HTTPS,
but requested an insecure XMLHttpRequest endpoint
'http://.us-east-1.elasticbeanstalk.com/doSomething'.
This request has been blocked; the content must be served over HTTPS.
所以我想解决这个问题是向我的 ElasticBeanStalk 实例添加一个 SSL 证书。所以首先我创建了一个子域 services.myreactapp.com ，其中主域是 myreactapp.com 然后我分配了我的 ElasticBeanstalk 实例（我的my-backend-webservices-app 是）那个 services.myreactapp.com 子域。
然后我转到 aws 的 Certificate Manager 服务页面并请求分配给 services.myreactapp.com 子域的 public 证书。
所以现在我更新了上面代码片段的 URL 以使用 https 而不是 http:
url: 'https://<my-backend-webservices-app>.us-east-1.elasticbeanstalk.com/doSomething',
但是现在每当我的 React 应用程序从 https 向后端 servlet 发出请求时，它就会挂起。
想知道我遗漏了什么吗？
转到 AWS 路由 53，在 DNS 管理中创建一个指向您的 beantalk url 的 CNAM DNS 记录，如 -
services.myreactapp.com -> xyz.us-east-1.elasticbeanstalk.com
然后在你的 React 应用中使用 services.myreactapp.com 作为 url。此外，在执行此操作之前，请确保您能够在 https://services.myreactapp.com 访问您的后端，您可以检查您的健康状况 API（如果有的话）以进行测试。注意 - 这可能需要一些时间才能让 services.myreactapp.com 生效。
这里没有什么要强调的。
关于 ACM 颁发的证书
- 首先，如果您向证书管理器申请证书，它不会自动应用于您的任何应用程序，您需要将证书应用于您的应用程序。
通过 Elasticbeanstalk 使用 ACM 颁发的证书
只有在使用负载均衡器的情况下，才能将ACM获取的证书应用到elasticbeanstalk。在这种情况下，您可以简单地从您的 elasticbeanstalk 配置页面 select 您的证书。
参考：
为 elasticbeanstalk 负载均衡器配置 ssl - https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/configuring-https-elb.html
如果您没有使用负载均衡器（单实例）
您必须将证书应用于 elasticbeanstalk 或其代理（例如 nginx）中的应用程序 运行。您可以使用 .ebextensions 来实现此目的。
参考：
https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/https-singleinstance-nodejs.html
将 subdomain.example.com 指向 elasticbeanstalk 的 DNS 名称
- 在您的负载均衡器上启用 SSL 或配置您的单个实例以通过 ssl 为您的应用程序提供服务后，您可以创建一个
A 记录以将 services.myreactapp.com 指向您的 elasticbeanstalk dns 名称。确保在创建 A 记录时 select 别名 Yes。
使用前端应用程序中的新 DNS 名称
最后，您可以在前端应用程序中使用 subdomain.mydomain.com 而不是 elasticbeanstalk dns 名称。
希望这对您有所帮助，祝您好运。
由于 @Arun K 上面的回复，我能够让它工作。
我用的link是：
https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/configuring-https-elb.html
简而言之，通过 Configuration -> Load Balancer -> Modify 按钮，我必须配置我的 Elastic Beanstalk EC2 实例以使用带有侦听器的负载平衡。然后将我拥有的现有 SSL 证书与此侦听器相关联。
但是，当我一开始尝试这样做时，修改 按钮不存在（请注意它说负载平衡在我的配置中不可用）。
aws link 的一部分在您收到以下消息时提到了这一点：
Note If the Load balancer configuration category doesn't have a Modify
button, your environment doesn't have a load balancer.
前进的方向是上面截图中的select Configuration -> Capacity -> Modify，然后select "Load Balanced" 而不是"Single Instance" 在 环境类型 下拉框中。
应用这些更改后，将为 配置 -> 负载平衡器 子面板启用 "modify" 按钮。我继续执行上述 AWS link 中的步骤，现在可以从我的 https://myreactapp.com 与我的 my-backend-webservices-app
进行通信
我有一个 AWS Amplify 实例来启动我拥有的 REACT 应用程序。它还有一个 SSL 证书，所以我可以通过输入以下内容在浏览器上访问该应用程序： https://myreactapp.com（不是我的真实应用url，只是一个例子）
我在没有 SSL 证书的 Elastic Beanstalk 实例上有一个 Web servlet 运行ning，我的 REACT 应用程序使用我拥有的代码片段与它交互：
var myObject = {
data1: this.state.data1,
data2: this.state.data2
}
$.ajax({
type: "POST",
url: 'http://<my-backend-webservices-app>.us-east-1.elasticbeanstalk.com/doSomething', // works only from React app when running on local machine (http://localhost:3000), not from https url
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
data: myObject,
success: function(response) {
console.log('success -- ' + response);
},
function(errMsg) {
alert('Major Error');
}
});
这段代码工作正常，当我 运行 我的 React App 在我的本地机器上时，我从 my-backend-webservices-app 得到了响应。因为当我在本地使用它时，反应应用程序在 http://localhost:3000 上（注意它不是 https）并且它与也在 http.
上的 Elastic Beanstalk 实例通信但是，当我 运行 来自 AWS Amplify 的带有 SSL 证书的 React 应用程序时，它抱怨来自 HTTPS 的 RESTFul 请求无法与 http url 通信。这是浏览器的错误：
jquery.js:8676 Mixed Content: The page at 'https://master.<.....>.amplify<...>.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://.us-east-1.elasticbeanstalk.com/doSomething'. This request has been blocked; the content must be served over HTTPS.
所以我想解决这个问题是向我的 ElasticBeanStalk 实例添加一个 SSL 证书。所以首先我创建了一个子域 services.myreactapp.com ，其中主域是 myreactapp.com 然后我分配了我的 ElasticBeanstalk 实例（我的my-backend-webservices-app 是）那个 services.myreactapp.com 子域。
然后我转到 aws 的 Certificate Manager 服务页面并请求分配给 services.myreactapp.com 子域的 public 证书。
所以现在我更新了上面代码片段的 URL 以使用 https 而不是 http:
url: 'https://<my-backend-webservices-app>.us-east-1.elasticbeanstalk.com/doSomething',
但是现在每当我的 React 应用程序从 https 向后端 servlet 发出请求时，它就会挂起。
想知道我遗漏了什么吗？
转到 AWS 路由 53，在 DNS 管理中创建一个指向您的 beantalk url 的 CNAM DNS 记录，如 -
services.myreactapp.com -> xyz.us-east-1.elasticbeanstalk.com
然后在你的 React 应用中使用 services.myreactapp.com 作为 url。此外，在执行此操作之前，请确保您能够在 https://services.myreactapp.com 访问您的后端，您可以检查您的健康状况 API（如果有的话）以进行测试。注意 - 这可能需要一些时间才能让 services.myreactapp.com 生效。
这里没有什么要强调的。
关于 ACM 颁发的证书
- 首先，如果您向证书管理器申请证书，它不会自动应用于您的任何应用程序，您需要将证书应用于您的应用程序。
通过 Elasticbeanstalk 使用 ACM 颁发的证书
只有在使用负载均衡器的情况下，才能将ACM获取的证书应用到elasticbeanstalk。在这种情况下，您可以简单地从您的 elasticbeanstalk 配置页面 select 您的证书。
参考： 为 elasticbeanstalk 负载均衡器配置 ssl - https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/configuring-https-elb.html
如果您没有使用负载均衡器（单实例）
您必须将证书应用于 elasticbeanstalk 或其代理（例如 nginx）中的应用程序 运行。您可以使用
.ebextensions来实现此目的。参考：
https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/https-singleinstance-nodejs.html
将 subdomain.example.com 指向 elasticbeanstalk 的 DNS 名称
- 在您的负载均衡器上启用 SSL 或配置您的单个实例以通过 ssl 为您的应用程序提供服务后，您可以创建一个
A记录以将services.myreactapp.com指向您的 elasticbeanstalk dns 名称。确保在创建A记录时 select 别名Yes。
使用前端应用程序中的新 DNS 名称
最后，您可以在前端应用程序中使用 subdomain.mydomain.com 而不是 elasticbeanstalk dns 名称。
希望这对您有所帮助，祝您好运。
由于
我用的link是： https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/configuring-https-elb.html
简而言之，通过 Configuration -> Load Balancer -> Modify 按钮，我必须配置我的 Elastic Beanstalk EC2 实例以使用带有侦听器的负载平衡。然后将我拥有的现有 SSL 证书与此侦听器相关联。
但是，当我一开始尝试这样做时，修改 按钮不存在（请注意它说负载平衡在我的配置中不可用）。
aws link 的一部分在您收到以下消息时提到了这一点：
Note If the Load balancer configuration category doesn't have a Modify button, your environment doesn't have a load balancer.
前进的方向是上面截图中的select Configuration -> Capacity -> Modify，然后select "Load Balanced" 而不是"Single Instance" 在 环境类型 下拉框中。
应用这些更改后，将为 配置 -> 负载平衡器 子面板启用 "modify" 按钮。我继续执行上述 AWS link 中的步骤，现在可以从我的 https://myreactapp.com 与我的 my-backend-webservices-app
进行通信