How to Deploy on AWS w/ S3 and Cloudfront?

AWS stands for Amazon Web Services.S3 is their static storage which can be configured for Static Site Hosting.Cloudfront is their CDN (content delivery network)

Hosting a static generated Nuxt app on AWS w/ S3 + Cloudfront is powerful and cheap.

AWS is a death by 1000 paper cuts. If we missed a step, please submit a PR to update this document.

Overview

We'll host super cheap with some AWS services. Briefly:

  • S3
    • cloud data "bucket" for our website files
    • can be configured to host static websites
  • CloudFront
    • a CDN (content delivery network)
    • offers free HTTPS certs
    • Makes your site load faster

We'll push the site like this:

  1. Nuxt Generate -> Local folder -> AWS S3 Bucket -> AWS Cloudfront CDN -> Browser
  2.   [      nuxt generate       ]    [         gulp deploy          ]
  3.   [                         deploy.sh                            ]

First, we'll generate the site with nuxt generate.Then, we'll use Gulp to publish the files to a S3 bucket and invalidate a CloudFront CDN.

Our deploy script needs these environment variables set:

  • AWS_BUCKET_NAME="example.com"
  • AWS_CLOUDFRONT="UPPERCASE"
  • AWS_ACCESS_KEY_ID="key"
  • AWS_SECRET_ACCESS_KEY="secret"

We'll have these files: 

  1. deploy.sh       -  run `nuxt generate` and `gulp deploy`
  2. gulpfile.js     -  `gulp deploy` code to push files to S3 and invalidate CloudFront

Setting it up

  • Make a S3 bucket and configure it for static site hosting
  • Create a CloudFront distribution
  • Configure security access
  • Setup build script in your project

AWS: Setup your S3 bucket and CloudFront Distribution

Please follow this tutorial to setup your S3 and CloudFront for step one and two.

You should now have this data:

  • AWS_BUCKET_NAME="example.com"
  • AWS_CLOUDFRONT="UPPERCASE"

AWS: Configure security access

For step 3, we need to create a user that can:

  • Update the bucket contents
  • Invalidate the CloudFront distribution (propagates changes to users faster)

Create a programmatic user with this policy:

NOTE: replace 2x example.com with your S3 bucket name below. This policy allows pushing to the specified bucket, and invalidating any CloudFront distribution.

  1. {
  2.     "Version": "2012-10-17",
  3.     "Statement": [ {
  4.             "Effect": "Allow",
  5.             "Action": [ "s3:ListBucket" ],
  6.             "Resource": [
  7.                 "arn:aws:s3:::example.com"
  8.             ]
  9.         }, {
  10.             "Effect": "Allow",
  11.             "Action": [
  12.                 "s3:PutObject",
  13.                 "s3:PutObjectAcl",
  14.                 "s3:GetObject",
  15.                 "s3:GetObjectAcl",
  16.                 "s3:DeleteObject",
  17.                 "s3:ListMultipartUploadParts",
  18.                 "s3:AbortMultipartUpload"
  19.             ],
  20.             "Resource": [
  21.                 "arn:aws:s3:::example.com/*"
  22.             ]
  23.         }, {
  24.             "Effect": "Allow",
  25.             "Action": [
  26.                 "cloudfront:CreateInvalidation",
  27.                 "cloudfront:GetInvalidation",
  28.                 "cloudfront:ListInvalidations",
  29.                 "cloudfront:UnknownOperation"
  30.             ],
  31.             "Resource": "*"
  32.         }
  33.     ]
  34. }

Then get an access key and secret.

You should now have this data:

  • AWS_ACCESS_KEY_ID="key"
  • AWS_SECRET_ACCESS_KEY="secret"

Laptop: Setup your project's build script

4.1) Create a deploy.sh script. See optional nvm (node version manager).

  1. #!/bin/bash
  3. export AWS_ACCESS_KEY_ID="key" 
  4. export AWS_SECRET_ACCESS_KEY="secret" 
  5. export AWS_BUCKET_NAME="example.com" 
  6. export AWS_CLOUDFRONT="UPPERCASE"
  8. # Load nvm (node version manager), install node (version in .nvmrc), and npm install packages
  9. [ -s "$HOME/.nvm/nvm.sh" ] && source "$HOME/.nvm/nvm.sh" && nvm use
  10. # Npm install if not already.
  11. [ ! -d "node_modules" ] && npm install
  13. npm run generate
  14. gulp deploy

