18

I am trying to deploy my angular app and nodejs server on aws. To deploy the angular app, I am using s3 bucket and enable static website hosting. To deploy nodejs, I am using ec2. I have chosen to keep both the server and angular frontend separate.

I wanted to know how this will be available to the outside world. I have purchased a domain name say www.example.com. I am attaching with an s3 bucket, so upon launching www.example.com, I get to see my angular app. But I also want to use the same domain for my nodejs server as my angular app is making API calls to the nodejs server. Do I need to purchase a different domain for my backend server? In my local development, I was simply running my frontend on localhost:4200 and nodje on localhost:3000. But I am not sure how it would work on the cloud.

Udara Abeythilake
  • 1,215
  • 1
  • 20
  • 31
Noober
  • 1,516
  • 4
  • 22
  • 48
  • 1
    You could use something like Amazon's API Gateway or stand up a reverse proxy that splits traffic between the API and UI servers, or you just get a 2nd domain for the API (`api.example.com`) and configure the UI to talk to that. – Joe Jun 05 '19 at 11:57
  • Does this answer your question? [CloudFront static website and EC2 API on same domain](https://stackoverflow.com/questions/47835678/cloudfront-static-website-and-ec2-api-on-same-domain) – tim-phillips Oct 23 '20 at 18:56
  • @Joe, you don't buy subdomains. If you want a subdomain for example.com, you need to create A or CNAME records in the DNS configuration so that it resolves the subdomain to IPs or services different from the apex domain. If you want to use CloudFront or possibly other AWS services as origins, you'll need to use AWS Route53 DNS service. – Christoph Jan 04 '21 at 02:22

2 Answers2

21

There are multiple solutions to this problem.

You could have www.example.com point to your S3 bucket and api.example.com point to your backend.

Another solution would be to use CloudFront and configure it with multiple origins: one for your frontend (S3) and one for your backend (custom origin, API gateway or Application Load Balancer). You would then have a specific behavior like /api/* serve your backend. This solution has the advantage of having a CDN in front of both your frontend and backend and avoiding CORS request in the frontend (+ many more features offered by CloudFront).

jogold
  • 6,667
  • 23
  • 41
  • This is great. I was able to successfully launch it using the above solution. Thanks a lot. – Noober Jun 05 '19 at 16:31
  • hi, wouldn't cloudfront in front of API will mean extra cost (for http/ https requests). – Aniket Singla Oct 17 '20 at 12:37
  • If you set up a Custom Error Response in CloudFront it will also swallow HTTP error codes from your API. Afaik, these custom error responses cannot be applied to specific paths. – tim-phillips Oct 23 '20 at 18:45
11

I've made the following diagram showing the pieces which this request will flow through:

Request flow

As @jogold has said, the key is CloudFront, which will behave redirecting to FrontEnd or BackEnd (Same distribution, multiple origins, multiple behaviors)

Remember to create a new origin ("Origins and Origin Groups" tab), but also a new behavior ("Behaviors" tab): Use the expected "Path Param" (Your app also should have this as a BasePath) and pay attention to "Precedence" (Default must always be the last).

In my case, "PathParam" value for BackEnd was "/api/*"

CloudFront example behaviors

Francisco Cardoso
  • 1,438
  • 15
  • 20