How To Deploy a Nuxt SPA to AWS Amplify for Production

We'll learn how to create and deploy an Amplify production environment so that our development data and production data are separate from one another.

Published
Nov 04, 20
Duration
4m 12s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

Several lessons ago we created an Amplify environment called dev, and in the last lesson we used this environment to create a stage deployment. The downfall of using the same environment both locally and in production is that all the data is shared. Because of this, for our production build we'll need to make an Amplify environment specific to production.

Creating Our Prod Amplify Environment

To create our production Amplify environment, we'll be using the Amplify CLI, so head into your terminal.

Next, let's run amplify env add to initiate the steps to create our prod environment.

  1. Do you want to use an existing environment? No

  2. Enter a name for the environment: prod

  3. Do you want to use an AWS profile? Yes

  4. Please choose the profile you want to use: default (or whatever profile you created in the first lesson)

Amplify will now queue new resources for our new environment so that all the data persisted within is unique from our dev environment. It's also moved our local environment from dev to prod, you can confirm this by running amplify status in your terminal. You should also see both our Auth and Api resources are staged for creation.

To actually create those resources, let's go ahead and run amplify push.

  1. Do you want to update code for your updated GraphQL API? No

    We'll still want to locally work with the dev environment, and none of that has changed.

Now Amplify will run through creating all the new resources for our prod environment.

Creating Our Prod Repository Branch

Next, let's create a branch specifically for production builds within our Git repository. This will allow us to test changes on our staging build prior to commiting them to our production build.

  1. Run git checkout -b prod to create to prod branch locally

  2. Adding our prod Amplify environment changed some configs locally, so let's add and commit those as well. git add .

  3. Commit git commit -m "setting up prod amplify env"

  4. Push git push origin prod

Create Your Prod Build

Finally, we need to create a production build. Since we've already added hosting to our application, all we need to do is connect our new prod branch. To do this let's open up our application in the AWS Console, you can run amplify console in your terminal to quickly open this up.

Next, in the breadcrumbs, go back one step to your application's name, mine is "amplify-nuxt".

  1. Under frontend environments, click connect branch.

  2. Select the prod Git branch we created.

  3. Select the prod Amplify backend environment we created.

  4. Click next.

  5. Click Save and deploy

Once your deployment finishes you're all set. You now have a production site with it's own dataset.

Changing Back to Dev Locally

Before we end this lesson let's go back and change our local environment to use our master branch and our dev Amplify environment so we don't fudge up any of our production data with local testing.

  • Git: git checkout master

  • Amplify: amplify env checkout dev

In the next lesson we'll cover how to tie our stage and prod builds to a domain we own.

Join The Discussion! (0 Comments)

Please sign in or sign up for free to join in on the dicussion.

robot comment bubble

Be the first to Comment!