Static Web App versioning with S3 and Cloudfront

Question

Currently I am using S3 and CloudFront to host a static Angular App.

I want to version the app every time I made a deploy in order to ensure easy rollback (through my command line tools or automatic pipeline).

My S3 bucket would look something like this:

/production/v1.2
/production/v1.3
/production/v1.4

Next deploy will be in the folder /production/v1.5 and so on.

I want to use this strategy so that in case of rollback I just point the website to load from the old version /production/v1.4.

• My first solution to do this is update the CloudFront config Origin Path to point to the new folder, example /production/v1.4
• In case of rollback I just update the CloudFront config Origin Path to /production/v1.3

---

The second solution instead I was thinking to have a live/ folder and have a CloudFront Origin Path pointing to the live/index.html folder in S3 and copy there the last version of my app or copy the rollback version everytime without changing CloudFront Origin Path:

/production/v1.2
/production/v1.3
/production/v1.4
/production/live

• Deploy the new version in /production/v1.4 and /production/live
• In case of rollback just copy /production/v1.3 to /production/live

Considering that it is not easy to update the CloudFront distrubution settings via cli and cache invalidations:

What do you recommend? Is there a better way to handle this kind of situation?

Answer 1

For your requirement i have created python library which job of deployment and backup folder creation for rollback operation. Also its include CloudFront cache invalidation.

https://github.com/aviboy2006/angular-upload-s3cf

Answer 2

Not sure if this is a solution for most of you but I have already implemented this proof of concept on our production environment;

I needed to implement an content-security-policy with a nonce. There for I implemented a API gateway which serves a lambda function which contains our Index.html file and a js function to add headers (content-security-policy with a nonce)

As we still use Angularjs 1.X the index.html file links the whole application together (this probably counts for most one-page-applications). Our CSS and JS files are timestamped (in their filename) so its not being cached by cloudfront on each new deployment. If I want to roleback my application I can use Lambda's build in versioning.

Example of how you can implement an API gateway + lambda function to serve your index.html file https://github.com/csarkosh/readme-viewer/tree/master

csarkosh explains his adventure in not so much detail in his medium post: https://medium.com/@csarkosh/my-experience-getting-an-a-from-mozillas-observatory-tool-on-aws-f0abf12811a1