DEV Community

Cover image for Deploy Next JS App to Google Cloud Run with Github Actions CI/CD - A Complete Guide
Rushi Patel
Rushi Patel

Posted on

Deploy Next JS App to Google Cloud Run with Github Actions CI/CD - A Complete Guide

#googlecloud #nextjs #cicd #githubactions

This guide provides you a step-by-step process to deploy your Next app efficiently to Google Cloud Run. Each section offers actionable steps, ensuring a smooth deployment journey.

In this guide, we'll cover the following sections:

  1. Pre-requisite
  2. Next Project Config
  3. GCP Account & GCP Project Setup
  4. Dockerize your App
  5. Github Actions CI/CD
  6. Testing

Whether you're a seasoned developer seeking a detailed deployment workflow or an enthusiast eager to take your Next project live, this guide will equip you with the necessary knowledge and steps for a successful deployment journey. Let's start with pre-requisites.

Section 1: Pre-requisites

Before diving into deploying a Next app to Google Cloud Run, it's essential to ensure that you have the necessary tools and knowledge in place. Mininum requirements are

  • Next & npm Installed: Make sure Next.js and npm are installed on your machine. Next 18 is used throughout this guide.
  • Next JS Setup: Familiarize yourself with creating a Next project and running it locally.
  • Google Cloud Account: If you don't have one yet, don't worry; we'll create it in a later step.

Section 2: Next JS Project Config

Prepare and Run Next JS Project

If you haven't already set up a Next JS project, create your own project or clone the demo project from Github here.

  • Open your terminal.

  • Run the following command to clone Next JS project:

  git clone https://github.com/rushi-2001/next-js-cloud-run-setup
Enter fullscreen mode Exit fullscreen mode
  • Install the dependencies: 
  yarn
Enter fullscreen mode Exit fullscreen mode
  • Run the app: 
  yarn dev
Enter fullscreen mode Exit fullscreen mode

This will start a development server, allowing you to view your Next app in a browser at http://localhost:3000.

  • Prepare a build of your Next app: 
  yarn build
Enter fullscreen mode Exit fullscreen mode
  • Next Scripts Configuration: Ensure your package.json includes the following scripts: 
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
  },
Enter fullscreen mode Exit fullscreen mode

Make sure your scripts align with the provided commands for starting & building your Next app.

Section 3: GCP Account & GCP Project Setup

Step 1: Create a New Project

  1. Go to the Google Cloud Console and sign in.
  2. Click on "Select a project" at the top and then click on "New Project."
  3. Choose a unique project name and select the desired organization if applicable.
  4. Once the project is created, note down the Project ID for future reference.
  5. Link this project to appropriate Billing Account.

Step 2: Enable Required APIs

  1. Navigate to the APIs & Services section in the Google Cloud Console.
  2. Click on Library in the left sidebar.
  3. Search for Cloud Storage and enable the Cloud Storage API.
  4. Search for Cloud Run API and enable the Cloud Run API.

Step 3: Set Up Cloud Storage

  1. Go to the Cloud Storage section in the Google Cloud Console.
  2. Click on Create Bucket to make a new bucket.
  3. Choose a unique name and select the us-central1 region.
  4. Leave other settings as default and create the bucket.

Step 4: Install GCP CLI

  1. Navigate to the root directory of your Next app in the terminal.
  2. Install the Google Cloud SDK following the instructions at Google Cloud SDK Installation Guide.
  3. Authenticate the Google Cloud SDK by running gcloud auth login and following the on-screen instructions.
  4. Set the project ID by running gcloud config set project PROJECT_ID, replacing PROJECT_ID with your actual Project ID.

Service Account Setup

Generate & Download a Service Account

To set up a Service Account for Google Cloud Run deployment, follow these steps:

  1. Go to the Google Cloud Console.
  2. Navigate to IAM & Admin → Service Accounts.
  3. Click on Create Service Account.
  4. Provide an appropriate name and description for the service account. For instance, use github-ci-cd as it will be utilized for Github CI/CD.

  5. Assign the following roles:

    1. Cloud Run Admin
    2. Cloud Build Service Account
    3. Cloud Run Service Agent
    4. Service Account User
    5. Storage Object Admin

  6. Click the three dots and select Manage keys.

  7. Click on Add Key → Create New Key.

  8. Choose the JSON key type and securely download it. Remember, this key grants access to Google Cloud resources, so keep it safe.

Step 4: Dockerize your Next App

What is Docker

Docker is a platform that enables developers to automate the deployment of applications inside lightweight, portable containers. Containers encapsulate the application and its dependencies, ensuring consistency and portability across various environments.

Placement:

The Dockerfile, which contains instructions to build a Docker image for your Next app, should be placed in the root directory of your project, alongside your source code.

Example Configuration: 

# Use Node.js as the base image
FROM node:18.17.0-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and yarn.lock to the container
COPY package.json yarn.lock ./

# Install dependencies
RUN yarn install --frozen-lockfile

# Copy the app's source code to the container
COPY . .

# Build the Next app
RUN yarn build

# Serve the production build
CMD ["yarn", "start"]
Enter fullscreen mode Exit fullscreen mode

Explanation of Configuration:

  1. Base Image: Uses Next.js version 18.17.0 Alpine as the lightweight base image.

  2. Dependency Installation: Copies package.json and yarn.lock, installs dependencies using Yarn, leveraging Docker layer caching for efficiency.

  3. Source Code and Build: Copies the app's source code, builds the Next app, and sets up the working directory.

  4. Serve the Build: Uses yarn start to serve the built Next app from the build directory when the container starts.

Step 5: CI/CD using GitHub Actions

