Deploy Next JS app on AWS Amplify within 5 minutes with CI/CD

mubbashir10

Mubbashir Mustafa

Posted on December 25, 2020

Deploy Next JS app on AWS Amplify within 5 minutes with CI/CD

You can deploy static apps/website on AWS using S3 or Amplify. I prefer AWS Amplify and in this tutorial, I am going to quickly show you how you can deploy your Next.js app on AWS Amplify within 5 minutes with CI/CD.

I assume you already have next.js app ready, if not please clone this sample app.

Step 1:

From the AWS console, go to "AWS Amplify"
Alt Text

Once you are on the AWS Amplify homepage, select "Get started"
Alt Text

After that, under the "Deliver" section, click "Get started"
Alt Text

Step 2:

Select GitHub and then click "Continue" - it will ask you to authorize Github, if you need help please read step 1 of my previous article
Alt Text

Step 3:

Select repo, branch and then click "Next"
Alt Text

Step 4:

AWS Amplify will generate a build script for you automatically, but you will need to change it a little. Click on the "Edit" and change the build and artifacts sections:
Alt Text

The final build settings should look like this: 👇đŸŊ



version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run export
  artifacts:
    baseDirectory: out
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*


Enter fullscreen mode Exit fullscreen mode

Once you have updated the build settings, click "Save"
Alt Text

Click "Next"
Alt Text

Step 5:

Click "Save and deploy"
Alt Text

That's it. Once all the stages have been passed, you can click the link and see your app in action.
Alt Text

To test whether CI/CD (technically only CD) is working, make changes to your app and push them to your repo. They should be live after all the stages have passed.


ℹī¸ Notes:

  • If you are not using yarn, please change the build settings accordingly (with npm)
  • We are using Next.js static export
  • You can use the same procedure for hosting any front-end/static app (React, Vue, Angular, etc.) - even you can deploy Nuxt.js app
  • If you don't want to use static exports and need SSR then read this
💖 đŸ’Ē 🙅 🚩
mubbashir10
Mubbashir Mustafa

Posted on December 25, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related