Using same domain name for frontend and backend deployment in aws

Question

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.

Answer 1

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).

Answer 2

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

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/*"