CI/CD and GitHub Actions:

  • CI/CD: CI (Continuous Integration) and CD (Continuous Deployment) automate the software delivery process. CI involves merging code changes into a shared repository frequently, automatically running tests, and validating changes. CD automates the deployment of validated code changes to production or staging environments.

  • CI/CD in GitHub Actions: GitHub Actions provide workflows to automate tasks in your repository, including CI/CD processes. These workflows are defined in YAML files and can be triggered by various events like code pushes, pull requests, etc.

Storing Service Account Key and Project ID in GitHub Secrets:

  • Store your Service Account Key and Project ID as secrets in your GitHub repository to securely access them during the CI/CD process.
  • You can create Github secrets by Github Repository → Settings → Secrets & Variables → Actions → Secrets tab → New Repository Secret
  • Secrets:
    1. GCP_SA_KEY: Your entire JSON of Service Account Key generated in previous step.
    2. GCP_PROJECT_ID Your GCP Project ID.
    3. DOCKER_IMAGE_NAME Your preferred name of Docker Image.

Workflow File Name & Placement:

  • The workflow file can be named cloud-run-deploy.yml.
  • Place this file in the .github/workflows directory in your project. Refer the below given repository incase of any confusion.
  • Paste the below configuration in recently created yml file.

Configuration 

name: Deploy to Cloud Run

env:
  SERVICE_NAME: next-app-project

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  dockerize-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Google Cloud Auth
        uses: 'google-github-actions/auth@v2'
        with:
          credentials_json: '${{ secrets.GCP_SA_KEY }}'
          project_id: ${{ secrets.GCP_PROJECT_ID }}

      - name: Set up Cloud SDK
        uses: 'google-github-actions/setup-gcloud@v2'

      - name: Configure Docker
        run: |
          gcloud auth configure-docker

      - name: Build and Push Docker Image
        run: |
          docker build -t gcr.io/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.DOCKER_IMAGE_NAME }}:latest .
          docker push gcr.io/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.DOCKER_IMAGE_NAME }}:latest

      - name: Deploy to Cloud Run
        run: |
          gcloud run deploy $SERVICE_NAME \
            --image gcr.io/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.DOCKER_IMAGE_NAME }}:latest \
            --platform managed \
            --region us-central1 \
            --allow-unauthenticated
Enter fullscreen mode Exit fullscreen mode

This workflow triggers on pushes or pull requests to the main branch. It uses GitHub Actions to perform various steps such as building the Next app, authenticating with Google Cloud, setting up the Cloud SDK, dockerize your app and deploying the app to Google Cloud Run.

Note: When you are deploying for first time to bucket, remove the service name from gcloud run deploy command on line 42. As first deployment must be of default service. From second deploy you provide preferred service name.

Step 6: Testing the CI/CD

Push Your Changes to GitHub (on Main Branch):

Ensure your latest changes are pushed to the main branch of your GitHub repository.

Navigate to the 'Actions' Tab in GitHub Repository:

Visit your GitHub repository and go to the 'Actions' tab.

Check Workflow Status:

Verify the status of your Next app deployment workflow using GitHub Actions.

Open the Deployed App URL:

Access the provided URL after a successful deployment in your browser to confirm your Next application runs smoothly.

Note: In GitHub Actions logs, the URL might contain masked text (*** text) representing your GCP project ID. Replace *** with your project ID and open the URL in your browser.

Access Google Cloud Engine Services:
Go to Google Cloud, locate and click on Cloud Run, then navigate to Services tab. Find your recent deployments and click on the service to open your Next App in a new tab.

GitHub Repository Link

Access the complete code reference for this guide by visiting the GitHub Repository.
Feel free to clone the repository and experiment with it on your own!

Conclusion

🚀 Congratulations on mastering the deployment of your Next app to Google Cloud Run and GitHub Actions! 🎉

Embrace this automated workflow to streamline your development journey and propel your projects to new heights. You can refer the above given repository link as and when required. If you have any queries or need guidance, feel free to chat or drop a comment.

Keep coding, exploring, and sharing the joy of efficient deployments! Don't forget to like and share this guide to inspire others on their deployment adventures! 👍

Happy coding! 💻✨

Top comments (2)

Collapse
 
haw0k profile image
Cyril Zlachevsky • • Edited

Many thanks to the author for the article.

Step 2.4 Search for Cloud Run API and enable the Cloud Run API.
a search for Cloud Run API turns up Cloud Run Admin API

I reproduced all the steps from this article and got the error:

Run gcloud run deploy \

ERROR: (gcloud.run.deploy) Error parsing [service].
The [service] resource is not properly specified.
Failed to find attribute [service]. The attribute can be set in the following ways: 
- provide the argument `SERVICE` on the command line
- specify the service name from an interactive prompt
Error: Process completed with exit code 1.
Enter fullscreen mode Exit fullscreen mode

42 line of my cloud-run-deploy.yml (for the first time):

         gcloud run deploy \
            --image gcr.io/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.DOCKER_IMAGE_NAME }}:latest \
            --platform managed \
            --region us-central1 \
            --allow-unauthenticated
Enter fullscreen mode Exit fullscreen mode
Collapse
 
maro_studeni_3751e1d0a2 profile image
Maroš Studenič •

Would be cool if you also include how to add env variables to the build / deploy, where to store them / how to inlcude them.

Read next

probir-sarkar profile image

5 Modern UI Libraries for Next.js Based on TailwindCSS

Probir Sarkar -

cnuss profile image

Run Next.js in AWS Lambda

Christian Nuss -

asmyshlyaev177 profile image

Dark side of Next.js - App Router

Alex -

akhil_mittal profile image

Building a EKS Cluster with Terraform: A Modular and Scalable Approach

akhil mittal -