4.2) Make deploy.sh runnable and DON'T CHECK INTO GIT (deploy.sh has secrets in it)

  1. chmod +x deploy.sh
  2. echo "
  3. # Don't commit build files
  4. node_modules
  5. dist
  6. .nuxt
  7. .awspublish
  8. deploy.sh
  9. " >> .gitignore

4.3) Add Gulp to your project and to your command line 

  1. npm install --save-dev gulp gulp-awspublish gulp-cloudfront-invalidate-aws-publish concurrent-transform
  2. npm install -g gulp

4.4) Create a gulpfile.js with the build script

  1. const gulp = require('gulp')
  2. const awspublish = require('gulp-awspublish')
  3. const cloudfront = require('gulp-cloudfront-invalidate-aws-publish')
  4. const parallelize = require('concurrent-transform')
  6. // https://docs.aws.amazon.com/cli/latest/userguide/cli-environment.html
  8. const config = {
  10.   // Required
  11.   params: {
  12.     Bucket: process.env.AWS_BUCKET_NAME
  13.   },
  14.   credentials: {
  15.     accessKeyId: process.env.AWS_ACCESS_KEY_ID,
  16.     secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
  17.     signatureVersion: 'v3'
  18.   },
  20.   // Optional
  21.   deleteOldVersions: false, // NOT FOR PRODUCTION
  22.   distribution: process.env.AWS_CLOUDFRONT, // CloudFront distribution ID
  23.   region: process.env.AWS_DEFAULT_REGION,
  24.   headers: { /* 'Cache-Control': 'max-age=315360000, no-transform, public', */ },
  26.   // Sensible Defaults - gitignore these Files and Dirs
  27.   distDir: 'dist',
  28.   indexRootPath: true,
  29.   cacheFileName: '.awspublish',
  30.   concurrentUploads: 10,
  31.   wait: true // wait for CloudFront invalidation to complete (about 30-60 seconds)
  32. }
  34. gulp.task('deploy', function () {
  35.   // create a new publisher using S3 options
  36.   // http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#constructor-property
  37.   const publisher = awspublish.create(config)
  39.   let g = gulp.src('./' + config.distDir + '/**')
  40.   // publisher will add Content-Length, Content-Type and headers specified above
  41.   // If not specified it will set x-amz-acl to public-read by default
  42.   g = g.pipe(parallelize(publisher.publish(config.headers), config.concurrentUploads))
  44.   // Invalidate CDN
  45.   if (config.distribution) {
  46.     console.log('Configured with CloudFront distribution')
  47.     g = g.pipe(cloudfront(config))
  48.   } else {
  49.     console.log('No CloudFront distribution configured - skipping CDN invalidation')
  50.   }
  52.   // Delete removed files
  53.   if (config.deleteOldVersions) { g = g.pipe(publisher.sync()) }
  54.   // create a cache file to speed up consecutive uploads
  55.   g = g.pipe(publisher.cache())
  56.   // print upload updates to console
  57.   g = g.pipe(awspublish.reporter())
  58.   return g
  59. })

4.5) Deploy and debug

Run it:

  1. ./deploy.sh

