DEV Community

loading...
Cover image for Next.js CI / CD on AWS with GitHub Actions

Next.js CI / CD on AWS with GitHub Actions

dabit3 profile image Nader Dabit Updated on ・3 min read

In this post you'll learn how to set up CI / CD with Next.js on AWS using GitHub Actions and the Serverless Framework.

Click here to see the video walkthrough.

Click here to see the completed example project.

Getting started

1. Create a GitHub Repo

To get started, create a new GitHub repository.

Create a GitHub Repo

2. Set AWS Secrets

For the GitHub Action to work, it will need to be able to read the aws-access-key-id and 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.

GitHub Secrets

The IAM user should have either AdministratorAccess privileges or permissions configured as listed here. For a video walkthrough of how to create an IAM role, click here.

3. Create a new Next.js app

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
Enter fullscreen mode Exit fullscreen mode

4. Add Git remote

Using the unique address of the GitHub repo you created earlier, configure Git locally with the URI.

git remote add origin git@github.com:git-username/project-name.git
Enter fullscreen mode Exit fullscreen mode

5. Create a serverless configuration file

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: "@sls-next/serverless-component@1.18.0"
Enter fullscreen mode Exit fullscreen mode

5. Creating the GitHub action

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:

.github/workflows/main.yml

6. Deploy the app to AWS

Now we'll deploy the app. Once the app has been deployed, we'll trigger new deployments using GitHub actions.

npx serverless
Enter fullscreen mode Exit fullscreen mode

When the deployment is complete, the CLI should print out the app URL along with other information about the deployment:

Completed deployment CLI output

7. Push the code to GitHub

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
Enter fullscreen mode Exit fullscreen mode

Within your GitHub repo, click on Actions to view the deployment happening.

Push the code to GitHub<br>

Video Walkthrough

Conclusion

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.

Discussion (6)

pic
Editor guide
Collapse
kylegalbraith profile image
Kyle Galbraith

Nice, I hadn't seen this plugin before. Definitely makes getting SSR up to Lambda@Edge a lot easier.

Just a heads up you have a link that doesn't go anywhere, Serverless Next.js Component, I think you might have meant to links this serverless.com/blog/serverless-nextjs.

Collapse
dabit3 profile image
Nader Dabit Author

Hey, thank you for the heads up, just fixed the link!

Collapse
amatyas001 profile image
Mátyás Angyal

Hi, great article! A quick note, when you are using a simple serverless.yml without bucketName explicitly configured, the workflow will create a new origin for the brand new bucket on the CloudFront distro all the time when you push changes and reach the origin limit after several deploys. I made it working by setting the bucketName, though this results in an error saying "The bucket you want to delete is not empty...". This can be simply fixed by using serverless-s3-remover plugin. Now it works like charm!

Collapse
dabit3 profile image
Nader Dabit Author

Thanks for sharing Matyas, I need to look more into this and will consider updating the tutorial.

Collapse
kumar0 profile image
kumar0

Thanks Nader for this. A quick question.. with serverless deployment , the revalidate is not working in the getStaticProps. Any data change is not refelecting. however when I host on EC2 or vercel it does. Any idea how to make that work or else I have to deploy each time for any data changes too.. Thanks again.. I am learning a lot from you.

Collapse
levpa profile image
Pasichnyi Lev

What AWS policies do I need for run: npx serverless ?