2

Deploying Springboot on Elastic Beanstalk and angular on cloudFront with SSL and route 53 configs.

Configurations :

  1. I have a domain at Route 53 from AWS, also have created a public certificate from AWS cm.

  2. I have Spring boot on Elastic beanstalk with load balancer (LB). LB has listeners at 80 and 443. 443 is configured with the SSL I created from aws Cert Manager. My LB security groups also have the inbound rules configured for https. I have deployed my jar and it is serving at this URL: http://waprodservice-env-1.eba-kzqan9yr.us-east-1.elasticbeanstalk.com/

  3. I have s3 bucket with my angular app with static web hosting at http://waapp.s3-website.ap-south-1.amazonaws.com . I have also configured the cloud front with the SSL that I created (Same as used in EB). I have also created a A record in route 53. All is well till now, I can access my domain and I can see my angular app from my domain name www.example.com with cert installed lock symbol.

PROBLEM:

While building my angular app with ng build --prod, I have changed the base url in env-prod file to http://waprodservice-env-1.eba-kzqan9yr.us-east-1.elasticbeanstalk.com/ where my spring boot is serving. When I visit my www.example.com (front end), after API call, I am getting ERR_CERT_COMMON_NAME_INVALID message as response. I know that my cert common name is not matching, I tried opening the certificate and was able to see the common name as example.com and issuer is amazon.com in both frontend and backend URLs. I don't know what s mismatching. When I visit backend EB url, it shows not secure on browser. But when I access some particular public end point from EB, it gives get that data I need even from https link. ->https://waprodservice-env-1.eba-kzqan9yr.us-east-1.elasticbeanstalk.com/public/astrologer .

FYI, I have created the certificate by giving values like *.myexample.com, myexample.com etc as mentioned in the docs.

What configurations are missing ? No other StackOverflow posts are helping. Tried most of them.

Mark B
  • 183,023
  • 24
  • 297
  • 295
Rajesh Lohith
  • 426
  • 3
  • 10

2 Answers2

1

You should set a custom domain name to the Elastic Beanstalk environment that matches your ACM certificate. Following your example, set something like api.myexample.com

To do that you just need to add an https listener on the Environment Load Balancer configuration pointing to your default process, then attach the ACM Certificate to the listener (they should be in the same region)

Then add an A Record to route api.example.com to the Elastic Beanstalk Environment

That should fix your issue with the ERR_CERT_COMMON_NAME_INVALID

P.S you should also set a redirection in the load balancer from port 80 to 443

arbermejo
  • 106
  • 5
  • I have already added the HTTPS listener in my LB and the certificate is also selected. Listener details: PORT 443, PROTOCOL: HTTPS, SSL: mycert same as frontend, SSL POLICY: ELBFS-2018-06, Default process: default. I think I meet your first criteria. But, I am confused about this A Record, because, I have already added one A record pointing to my CloudFront URL which has angular (https://db29xrl1ukurm.cloudfront.net). So, my A record looks like: Record name : askvedicastrologers.com, Record type A, Value: db29xrl1ukurm.cloudfront.net., Alias: Yes. – Rajesh Lohith Feb 21 '22 at 22:01
  • Add a second record pointing to the beanstalk environment. You will end up with two records, one for the Cloudfront Distribution (Frontend) and another for the Elastic Beanstalk Environment (Backend) – arbermejo Feb 21 '22 at 22:05
  • So, Route 53 record has 2 records, one A record for askvedicastrologers.com pointing to CloudFront and another for api.askvedicastrologer.com pointing to my EB. Same issue exists, Does it take time ?? from my front end, what base url should I call ? It should be https://EB link right ??? – Rajesh Lohith Feb 21 '22 at 22:14
  • Can you please vote my question and answer? That would help me a lot to ask more questions. – Rajesh Lohith Jul 05 '22 at 05:18
1

THANK YOU SO MUCH @ARBERMEJO.

So, here is the answer. After uploading my angular build to s3, I created a CloudFront using that s3 URL as shown in a lot of youtube videos. Then for the backend EB, for configurations, check above, and final part is, I have to create an A record in my hosted zone for my domain. check image. enter image description here

I have to add api.mydomain.com, in my second row (just type API in record name) and route traffic to load balancer which can be seen in the image.

THE MAGICAL PART IS : YOU SHOULD CALL https://api.mydomain.com FROM YOUR ANGULAR PROD BUILD BASE URL. THIS IS NOT MENTIONED IN A LOT OF TUTORIALS.

If you call your EB link from frontend, which in my case is https://waprodservice-env-1.eba-kzqan9yr.us-east-1.elasticbeanstalk.com/ , it will throw SSL common name error from backend/EB LB (not sure which one.).

Rajesh Lohith
  • 426
  • 3
  • 10