Menu
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.
335
Thanks! Yes, you can have webapp.com and www.webapp.com configured to the frontend, and api.webapp.com configured for the backend. The method of configuration will differ depending on how the domain is configured: using Netlify DNS or using external DNS.
You can't start both on the same one and if they are apart, it's impossible for the frontend code to access the backend endpoints. Fear not. If you really want to run both servers, you have to make sure that both are accessible through the same port.
An edge-optimized custom domain name is created in a specific Region and owned by a specific AWS account. Moving such a custom domain name between Regions or AWS accounts involves deleting the existing CloudFront distribution and creating a new one.
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).
120
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/*"
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
