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
- Check the requirements.
- Create the Next.js application and GitHub repo.
- Create Dockerfile .dockerignore files and test locally.
- Set up a GCP project.
- 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:
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.
