Skip to content
This repository has been archived by the owner on Dec 17, 2023. It is now read-only.

Deploy Next.js App into Google Cloud Run(GCR) with Docker

Jump to bottom
tpAtalas edited this page Mar 6, 2023 · 9 revisions

Table of Contents

References:Fix the typo, spells, grammar, or any other issue. Then show me the fixes with the explanation with the line number.

Deploy Next.js App into Google Cloud Run (GCR) with Docker

Create a Front App immediately with Next.js on Google Cloud Run

Before start

  1. Check for prerequisites

prerequisite:

  1. Next.js app with DockerFiles
  2. Google Cloud Platform Account Google Cloud Platform
  3. Docker brew docker
  1. [Optional] Update setting if local machine is Apple silicone, Above M1 MacBook.

Check for Dockerfile

  • add --platform linux/amd64 flag to the Dockerfile.
# Example
# from
FROM node:18-alpine AS deps
# to
FROM --platform=linux/amd64 node:18-alpine AS deps
  • enable buildx

buildx enables to build image for other architecture such as amd64

More Info: How to install and enable buildx

# if using Docker Desktop set true on experimental
...
},
  "experimental": true,
...

Configure port setting

  1. Go to your next.js app
  2. go to package.json
  3. set the PORT as shown below:
  "scripts":
  {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p $PORT"
  }

NOTE: if you want to run the production build:

# PORT=8080 yarn start
npm run start -p 8080

# run Docker build
docker run -e PORT=8080 -p 3000:8080 next-app

Setup Google Cloud SDK with Brew

  1. Install SDK with brew

You can alternatively follow the Google's official installation guide:

Install the gcloud CLI

brew install --cask google-cloud-sdk
  1. Find the location of google-cloud-sdk 
find / -name google-cloud-sdk 2>/dev/null
# it must be:
# .../Caskroom/google-cloud-sdk/<version>/google-cloud-sdk/install.sh
  1. Run install
/System/Volumes/Data/opt/homebrew/Caskroom/google-cloud-sdk/latest/google-cloud-sdk/install.sh

Build Docker locally

# docker build <PATH> -t <REPO_NAME>:<TAG>
docker build . -t example-project:latest

Get Google Cloud Platform's project ID

  1. Go to GCP
  2. Select project from dropdown next to Google Cloud Logo
  3. Check your project ID See the example

NOTE:

I will use this-is-my-project-ID as example project ID

Deploy to Google Cloud Run

  1. Create a different namespace docker image tag
# docker tag <SOURCE_REPO_NAME> gcr.io/<GCP_PROJECT_ID>/<GCR_REPO_NAME>:<GCR_TAG>
docker tag example-project:latest gcr.io/this-is-my-project-ID/example-project:latest
  1. Create Google Container Registry CredHelper 
gcloud auth configure-docker

[optional] Credential Error

unauthorized: You don't have the needed permissions to perform this operation, and you may have invalid credentials. To authenticate your request, follow the steps in: https://cloud.google.com/container-registry/docs/advanced-authentication

# login to Google Cloud Platform
gcloud auth login
# change project ID if necessary
gcloud config set project [PROJECT_ID]
# check the current project ID
gcloud config get-value project
  1. Push the docker image to Google Container Registry (GCR)
# push to GCR
docker push gcr.io/this-is-my-project-ID/example-project:latest

Deploy the pushed image to Cloud Run manually

Checkout regions and zone of GCP
GCP Regions and zones VPC Connector: Check Troubleshooting for how to create VPC Connector
Google Secrets Manager: How to create Google Secret Manager

  1. Run Deploy (Choose the applicable one of commands below)

VPC Connector: Check Troubleshooting for how to create VPC Connector
Google Secrets Manager: How to create Google Secret Manager

  • Without Static IP & VPC connector
# deploy to GCR
# gcloud run deploy --image gcr-io/[project ID]/[docker-image tag] --project [project ID] platform managed --region [region such as us-central1]--image --allow-unauthenticated

gcloud run deploy \
  --image gcr.io/this-is-my-project-ID/example-project:latest \
  --project this-is-my-project-ID \
  --platform managed \
  --region us-central1 \
  --allow-unauthenticated
  • If you have static IP & VPC connector & Secret from Google Secret Manager
gcloud run deploy \
  --image gcr.io/this-is-my-project-ID/example-project:latest \
  --project this-is-my-project-ID \
  --platform managed \
  --region us-central1 \
  --allow-unauthenticated \
  --vpc-connector=example-connector \
  --region=us-central1 \
  --vpc-egress=all-traffic \
  --update-secrets MONGODB_URI=example-secrets:latest
  1. Enter service name
# new service will be created as shown below
example-project-app01
# login if asked

Deploy the pushed image to Cloud Run automatically

For More information:

  1. Create .env.local file at root if you do not have one.

Note: make sure to list the .env.local to .gitignore.

  1. Defined the following Environment Variable.
# SERVICE_NAME=[Your app name running on the ]
# IMAGE_NAME=[Your docker image name]
# IMAGE_TAG=[Your docker image tag]
# GCP_PROJECT_ID=[project ID of Google Cloud Platform]
# DEPLOY_REGION=[region of deployment app on Google Cloud Run]
#
# Environment Variable shown below are optional and only works when they are set
# on Google Cloud Platform. Deploy.sh will ignore if values are not provided.
#
# VPC_CONNECTOR=[Your VPC Connector]
# VPC_REGION=[Your VPC Connector region]
# SECRET_ENVIRONMENT_VARIABLE_[Name]=[Environment Variable Name]
# SECRET_NAME_[Name]=[Google Secret name]

# example
SERVICE_NAME=example-service-name
IMAGE_NAME=example-project
IMAGE_TAG=latest
GCP_PROJECT_ID=my-project-id
DEPLOY_REGION=us-central1
VPC_CONNECTOR=example-vpc-connector
VPC_REGION=us-central1
SECRET_ENVIRONMENT_VARIABLE_MONGODB=MONGODB_KEY
SECRET_NAME_MONGODB=MONGODB_KEY
  1. [optional] Login to Google Cloud Platform if necessary
gcloud auth login
  1. Run deployment
sh deploy.sh
Clone this wiki locally