Static Web App versioning with S3 and Cloudfront

user_354881 0
Viewed 1838

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?

angular amazon-cloudfront static amazon-s3
2 Answers
user_62850540

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

user_139810270
Related