Deployed my NextJS App on GCP Cloud Run with-in minutes using GitHub

Designed on Affinity Photo

Inspiration

I am quite new to the application/web development zone but am aware that we as developers face lots of challenges during deployment and maintenance stage of our web-applications compared to the development stage.

Development

I have always been very curious about the web-development part and have recently decided to buy a domain for myself, where I would be developing a Portfolio Web Application by (www.niranjanakella.com) drawing inspiration from multiple online repositories hosted on GitHub. [Note: I will be posting a follow up article explaining the development process]

Pain Point

Though I was quite successful in developing the website, I had no clue on how to deploy it or far to say how to manage my traffic. Hence, I decided to surf through some articles, YouTube videos, blog posts, etc; to find an apt solution that would come to my rescue. I would only find bits and pieces of information here and there which would suffice my implementation.

I needed a solution, that would ease the process of maintenance through an automated pipeline.

Solution

After an eternity of research, troubleshooting, debugging & coffee brakes. I finally forged a simple yet “Awesomly”(✌️) easy solution that would help you create a single pipeline which would;

Only require you to “PUSH” your code to GitHub and everything else will be automated!! 😉

So to achieve you will have to perform the following steps:

1. Assuming that you already have your NextJS/ReactJS/ExpressJS/Other app already developed on your local system & Docker installed on your system, first create a “Dockerfile” inside your project’s root folder.

[Note: My Dockerfile code as given below is specific to only my NextJS application. You may find suitable Dockerfile configurations that work with your application easily with a simple Google Search.]

FROM node:alpine as dependencies
WORKDIR /niranjanakella-portfolio
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
FROM node:alpine as builder
WORKDIR /niranjanakella-portfolio
COPY . .
COPY --from=dependencies /niranjanakella-portfolio/node_modules ./node_modules
RUN yarn build
FROM node:alpine as runner
WORKDIR /niranjanakella-portfolio
ENV NODE_ENV production
# If you are using a custom next.config.js file, uncomment this line.
# COPY --from=builder /my-project/next.config.js .
COPY --from=builder /niranjanakella-portfolio/public ./public
COPY --from=builder /niranjanakella-portfolio/.next ./.next
COPY --from=builder /niranjanakella-portfolio/node_modules ./node_modules
COPY --from=builder /niranjanakella-portfolio/package.json ./package.json
EXPOSE 3000
CMD ["yarn", "start"]

2. Build your Docker image and run the Docker container locally to test whether your application is working as expected.

docker build . -t <Your-Docker-Image-Name> .
docker run -p 3000:3000 <Your-Docker-Image-Name>
#To check the list of running containers
docker ps
#To stop a particular container
docker stop <Container-ID>

[Note:Docker ports and other aspects of the above commands can be changed as per the requirements]

3. Once you are confident that your Docker image is running absolutely fine you can now create a new repository on your GitHub account.

GitHub

4. Push your local code to the new created GitHub repository.

git remote add origin https://github.com/<Your-User-Name>/Your_Repository_Name.git
git branch -M main
git push -u origin main

5. Create an account on the Google Cloud Platform => Create a new project => Navigate to Console (At the right top) => then search Cloud Run and open it.

Google Cloud Platform

Then create a new service. Then select “Continuously deploy new revisions from a source repository” from the given service options. Then select “Set Up Cloud Build”, this is the crucial point where we integrate the CD pipeline with GitHub.

Google Cloud Platform

Under the “Source Repository” you will have to enable the cloud source repositories API. This allows the GCP to directly pull repositories which when updated will be directly rendered/deployed on the cloud run.

Google Cloud Platform

Further choose the repository you wish to pull from GitHub and select the “Build Configuration” to be Branch->main & Build Type->Dockerfile and the “Source Location” to only “/” [Generally it is /Dockerfile, but you need to set it to just “/”] . Save the configuration.

6. “Give a proper Service Name to your service” [This part is very crucial, or else your application will be set as placeholder for no reason]. Then choose a Region which has Domain Mapping, so that your application can be given a Custom Domain or sub-domain.

7. Set Ingress->”Allow all traffic”, Authentication->”Allow unauthenticated invocations”. We set the authentication to allow unauthenticated invocations to let anyone on the internet view our application. Finally press on the “Create” button to create the service successfully.

Common Error

• Many common errors can be solved by just checking if the following commands run well,

1. Check if “yarn build” is running and has compiled without errors.
2. Perform a local docker build and check if everything is fine with the docker build i.e.;

# Usage: docker build <path> -t <repo_name>:<tag>

$ docker build . -t nextjs-app:latest

$ docker run -p 3000:3000 nextjs-app

3. Also for safe side do create a cloudbuild.yaml file and past the below code

steps:
  # Build the container image
  - name: "gcr.io/cloud-builders/docker"
    args: ["build", "-t", "gcr.io/$PROJECT_ID/myapi:$COMMIT_SHA", "."]
  # Push the container image to Container Registry
  - name: "gcr.io/cloud-builders/docker"
    args: ["push", "gcr.io/$PROJECT_ID/myapi:$COMMIT_SHA"]
  # Deploy container image to Cloud Run
  - name: "gcr.io/google.com/cloudsdktool/cloud-sdk"
    entrypoint: gcloud
    args:
      - "run"
      - "deploy"
      - "myapi"
      - "--image"
      - "gcr.io/$PROJECT_ID/myapi:$COMMIT_SHA"
      - "--region"
      - "asia-east1"
images:
  - "gcr.io/$PROJECT_ID/myapi:$COMMIT_SHA"

Yo!! 👏 That’s it. Now your application is running on Google Cloud Run.

Maintenance

From now on when ever you wish to update your application in any way, you just have to change the code on your local system and then just push them to GitHub. Then Google Cloud Run will automatically sense this update and rebuilds the docker container to the newer version.

Crucial Notes & Additional Information

• If you wish to follow the official Continuous Deployment setup by GCP you can check it out here.
• Please do keep in mind to choose a “Region” which supports Domain Mapping so that you can map your custom domains to the application.
• If you also wish to have a detailed article on how to map a domain to the cloud run instance, then please drop a comment below and like the post.

Cleaning up older revision & images of the cloud run app.

1. Open a terminal in the GCP only and run the below command to set the terminal head to the project root folder.

gcloud config set project

2. Clearing revisions. Revision name can be found under the “Revisions” section in the Cloud Run project page.

#List of revisions
gcloud run revisions list
#Delete a revision
gcloud run revisions delete <Revision-Name>

3. To delete old images for the project you will have to navigate to the Container Registry and then manually delete them.