DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

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

Posted on • Updated on

Next.js CI / CD on AWS with GitHub Actions

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.

Top comments (8)

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
 
racer161 profile image
Ethan Spurlock

@dabit3 I saw that other people were having trouble with the logistics of maintaining a staging and production branch without launching a brand new cloudfront distribution or bucket each time. I just wanted to post this link to save those who find this article some time : github.com/bhall2001/serverless-ne...

This may not be the best way but it definitely works and is a stable strategy until AWS or serverless come up with a more canonical way to manage this.

Thanks for your great articles Nader!

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
 
kushalmahajan profile image
Kushal V. Mahajan

Looks neat!
I have a couple of questions.

  1. Will this generate a unique URL each time for a deployment? If yes, how can we connect it to a domain?
  2. How do we set it up for different envs?
Collapse
 
levpa profile image
Pasichnyi Lev • Edited on

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

๐ŸŒš Friends don't let friends browse without dark mode.

Sorry, it's true.