Mubbashir Mustafa
Posted on December 25, 2020
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"
Once you are on the AWS Amplify homepage, select "Get started"
After that, under the "Deliver" section, click "Get started"
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
Step 3:
Select repo, branch and then click "Next"
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:
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/**/*
Once you have updated the build settings, click "Save"
Step 5:
That's it. Once all the stages have been passed, you can click the link and see your app in action.
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 (withnpm
) - 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
Posted on December 25, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.