How to Set Up Next.js CI / CD on AWS with GitHub Actions
In this video we start completely from scratch by creating a new Next.js project. We then create a GitHub repository and create and configure a GitHub actions workflow file, enabling the proper settings that we'll need to deploy the app to AWS using the Serverless Framework. We then walk through how to enable environment secrets in the GitHub dashboard and set up the serverless.yml file locally. Finally, we push the code to GitHub, deploying our app to AWS automatically by triggering the GitHub action.
Nader Dabit: [0:00] We'll start by creating a new Next.js project using npx and then changing into the new directory. Next, we'll open our web browser and go to GitHub. Here, we'll create a new repository for our Next.js app.
[0:32] After the repo has been created, we'll copy the URL to our clipboard and then jump back to our terminal. Here, we'll initialize a new repository and then set the origin using the URL copied to our clipboard.
[0:48] We'll make a directory named dot-github, and then add another directory within that directory named workflows. Inside the workflows directory, we'll create a file called main.yml. We'll open the project in our text editor. In main.yml, I'll paste the yml for our GitHub action.
[1:19] When using the push and pull request events, you can configure a workflow to run on specific branches or tags. Here, we're setting our primary branch as main. We specify the type of machine as a Boon to latest. Next, we use the GitHub checkout action to check out our branch and configure Node.js as 12.x.
[1:48] We then use npm to install our dependencies. To configure our AWS credentials, we use the configure AWS credentials action. In this configuration, we'll be configuring secrets that we'll be setting later in our GitHub repo for the AWS access key ID and the AWS secret access key.
[2:09] Finally, we set the region to be US-EAST-1, but this can be whatever region that you'd like. To deploy to AWS we run npx serverless. Back in our GitHub repo, we'll click settings, and then secrets, to configure our environment secrets. Here, we'll set our AWS access key and AWS secret for the configured IAM user that we will be working with.
[2:54] Back in our command line, we'll create a new file called serverless.yml. Here, we'll configure the serverless/next-component and set it to the most recent version. As of this recording, that is 1.18.. We'll commit our code and push the changes to our main branch. In our GitHub repo, we should be able to click on actions and see our workflow in action.
[3:55] When the deployment is complete, the app URL should be printed out, and you should be able to visit the URL to see your app live. Let's go back to our app and make an update. When we commit and push our code, we should see a new process started in the GitHub dashboard.