Serving a S3 bucket and an API Gateway through CloudFront

Question

I want to serve the front end of a web app from a S3 bucket at this url: www.acme.com.

At the same time, I want the backend be served from an API Gateway stage (lambda functions are running behind) at this url: www.acme.com/api (I don't a api.acme.com url to avoid having to deal with a broken Same Origin policy).

At this time, I could set up Cloudfront to serve the S3 bucket or the API Gateway stage but not together.

I tried to declare both as resources (first the bucket and then the API Gateway) and two paths in behavior (the default path to the bucket and a second /api to the Gateway). The bucket is served well but a GET to www.acme.com/api/users leads to:

{"message":"Missing Authentication Token"}

Thanks for all clue about how I could resolve this issue.

Answer 1

My fault: I've set the Origin Path to /api in Origin and the Path Pattern to api/* in Behavior. I don't know why but I made the assumption the setting api/* in Behavior would cut "api/" in the url path. Indeed, with this set up, CF was routing to an inexistent url (/api/api/...) inside API GW.

That's why I got a: {"message":"Missing Authentication Token"}.

Conclusion: if you use more than one stage in your Gateway, the stage will be the base of the path of your url and you should not leave the Origin Path blank.