3

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

Rodrigo Brickman
  • 163
  • 1
  • 1
  • 8

2 Answers2

1

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

marcincuber
  • 3,451
  • 1
  • 17
  • 29
  • No, I already tried that and the result is the same. Even the Api Gateway logs show the same. – Rodrigo Brickman Feb 21 '19 at 17:53
  • @RodrigoBrickman perhaps, but this should be the correct solution. The base path mapping is analogous to the `/{stage}` you use on the execute-api endpoint. If the request path sent by the client includes `/development` then the base path mapping needs to include it, too. Otherwise it should not, and should be set to `/`. It should not be possible for both configurations to yield the same test results. – Michael - sqlbot Feb 21 '19 at 21:01
  • @Michael-sqlbot I know it sounds weird, but changing the base path doesn't change what the logs show, it still gets a /development/ before the path to the file. I think maybe inserts that because of the stage configuration on the custom domain name? Anyways, changing that Base Path doesn't change the logs, I even tried with "testingthis" and still get that /development/ on the api gateway logs. Thanks – Rodrigo Brickman Feb 22 '19 at 14:17
1

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.

Bing Qiao
  • 451
  • 1
  • 5
  • 14