I am new to AWS, and I am having problem to use SSL https to connect my Angular frontend (S3 and CloudFront) to the backend (EC2 with Load Balancer).
Here is what I have done:
- Backend is Spring boot (no SSL certification), frontend is angular, database is mySql, domain is from GoDaddy.com.
- Everything works without SSL (https), I can reach my website(non-secure) through http, and the requests from frontend got status 200, and database is updated, all works fine.
- The nightmare starts when I implements SSL. What I did is as below:
- got SSL certification from AWS
- use CloudFront in front of S3 bucket, which contains the Angular js files and serve as static website
- use Load Balancer for EC2 instance
- Load Balancer is listening https 443, and target is using http to EC2 instance
The frontend is loaded with https, but all the requests to backend are blocked. The error in console is "...This request has been blocked, the content must be served over HTTPS".
If I change load balance target to https, and use the AWS certificate, then all the request from frontend with end up with 403 forbidden.
I wonder where I could be wrong. I assume load balancer can forward https to http targets, since I read many articles talking about this.
I wish someone can help me with this, thanks.
I have tried in Angular to use both http and https when making requests. The requests are either blocked or received 403 forbidden.
CodePudding user response：
The frontend is loaded with https, but all the requests to backend are blocked. The error in console is "...This request has been blocked, the content must be served over HTTPS".
That error message means your Angular app is still making requests over HTTP to the backend. Just because you enabled SSL on the load balancer doesn't mean the Angular app will automatically start using that. You need to make sure your Angular app has been modified so that it is connecting to the load balancer URL, not the EC2 instance, and that it is using https:// for the connection.
Alternatively, you could setup HTTP to HTTPS redirects on the load balancer.
If I change load balance target to https, and use the AWS certificate, then all the request from frontend with end up with 403 forbidden.
That is the wrong thing to do. The error you are getting is from the web browser, saying that traffic between the web browser and the load balancer isn't HTTPS. What you are changing in the target group is the traffic between the load balancer and the EC2 server, which isn't even going to work since there is no SSL certificate on the EC2 server.
I wonder where I could be wrong. I assume load balancer can forward https to http targets, since I read many articles talking about this.
Yes, that is absolutely correct. You need the connection to be secure between the web browser and the load balancer, which sounds like what you have setup in AWS.
CodePudding user response：
So I finally made it work with one pending issue, here is a summary what I have done:
- Request SSL certificate from AWS, domain name is same as the website domain name ('www.example.com', and additional domain name 'example.com').
- Upload Angular built files to S3, configure it as static web hosting
- Create CloudFront to work in front of the S3 bucket. Apply the certificate.
- In Route53 create record 'myDomain.com' points to the CloudFront, and in GoDaddy, forward the traffic to the record values. At this point, user should be able to visit the site frontend by https.
- Upload spring boot jar files to Elastic Beanstalk. Create database accordingly.
- Configure EC2 to use load balancer
- Configure load balancer to use same certificate
- In Route53 create record 'www.example.com' that points to the load balancer.
Now, user can visit the site by 'https://example.com', and both front end and backend are working. But the thing is I have to make the record 'www.example.com' point to the load balancer, therefore when user visit 'https://www.example.com', he will hit the load balancer, not the Angular frontend. @Mark any suggestions?