In this post you'll learn how to set up CI / CD with Next.js on AWS using GitHub Actions and the Serverless Framework.
To get started, create a new GitHub repository.
For the GitHub Action to work, it will need to be able to read the
aws-secret-access-key for the IAM user you will be using to deploy your app. To set this up, click on Settings then Secrets.
Here, create two variables, one named AWS_KEY and one named AWS_SECRET.
Create a new Next.js app using
npx and change into the new directory:
npx create-next-app my-next-app cd my-next-app
Using the unique address of the GitHub repo you created earlier, configure Git locally with the URI.
git remote add origin firstname.lastname@example.org:git-username/project-name.git
We will be deploying the Next.js app to AWS using the Serverless Next.js Component.
To enable this, create a new file named serverless.yml in the root of the project and add the following code:
nextApp: component: "@email@example.com"
Next, create a new folder in your Next.js project named .github, and a folder within the new folder named workflows.
Within the workflows folder, create a new file named main.yml and add the following code:
Now we'll deploy the app. Once the app has been deployed, we'll trigger new deployments using GitHub actions.
When the deployment is complete, the CLI should print out the app URL along with other information about the deployment:
Next, we'll commit our code and push to GitHub. When this code is deployed, we should see the GitHub action processing:
git add . git commit -m 'initial commit' git push origin main
Within your GitHub repo, click on Actions to view the deployment happening.
Your CI / CD pipeline should now be set up successfully! When you push new code, you should see a build happening as well.
If you set up a pull request to the main branch, a new build should also be kicked off.