Unread Notifications

Latest Notifications

No Notifications

You're all set! Start a discussion by leaving a comment on a lesson or replying to an existing comment.

Amplify + Nuxt

How To Deploy A Nuxt SPA To AWS Amplify

3 MIN READ
2 MONTHS AGO

In this lesson we cover how to deploy our Nuxt application as an SPA to AWS Amplify.

Watch on YouTube

Before we begin, you may want to make sure you're running AWS Amplify CLI version 4.30.0 or later. Some steps have slightly changed from older versions.

If you need to update run npm upgrade -g @aws-amplify/cli in your terminal.

Adding Hosting

Now we're ready to begin deploying. Using the Amplfiy CLI, the same way we did when adding our other resources, let's cd into our project in our terminal and run amplify add hosting. You'll then be run through the following steps:

  1. Select the plugin module to execute: Hosting with Amplify Console

  2. Choose a type: Continuous deployment (this will auto-deploy our application when we commit changes)

Attaching Our Repository

From here we'll be kicked out to the AWS Console to select and attach our deployment to our Git repository.

  1. Select the Git provider your app is using, mine is using GitHub, then click "Connect Branch"

    There is a "Deploy without Git provider" option if your application isn't using Git. Just know your path may stray from the tutorial a bit.

  2. If AWS doesn't have access to your Git provider you'll be walked through the process to grant AWS the access it needs to continue.

  3. Next select your project repository

  4. Then the branch you'd like to be deployed then click next.

Configuring Our Build

Now we need to configure our build.

  1. Select your backend environment. If you've been following along with this lesson, we've been working with the "dev" environment.

  2. For our build settings config, we'll want to change the frontend artifact for baseDirectory from / to /dist/. You may not be able to edit this at this stage, I wasn't, and that's okay you can also edit this once we're finished within your deployment's build settings.

  3. Within "Advanced settings" you'll find the environment variables should you need to define any.

  4. Everything else should be correct, so we can click next.

AWS will then ask us to review our deployment. Go ahead and review your configuration then click save and deploy.

You may get a notification from your Git provider that a new SSH key was added for your repository. This is normal.

Once you click save and deploy you'll be taken to your application deployment in AWS. You can click into the app and click the build tab to follow along with the deployment if you'd like. Otherwise, just leave this be while it does what it needs.

You'll also see our deployment was given a unique amplifyapp subdomain. You can click into this to either see a parked page while your app deploys or your application once it finishes deployment.

At this point, you can return back to your terminal and hit enter to confirm your repository is setup.

Editing Your Build Settings

If, like me, you couldn't edit your build settings when configuring your build, you can do so now. Inside your application's settings in the AWS Console, go to the build settings side nav item.

Under "App build specification" click edit, and edit line 18, from baseDirectory: / to baseDirectory: /dist/.

Return back to your application under "All apps" in the side nav. Click into your Frontend deployment (probably named master), then in the top-right corner click "Redeploy this version".

Comment

  1. mcanvar
    Commented 1 year ago
    Thank you for this great series. I would like to know what you suggest for route authentication. Should I simply create a middleware and use it or should I add auth module for that?
    1. tomgobich
      Commented 1 year ago
      Thanks mcanvar! Yes, I would create a middleware for that. Your middleware could then either call directly out to AWS to check the authenticated user, check your Vuex store, or use the auth module. Here's an example: https://gist.github.com/tomgobich/7aaec34e5e70f6eecadb01b79e3221d4#file-middleware-auth-js
Prepared By

Tom Gobich

Burlington, KY

Owner of Adocasts, JavaScript developer, educator, PlayStation gamer, burrito eater.

Visit Website