2

Using Grunt, NodeJs and Express, what module(s) should I use to:

  1. Discover all static assets (frontend JS, CSS, images) in the app, either by looking at an asset directory or parsing through the codebase

  2. Upload assets to Amazon S3 / CloudFront, renaming each file with a unique "fingerprinted" name

  3. Replace each asset's path in the codebase with the CloudFront URL

  4. Invalidate old CDN assets

This is my first time using CloudFront. I am not sure if all of the above can be accomplished with Grunt, or whether it is best accomplished as a Node/Express module.

With Rails, I've read it's as easy as: 

# Setup amazon CDN
config.action_controller.asset_host = "xxxxxxxxxxxxx.cloudfront.net"

and I'm looking for a similar solution for a Node stack.

Community
  • 1
  • 1
max
  • 617
  • 8
  • 20

1 Answers1

5

Invalidating CDN assets is a Bad Idea ®. In CloudFront, it may take up to 15 minutes to complete - that would be adding 15 minutes to your deploy. Also, some browsers may hold old files because the URL is the same.

Instead, you should probably version you static assets and publish new versions under different version names.

For example: 

my-app/1.2.3/main.js
my-app/1.2.4/main.js

So on, and so forth.

This gives you two advantages:

  • You can cache forever, confidently. The same URL will always serve the same file.
  • You can rollback quickly in case of a disaster deploy. Old files are where they were.

For deploying to S3, there are specific plugins for that. I, however, prefer to simply use grunt-shell in tandem with the official Amazon AWS CLI

Configuring it would look something like this: 

shell: {
  cp: {
    command: "aws s3 cp --recursive dist/ s3://my-bucket/my-app/"
  }
}

You can use grunt to read a version variable from somewhere and automatically put all files inside the dist/{version}/ folder, while replacing any paths in your html to the correct version path.

Guilherme Rodrigues
  • 2,818
  • 1
  • 17
  • 22
  • 1
    Definitely disaster roll-back is a great reason to keep content versioned – Alex Z Jan 14 '15 at 01:21
  • 1
    Love this approach. What module would I use to do (3) - "replace each asset's path in the codebase with the CloudFront URL?" Do you handle this with grunt or express? – max Jan 14 '15 at 16:31
  • You can use the `process` option in [grunt-contrib-copy](https://github.com/gruntjs/grunt-contrib-copy). While copying from one directory to the other, simply replace paths with a regex. There are more advanced plugins but I find copy to be more than enough for this purpose. Here's a personal example: https://github.com/vtex/grunt-vtex/blob/master/lib/config.coffee#L38 – Guilherme Rodrigues Jan 15 '15 at 01:09
  • We're implementing this now - where do you store your app version? Grunt? Config file in the app? – max Feb 02 '15 at 16:06
  • package.json. See github.com/vtex/releasy – Guilherme Rodrigues Feb 02 '15 at 16:59