How To Host Your NuxtJs SPA on S3 with Cloudfront.

♠Excelsior 💻 — Sun, 12 Apr 2020 17:07:41 +0000

You are trying to get your new shiny app deployed to the fancy AWS service either to save cost, try out a new option or any other reason you have in mind. You figure it’s not as straight forward as you think, this tutorial will try and lend a helping hand.

This tutorial assumes knowledge of these services and won’t be explaining some terms.

Create and Configure S3

Navigate to your AWS console, create an S3 bucket. > This guide will help with that https://docs.aws.amazon.com/AmazonS3/latest/gsg/CreatingABucket.html

It’s important that you uncheck the Block all public access box while creating your bucket.

Uncheck the **Block all public access* option.*

Next, we configure our bucket for static website hosting.

Configure Bucket.

As shown above;

Select your created bucket from your list that would be displayed at https://s3.console.aws.amazon.com/s3/home
Navigate to the properties tab and select the Static website hosting from the list of options.
Check the Use this bucket to host a website option
Change the Error Document to index.html (This is because our application is a SPA, and the index page does all the error handling).*
Save

We are done with S3.

Create and Configure Cloudfront (Optional)

This is an optional step but is highly recommended.

This tutorial will help with setting up CloudFront and configuring it for our S3 bucket above https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-serve-static-website/.

Setup Project Scripts

Create a new deploy.sh file in your project directory, and copy the contents below into it.

Your AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY can be gotten from the AWS console, this guide will show you how if you don’t already know or have them https://docs.aws.amazon.com/general/latest/gr/aws-sec-cred-types.html.
AWS_BUCKET_NAME is the S3 bucket name we created above e.g mine is test-bucket-damiloju as shown in picture 2.
AWS_CLOUDFRONT is our CloudFront distribution ID. It can be found here https://console.aws.amazon.com/cloudfront/home

CloudFront distribution ID

Important that you change the mode of your project in your nuxt.config.js to spa

Make deploy.sh executable and not check into gitignore.

If you are on Mac or Linux, you can copy the above and paste it in your terminal to make deploy.sh executable.

Next, we add gulp to our project and install it globally. Run the commands below.

npm install — save-dev gulp gulp-awspublish gulp-cloudfront-invalidate-aws-publish concurrent-transform
npm install -g gulp

Now create a gulpfile.js file in your project directory and add the contents from the script below to it.

Now we are done.

All you need to do now is execute your deploy script.

Go to your terminal and type ./deploy.sh

You should get something similar to the pictures below as output.

Terminal Output

Terminal Output 2

We are good to go :).

This takes parts from the official Nuxt Js article (which didn’t work for me) so the solution here provides a somewhat working solution with some differences from it. You can find the full article here

DEV Community: ♠Excelsior 💻

How To Host Your NuxtJs SPA on S3 with Cloudfront.

Create and Configure S3

Create and Configure Cloudfront (Optional)

Setup Project Scripts