Using same custom domain URL for both API Gateway and S3 bucket

Hi all-

I’m working on a SPA which will be hosted in an S3 bucket and works in conjunction with a few serverless lambdas. Ideally I would like to use the same URL for both of these, for example:

https://app.mydomain.com/api/* -> API Gateway / Lambda endpoints
https://app.mydomain.com/* -> S3 bucket index.html file

I’ve been able to set up a custom domain using my lambda using serverless-domain-manager for the lambda, and separately I’ve been able to set up a CloudFront Distribution for the S3 bucket, but I don’t see a way to create a single CF distribution that will point /api to API Gateway, and everything else to the S3 bucket.

An alternative approach would be something like:

https://api.app.mydomain.com/api/* -> API Gateway / Lambda endpoints
https://app.mydomain.com/* -> S3 bucket index.html file

which would have 2 cloudfront distributions, one for the API, and one for the SPA. The downside of this is I need to configure CORS, which has been causing me headaches because I’m trying to use the default cognito authorizer on the API endpoints, and due to CORS issues I’m not getting the authorization errors returned to my app (I get CORS errors instead). There are other ways to solve that, but was hoping I could use the same URL and avoid doing that…

Any help would be appreciated. Thanks!

Hi , were you able to solve this ? I am stuck with same issue

No - I ended up implementing the “Alternative Approach” I described above - a separate domain for the API (which necessitated CORS…).

I know it might be a little too late, but that can be done with AWS CloudFront.
You can configure the routing rules there.