Deploying Springboot on Elastic Beanstalk and angular on cloudFront with SSL and route 53 configs.
Configurations :
I have a domain at Route 53 from AWS, also have created a public certificate from AWS cm.
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/
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.
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.).
