How to Deploy on AWS w/ S3 and Cloudfront?

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

    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:

    First, we'll generate the site with .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" 
    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

    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"

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

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

    :

    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:UnknownOperation"
    29.             ],
    30.             "Resource": "*"
    31.         }
    32.     ]
    33. }

    Then get an access key and secret.

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

    4.1) Create a deploy.sh script. See optional .

    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

    4.4) Create a gulpfile.js with the build script

    4.5) Deploy and debug

    Run it:

    1. ./deploy.sh
    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.              Asset    Size  Chunks             Chunk Names
    39. server-bundle.json  306 kB          [emitted]  
    40.   nuxt: Call generate:distRemoved hooks (1) +0ms
    41.   nuxt:generate Destination folder cleaned +10s
    42.   nuxt: Call generate:distCopied hooks (1) +8ms
    43.   nuxt:generate Static & build files copied +7ms
    44.   nuxt:render Rendering url /our-values +0ms
    45.   nuxt:render Rendering url /how +67ms
    46.   nuxt:render Rendering url /join-us +1ms
    48.   nuxt: Call generate:page hooks (1) +913ms
    49.   nuxt: Call generate:page hooks (1) +205ms
    50.   nuxt: Call generate:page hooks (1) +329ms
    51.   nuxt: Call generate:page hooks (1) +361ms
    52.   nuxt:generate Generate file: /our-values/index.html +2s
    53.   nuxt:generate Generate file: /how/index.html +0ms
    54.   nuxt:generate Generate file: /join-us/index.html +0ms
    55.   nuxt:generate Generate file: /index.html +0ms
    56.   nuxt:render Rendering url / +2s
    57.   nuxt: Call generate:done hooks (1) +4ms
    58.   nuxt:generate HTML Files generated in 11.8s +5ms
    59.   nuxt:generate Generate done +0ms
    60. [21:25:27] Using gulpfile ~/scm/example.com/www/gulpfile.js
    61. [21:25:27] Starting 'deploy'...
    62. Configured with CloudFront distribution
    63. [21:25:27] [cache]  README.md
    64. [21:25:27] [cache]  android-chrome-192x192.png
    65. [21:25:27] [cache]  android-chrome-512x512.png
    66. [21:25:27] [cache]  apple-touch-icon.png
    67. [21:25:27] [cache]  browserconfig.xml
    68. [21:25:27] [cache]  favicon-16x16.png
    69. [21:25:27] [cache]  favicon-32x32.png
    70. [21:25:27] [cache]  favicon.ico
    71. [21:25:27] [cache]  favicon.svg
    72. [21:25:27] [cache]  logo-branches.svg
    73. [21:25:27] [cache]  logo-small.svg
    74. [21:25:27] [cache]  logo.svg
    75. [21:25:27] [cache]  mstile-150x150.png
    76. [21:25:27] [cache]  og-image.jpg
    77. [21:25:27] [cache]  safari-pinned-tab.svg
    78. [21:25:27] [cache]  site.webmanifest
    79. [21:25:28] [create] _nuxt/manifest.421d017116d2d95dd1e3.js
    80. [21:25:29] [update] 200.html
    81. [21:25:30] [create] videos/flag.jpg
    82. [21:25:30] [create] _nuxt/vendor.134043c361c9ad199c6d.js
    83. [21:25:34] [create] videos/flag.mp4
    84. [21:25:34] [cache]  _nuxt/pages/how.75f8cb5bc24e38bca3b3.js
    85. [21:25:34] [cache]  _nuxt/pages/join-us.835077c4e6b55ed1bba4.js
    86. [21:25:34] [cache]  _nuxt/pages/our-values.f60c731d5c3081769fd9.js
    87. [21:25:36] [update] our-values/index.html
    88. [21:25:36] [create] _nuxt/layouts/default.87a49937c330bdd31953.js
    89. [21:25:36] [create] _nuxt/app.6dbffe6ac4383bd30a92.js
    90. [21:25:37] [create] _nuxt/pages/index.ef923f795c1cecc9a444.js
    91. [21:25:38] [update] join-us/index.html
    92. [21:25:38] [update] how/index.html
    93. [21:25:43] [create] videos/flag.webm
    94. [21:25:43] [update] index.html
    95. [21:26:09] Finished 'deploy' after 42 s

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