CODEWITHSUNDEEP
amazon-web-servicesaws-api-gatewayamazon-cloudfrontamazon-route53
Rodrigo Brickman
Rodrigo Brickman

Reputation: 173

AWS Api gateway custom domain routing to wrong base url

I'm developing an Angular Universal serverless app in AWS Lambda/Api gateway. The app works perfectly using the standard api url ( {api-id}.execute-api.{region}.amazonaws.com/{stage}/) but now I'm trying to deploy it in a human-readable url using Api Gateway's Custom domain names.

For that I followed the docs and troubleshooted using other stackoverflow's questions, but now I'm faced with a problem and can't find another question that looks like my problem.

I have already setup the API, the custom domain name (which created a cloudfront distribution) and a Route53 A-type ALIAS routing to this new cloudfront distribution and the routing kind of works. The problem I'm facing is that when I'm using the new domain name, the angular app cant find assets like CSS, Icons,etc. All of them works fine using the standard api url but not with the custom.

To do some debugging I configured Api Gateway to log requests to CloudWatch, and I can see that when I'm using the standard url, the resource path log is like this:

HTTP Method: GET, Resource Path: /main.4d57a71fd195330e8ee9.js

But when I use the custom URL the same log is like this:

HTTP Method: GET, Resource Path: /development/main.4d57a71fd195330e8ee9.js

I'm guessing it has something to do with the base URL in the custom domain name configuration of Api Gateway, I tried changing it to everything I could think of but nothing fixed it.

Here is a screenshot of my Api Gateway configuration.

Api gateway - Custom Domain Names configuration

Tell me if you need anything more and sorry if bad english.

Thanks in advance.

EDIT: I should make clear that I'm trying to point to the "development" stage of my api

Upvotes: 3

Views: 1963

Answers (2)

Bing Qiao
Bing Qiao

Reputation: 481

I had similar problem. The only workaround for me is to set baseHref to "/" in environment.serverless.ts and have one single mapping in custom domain name from "/" to "{YOUR-API}:production".

This breaks direct url access to the API but access via custom domain name works fine.

Upvotes: 1

marcincuber
marcincuber

Reputation: 3791

I believe you simply need to reconfigure your custom domain. It should be sufficient for you to change the following;

In "Base Path Mappings" section change Path from "/development" to just "/"

Upvotes: 1

Related Questions