I’m trying to serve content and implement some APIs under the same domainbut can’t find a good example of mixing static content with lambda based APIs.
If I use domain manager plugin I have secured APIs with my domain but can’t work out how to serve static content (images, html, android .well-known assets etc) via cloudfront under the same domain
Anyone got a full working example?
Its really a better idea to keep them seperate. Our solution is to have a git repo for all the frontend work on Gitlab (but you can also do this on Bitbucket for example) and use their CI/CD system to automatically build the optimised static assets for the Vue/Angular/React/Whatever framework being used and send push them at an S3 bucket on deployment. That way the configuration of the git repo sets up where the files are pushed to not the developers in code.
I’m all for keeping them separate. The issue I was seeing is that, when I use the domain manager plugin (for API calls requiring authentication) it creates some sort of ‘hidden’ cloudfront set up. When I then try to serve static content from an S3 bucket by setting up a new cloudfront distribution, all the request to my domain (e.g. https://www.mydomain.com/static, https://www.mydomain.com/.well-known/assetlinks.json etc) are also protected (require an a bearer token) by this ‘hidden’ cloudfront distribution.
I’m just not sure how to have both public static content, and protected APIs (lambdas).
You can set up a CloudFront distribution with your static assets in an S3 bucket. Then create another “origin” that points to your API Gateway and set the caching behavior appropriately.