Implementing Continuous Integration / Continuous Delivery (CI/CD) with Next.js and Google Cloud Platform

NEXT.JS + GCP = 🤟🤟🤟

Since its introduction a few years ago, React.js has become one of the most versatile and widely used front-end technologies. As it has evolved, new libraries have emerged, including Next.js, which offers the ability to improve the performance of React and the efficiency of search engine optimization (SEO). 

In this article, I will explain how to set up a Next.js application in Google Cloud Platform (GCP), one of the major cloud computing service providers. If you follow these steps, you can configure your application and start using GCP in a continuous integration/ continuous delivery (CI/CD) system.

The following figure explains how to set up the Next.js application. There are many ways to accomplish this with GCP, but I found this way to be the easiest.
 

Figure 1.1 CI/CD with GitHub actions and GCP run

Set up the Next.js app

1. Check the requirements.
2. Create the Next.js application and GitHub repo.
3. Create Dockerfile .dockerignore files and test locally.
4. Set up a GCP project. 
5. Set up GitHub Actions for CI/CD.

1. Check requirements

• Yarn package manager is installed
• Node.js installed >= version 10
• Docker installed ( the most stable version at the moment)
• GCP account available
• GitHub account available

2. Create Next.js application and GitHub repo

Run the following command to create a Next.js application. We are going to use the variation of Next.js that comes with jest.js in this example; in the vercel GitHub page, there are many initial configuration examples to start your Next.js application. 

Run this command in your terminal:

npx create-next-app –example with-jest ci-cd-nextjs-gcp

After the application is created, go to the folder and open it with your favorite IDE. In this example,  I am using VSCODE:

cd ci-cd-nextjs-gcp

code.

Run the Next.js application locally with the following command. 

yarn run dev

Check that your application is running in your browser by going to:

 http://localhost:3000

Now create a repository in GitHub (we won’t include steps for creating a GitHub repo here).

3. Create Dockerfile and .dockerignore files and test locally

We need a Docker configuration file so that we can deploy our application in GCP Cloud Run. In the root of your Next.js application, write the following command in your terminal:

touch Dockerfile

touch .dockerignore

Open your Dockerfile and write the next lines of code:

FROM node:12.22.0

WORKDIR /app

COPY package.json /app/

COPY yarn.lock /app/

RUN yarn install

COPY . /app

RUN yarn build 

CMD [ “yarn”, “start” ]

In the .dockerignore, type the following lines:

Dockerfile

.dockerignore

Node_modules

Npm-debug.log

With our Docker file, we can build the image with the following command:

docker build . -t ci-cd-nextjs-gcp:latest 

After a few minutes of building, we will have the image ready to test locally. With the following command we can test it:

docker run -p 3000:3000 ci-cd-nextjs-gcp:latest

Our image is ready and tested, now we need to stop the container with the following command:

docker container stop IMAGE_ID 

Now we need to commit our code and push it to our remote repository:

git add .

git commit -m”First commit”

git push

4. Set up the GCP project 

Now we are going to create a project in GCP. Go to your GCP console and create a new project:

After creating the GCP project, we need to create a service account and check that we are working on the project that we just created.

Finally, we need to create a private key to set up our secret keys to be used in GitHub actions. To do that, we need to click on the service account that we already created and download it.

Go to the folder where the private key was downloaded, open your terminal and write one of these commands.

On Windows:

certutil -encode your-private-key-downloaded.son  encoded.txt

On MacOS:

base64 your-private-key-downloaded.son 

This will return a long encoded key. Save it as we need it later to set up the GitHub actions.

5. Set up GitHub actions to CI/CD

We need to set our secret keys so that we can use them later with our GitHub actions.

In your GitHub repo, go to… Settings / Secrets,  and add the following secret keys:

GCP_PROJECT_ID = The GCP project id, (in our case… ci-cd-nextjs-gcp)

GCP_SA_EMAIL = The service account email that you find in the service account details. The following image shows an example: 

GCP_SA_KEYBASE64 = The private key that we encoded before.

Your GitHub action secrets should look like this 

In the GitHub repo, go to Actions and click on “Set up a workflow yourself”, 

Create a  file called  main.yml in the .GitHub/workflows folder. Copy the following lines of code to set up the CI/CD workflow. All the documentation to configure this file is available in Google GitHub Actions. 

After a few minutes, you will see your application working.

In GitHub actions, you can see all the stages to deploy your application in GCP Cloud Run.

Now that your application is deployed, go to GCP and test that everything works properly.

With this example, we have configured a complete CI/CD workflow with Next.js and GCP that will help us increase our productivity by automating the deployment of our Next.js application in GCP Cloud Run by simply committing to our GitHub repository. This is a great benefit to control all the steps related to the deployment.