I registered a domain on Route53 and I would like to use the same domain for both my front-end and the back-end (example xyz.com).
The whole infrastructure is hosted on AWS.
The font-end is an app hosted on S3 and fronted by cloudfront.
The back-end is served via API Gateway.
I created a record of type A to point the API Gateway endpoints and I now try to create a new record of type A to serve the front-end (point cloudfront) which doesn't allow me, returning the error:
A record with the specified name already exists.
What is the correct way to achieve having both the front-end and the back-end behind the same domain?
First of all, you can not create multiple A records like that.
As luk2302 said, the normal approach is use two domains. But if you want to keep the same domain for both FE and BE, you can use multiple path patterns of CloudFront to do the routing for you.
It will look like this: You have 1 CloudFront distribution, it will have 2 behaviors with 2 origins: S3 and API Gateway. The first behavior will have path pattern /api/* and it will point to API Gateway's Origin. And the default path pattern will go to S3's Origin