You should get an output similar to this:

  1. $ ./deploy.sh                                                                                                                 
  3. Found '/home/michael/scm/example.com/www/.nvmrc' with version <8>
  4. Now using node v8.11.2 (npm v5.6.0)
  6. > example.com@1.0.0 generate /home/michael/scm/example.com/www
  7. > nuxt generate
  9.   nuxt:generate Generating... +0ms
  10.   nuxt:build App root: /home/michael/scm/example.com/www +0ms
  11.   nuxt:build Generating /home/michael/scm/example.com/www/.nuxt files... +0ms
  12.   nuxt:build Generating files... +36ms
  13.   nuxt:build Generating routes... +10ms
  14.   nuxt:build Building files... +24ms
  15.   ████████████████████ 100% 
  17. Build completed in 7.009s
  21.  DONE  Compiled successfully in 7013ms                                                                                                                                     21:25:22
  23. Hash: 421d017116d2d95dd1e3
  24. Version: webpack 3.12.0
  25. Time: 7013ms
  26.                                    Asset     Size  Chunks             Chunk Names
  27.      pages/index.ef923f795c1cecc9a444.js  10.6 kB       0  [emitted]  pages/index
  28.  layouts/default.87a49937c330bdd31953.js  2.69 kB       1  [emitted]  layouts/default
  29. pages/our-values.f60c731d5c3081769fd9.js  3.03 kB       2  [emitted]  pages/our-values
  30.    pages/join-us.835077c4e6b55ed1bba4.js   1.3 kB       3  [emitted]  pages/join-us
  31.        pages/how.75f8cb5bc24e38bca3b3.js  2.59 kB       4  [emitted]  pages/how
  32.              app.6dbffe6ac4383bd30a92.js   202 kB       5  [emitted]  app
  33.           vendor.134043c361c9ad199c6d.js  6.31 kB       6  [emitted]  vendor
  34.         manifest.421d017116d2d95dd1e3.js  1.59 kB       7  [emitted]  manifest
  35.  + 3 hidden assets
  36. Hash: 9fd206f4b4e571e9571f
  37. Version: webpack 3.12.0
  38. Time: 2239ms
  39.              Asset    Size  Chunks             Chunk Names
  40. server-bundle.json  306 kB          [emitted]  
  41.   nuxt: Call generate:distRemoved hooks (1) +0ms
  42.   nuxt:generate Destination folder cleaned +10s
  43.   nuxt: Call generate:distCopied hooks (1) +8ms
  44.   nuxt:generate Static & build files copied +7ms
  45.   nuxt:render Rendering url /our-values +0ms
  46.   nuxt:render Rendering url /how +67ms
  47.   nuxt:render Rendering url /join-us +1ms
  48.   nuxt:render Rendering url / +0ms
  49.   nuxt: Call generate:page hooks (1) +913ms
  50.   nuxt: Call generate:page hooks (1) +205ms
  51.   nuxt: Call generate:page hooks (1) +329ms
  52.   nuxt: Call generate:page hooks (1) +361ms
  53.   nuxt:generate Generate file: /our-values/index.html +2s
  54.   nuxt:generate Generate file: /how/index.html +0ms
  55.   nuxt:generate Generate file: /join-us/index.html +0ms
  56.   nuxt:generate Generate file: /index.html +0ms
  57.   nuxt:render Rendering url / +2s
  58.   nuxt: Call generate:done hooks (1) +4ms
  59.   nuxt:generate HTML Files generated in 11.8s +5ms
  60.   nuxt:generate Generate done +0ms
  61. [21:25:27] Using gulpfile ~/scm/example.com/www/gulpfile.js
  62. [21:25:27] Starting 'deploy'...
  63. Configured with CloudFront distribution
  64. [21:25:27] [cache]  README.md
  65. [21:25:27] [cache]  android-chrome-192x192.png
  66. [21:25:27] [cache]  android-chrome-512x512.png
  67. [21:25:27] [cache]  apple-touch-icon.png
  68. [21:25:27] [cache]  browserconfig.xml
  69. [21:25:27] [cache]  favicon-16x16.png
  70. [21:25:27] [cache]  favicon-32x32.png
  71. [21:25:27] [cache]  favicon.ico
  72. [21:25:27] [cache]  favicon.svg
  73. [21:25:27] [cache]  logo-branches.svg
  74. [21:25:27] [cache]  logo-small.svg
  75. [21:25:27] [cache]  logo.svg
  76. [21:25:27] [cache]  mstile-150x150.png
  77. [21:25:27] [cache]  og-image.jpg
  78. [21:25:27] [cache]  safari-pinned-tab.svg
  79. [21:25:27] [cache]  site.webmanifest
  80. [21:25:28] [create] _nuxt/manifest.421d017116d2d95dd1e3.js
  81. [21:25:29] [update] 200.html
  82. [21:25:30] [create] videos/flag.jpg
  83. [21:25:30] [create] _nuxt/vendor.134043c361c9ad199c6d.js
  84. [21:25:34] [create] videos/flag.mp4
  85. [21:25:34] [cache]  _nuxt/pages/how.75f8cb5bc24e38bca3b3.js
  86. [21:25:34] [cache]  _nuxt/pages/join-us.835077c4e6b55ed1bba4.js
  87. [21:25:34] [cache]  _nuxt/pages/our-values.f60c731d5c3081769fd9.js
  88. [21:25:36] [update] our-values/index.html
  89. [21:25:36] [create] _nuxt/layouts/default.87a49937c330bdd31953.js
  90. [21:25:36] [create] _nuxt/app.6dbffe6ac4383bd30a92.js
  91. [21:25:37] [create] _nuxt/pages/index.ef923f795c1cecc9a444.js
  92. [21:25:38] [update] join-us/index.html
  93. [21:25:38] [update] how/index.html
  94. [21:25:43] [create] videos/flag.webm
  95. [21:25:43] [update] index.html
  96. [21:25:43] CloudFront invalidation created: I16NXXXXX4JDOA
  97. [21:26:09] Finished 'deploy' after 42 s

Note that the CloudFront invalidation created: XXXX is the only output from the CloudFront invalidation npm package. If you don't see that, it's not working.