如何在 AWS S3 存储桶中使用 Angular 应用程序对 AWS Elastic Beanstalk 中的服务进行 API 调用

Question

I transferred a web site to AWS that has Angular on one server, Nodejs/Express on another server and using a PostgreSQL DB in RDB. This works great and is currently running but not great for scalability and availability.

So I have moved the Angular to be served from an S3 bucket accessed through CloudFront and updated with a WebHook into my GitHub repo. This all seems to work great.

I have the Nodejs/Express using Elastic Beanstalk and once again with using a WebHook it updates from the GitHub repo. Still have a couple items to work out on the deploy with this but I think they will be minor (which means they will bite me later).

What I cannot seem to figure out is a way to allow the Angular to do API calls to the load balancer in Elastic Beanstalk.

• Do I still use proxy.config.json? If so what do I point it to? I tried to create a CNAME record in Route 53 for api.myapp.com pointing to the value of the load balancer DNS. That didn't seem to work.

• Do I use AWS API Gateway. I tried some different things in here by didn't seem to be able to get it to work. The only thing that seemed a possibility would require me to define each of the APIs which if it is even possible would be my last resort.

• Is this something that cannot be done?

I have read a lot of articles of somewhat similar questions but none seemed to fit close enough to give me an answer. Maybe I am just looking at the incorrectly. Any help would be much appreciated.

---

Edited

After chasing many squirrels the past couple days I think I have it narrowed down to configuration issue with CloudFront.

• I have a route in Route 53 that points to my CloudFront as "dev.mydomain.com" and that works great.
• I have a route in Route 53 that points to my Elastic Beanstalk Load Balancer as "api.mydomain.com".
• I can make a call by entering the url into a browser such as " https://api.mydomain.com/api/getInfo " and it returns the information along with the cors headers. When I have the app make the same call that is being served from an S3 bucket by CloudFront I get "Access to XMLHttpRequest at ' https://api.mydomain.com/api/getInfo ' from origin ' https://dev.mydomain.com ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." and sure enough there is none of the cors headers in the response header.

I have found a couple articles that seem to deal with this but they have not worked (or I am implementing them incorrectly). I have tried to create an origin, I have tried to create a behavior. Nothing has worked so far.

I anyone has dealt with this or knows of an article that would help I would appreciate it greatly.

Answer 1

You can create a custom domain name for your load balancer url from Route53. You need to create an A record with Alias property set to yes pointing to the load balancer's dns URL.

Amazon Route 53 also offers alias records, which are an Amazon Route 53-specific extension to DNS. You can create alias records to route traffic to selected AWS resources, including Amazon Elastic Load Balancing load balancers, Amazon CloudFront distributions, AWS Elastic Beanstalk environments, API Gateways, VPC interface endpoints, and Amazon S3 buckets that are configured as websites

Hope this helps.

Reference:

Question "Which DNS record types does Amazon Route 53 support?" on https://aws.amazon.com/route53/faqs/

Answer 2

Solved

The answer to this question got me close to where I wanted to be but it still was not responding to all my calls. Finally figured out that it was the database calls that were not responding. I am not setting the database up with the elastic beanstalk since I am doing a proof of concept for a production setup so the database needs to be separate. Finally figured out that I had not added a rule in the security group on the database to allow the elastic beanstalk calls. After adding that rule and adding the behavior and origin rules in CloudFront it seems to work like a charm.