Amplify + Nuxt
1.0How To Setup AWS Amplify in a New Nuxt Project06:510:21
2.0How To Add Authentication Using AWS Amplify's Auth Class In A Nuxt App06:590:17
3.0Adding Register and Login Flows Using AWS Amplify in a Nuxt App16:180:17
4.0How To Add A Public And Private GraphQL API with AWS Amplify13:2410:00
5.0Implementing Our Private & Public Amplify GraphQL API In Our Nuxt App27:5513:12
6.0How To Deploy A Nuxt SPA To AWS Amplify03:472:32
7.0How To Deploy a Nuxt SPA to AWS Amplify for Production04:122:26
This series is outdated
Amplify + Nuxt
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.
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.
Do you want to use an existing environment? No
Enter a name for the environment: prod
Do you want to use an AWS profile? Yes
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
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.
git checkout -b prodto create to prod branch locally
Adding our prod Amplify environment changed some configs locally, so let's add and commit those as well.
git add .
git commit -m "setting up prod amplify env"
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".
Under frontend environments, click connect branch.
Select the prod Git branch we created.
Select the prod Amplify backend environment we created.
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 checkout master
amplify env checkout dev
In the next lesson we'll cover how to tie our stage and prod builds to a domain we own.