deploying an angular app on aws cloudfront

Question

I have a laravel php app which is basically an api that the user will access through an angular single page app. Currently the angular app is contained with the public folder but I want to break it off on its own so that I can deploy it via amazon cloudfront.

I found this article for hosting static websites on CloudFront which explains the basics but I cannot find anything that discusses the hitting of an api with your cdn served site.

I would like to still be able to have 3 different environments, dev/staging and production which each currently have their own elastic beanstalk managed instances and seperate databases. I would like their addresses to be dev.blah.com / staging.blah.com and blah.com respectively and have each version of the angular app hit the correct backend etc.

I would like to be able to deploy the angular app in a similar way to how I deploy to elastic beanstalk, ie git push

Can I set it up so I dont need to modify the api endpoints in the angular app for each environment. ie the dev version hits dev.blah.com/get/user/1 and with the same source the staging hits staging.blah.com/get/user/1? Will this happen automatically or do I need to take specific actions to allow for this?

Are all these things possible? I dont expect a step by step guide but just looking for an outline of the process and a push towards where I can find the resources to learn how to do this myself as my searches have not resulted in much

Answer 1

On CloudFront, in the "behaviors" tab of your distribution, you can assign a path to every origin. For example, you can specify that /* requests are redirected to a S3 bucket with your static resources but /api/* is redirected to your api backend.

As for the dev/staging/prod environments, those would probably be 3 different distributions too. They can point to the same or to different origins.

See "Whole Site Delivery with CloudFront"