Deploying an angular app in aws cloudfront

Question

I have a laravel php application, which is basically an api with which the user will access through a single-page angular application. Currently, the angular application is contained in a shared folder, but I want to disable it myself so that I can deploy it through the amazon cloud area.

I found this article for hosting static websites on CloudFront that explains the basics, but I can't find anything that discusses the api defeat with your cdn served site.

I would like to be able to have 3 different environments, dev / staging and production, each of which currently has its own beans managed instances and separate databases. I would like their addresses to be dev.blah.com/staging.blah.com and blah.com, respectively, and each version of the angular application will fall into the correct backend, etc.

I would like to be able to deploy an angular application in the same way as I deploy on an elastic beanstalk, i.e. git push

Can I customize it, so I don’t need to change the api endpoints in the angular app for each environment. those. Does the dev version go to dev.blah.com/get/user/1, and with the same source at the staging.blah.com/get/user/1 stage? Will this happen automatically or do I need to take certain actions to resolve this?

Is all this possible? I do not expect a step-by-step guide, but just looking for the outline of the process and an impetus to where I can find resources to find out how to do it myself, since my searches did not lead to significant

Answer 1

On CloudFront, on the "behavior" tab of your distribution, you can assign a path for each source. For example, you can indicate that / * requests are redirected to the S3 bucket with your static resources, but / api / * is redirected to your api server.

As for dev / staging / prod environments, it will probably also be 3 different distributions. They may indicate the same or a different origin.

See “ Delivering an Entire Site Using CloudFront ”