Next.js CI / CD on AWS with GitHub Actions
Tags: nextjs, serverless, javascript, webdev
Published: 2020-12-16 14:06:15

---
title: Next.js CI / CD on AWS with GitHub Actions
published: true
description: How to set up CI / CD with Next.js on AWS using GitHub Actions and the Serverless Framework
tags: nextjs, serverless, javascript, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vl4xde22i3cbjre19tr4.jpg
---

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](#video-walkthrough) to see the video walkthrough.   
> Click [here](https://github.com/dabit3/next-serverless-github-actions) 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](https://dev-to-uploads.s3.amazonaws.com/i/w8tg0w5le519twshtt1x.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/i/ju4h2z9zlo1bx23akxwe.png)

> The IAM user should have either AdministratorAccess privileges or permissions configured as listed [here](https://github.com/serverless-nextjs/serverless-next.js#aws-permissions-for-deployment). For a video walkthrough of how to create an IAM role, click [here](https://www.youtube.com/watch?v=wRzzBb18qUw).

### 3. Create a new Next.js app

Create a new Next.js app using `npx` and change into the new directory:

```sh
npx create-next-app my-next-app
cd my-next-app
```

### 4. Add Git remote

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

```sh
git remote add origin git@github.com:git-username/project-name.git
```

### 5. Create a serverless configuration file

We will be deploying the Next.js app to AWS using the [Serverless Next.js Component](https://github.com/serverless-nextjs/serverless-next.js).

To enable this, create a new file named __serverless.yml__ in the root of the project and add the following code:

```yaml
nextApp:
  component: "@sls-next/serverless-component@1.18.0"
```

### 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

{% gist https://gist.github.com/dabit3/f817ccd90bee90617b57c02aa15c20fa %}

### 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.

```sh
npx serverless
```

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

![Completed deployment CLI output](https://dev-to-uploads.s3.amazonaws.com/i/i8emapqpfslesoctdwxz.png)

### 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:

```sh
git add .
git commit -m 'initial commit'
git push origin main
```

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

![Push the code to GitHub
](https://dev-to-uploads.s3.amazonaws.com/i/r6694lqw221ht85318cy.png)

### Video Walkthrough

{% youtube iEgeuzKEIFs %}

### 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.