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
Top comments (2)
Is the S3 is always free with limit?
AWS Amplify Hosting Pricing: aws.amazon.com/amplify/pricing/?nc...