How to Deploy a Next.js App on Google Cloud Platform (GCP) by File2File

How to Deploy a Next.js App on Google Cloud Platform

Google Cloud Platform (GCP) is one of the most reliable cloud hosting services used by developers worldwide. Deploying a Next.js app on GCP provides the flexibility, scalability, and performance needed for modern web applications. In this article, we will guide you through the process of deploying your Next.js app on Google Cloud Platform.

Step 1: Set Up Your Google Cloud Project

To begin deploying your Next.js app on GCP, you first need to create a project on Google Cloud:

1. Create a Google Cloud Account: If you haven’t already, sign up for Google Cloud at https://cloud.google.com.
2. Create a New Project: After logging in, go to the Google Cloud Console and click on the “Create Project” button to set up a new project. Give your project a unique name and select your billing account if prompted.
3. Enable the Cloud Run API: You’ll be deploying your Next.js app using Google Cloud Run, so you need to enable the Cloud Run API. To do so, go to the API & Services section and search for "Cloud Run." Enable it.

Step 2: Install Google Cloud SDK

Google Cloud SDK is a set of tools that allow you to interact with Google Cloud resources directly from your command line. To install it, follow these steps:

1. Download the Google Cloud SDK: Go to this page and follow the installation instructions for your operating system.

2. Authenticate with Your Google Cloud Account: Open your terminal and run:

gcloud auth login

This will prompt you to log into your Google account and authorize the SDK to access your Google Cloud resources.

3. Set Your Project ID: Once you’ve authenticated, set your project ID with the following command:

gcloud config set project YOUR_PROJECT_ID

Replace YOUR_PROJECT_ID with the ID of your project created earlier.

Step 3: Prepare Your Next.js App

If you haven’t already, you need to create a Next.js app. To do so:

1. Open your terminal and run the following command to create a Next.js app:

npx create-next-app@latest my-next-app

2. Navigate into your app’s directory:

cd my-next-app

3. Install any necessary dependencies and make sure your app works locally:

npm install
npm run dev

Step 4: Set Up Docker for Deployment

Google Cloud Run requires your app to be containerized using Docker. Here’s how you can set it up:

1. Install Docker: If you haven’t installed Docker, you can download and install it from here.

2. Create a Dockerfile: In the root directory of your Next.js project, create a file named Dockerfile and add the following content:

# Use official Node.js image as base image
FROM node:16-alpine

# Set working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Build the Next.js app
RUN npm run build

# Expose port 3000
EXPOSE 3000

# Command to run the app
CMD ["npm", "start"]

3. Build the Docker Image: Now, build your Docker image by running the following command:

docker build -t nextjs-app .

4. Run the Docker Image Locally: Test the Docker container locally before deployment by running:

docker run -p 3000:3000 nextjs-app

Navigate to http://localhost:3000 in your browser to confirm your app is running inside the Docker container.

Step 5: Push Your Docker Image to Google Container Registry

Now that your app is containerized, you need to upload the Docker image to Google Container Registry (GCR), which will allow Cloud Run to access it.

1. Tag the Docker Image: Tag your Docker image with the following command:

docker tag nextjs-app gcr.io/YOUR_PROJECT_ID/nextjs-app

Replace YOUR_PROJECT_ID with your Google Cloud project ID.

2. Push the Docker Image: Push the Docker image to Google Container Registry:

docker push gcr.io/YOUR_PROJECT_ID/nextjs-app

Step 6: Deploy to Google Cloud Run

With your Docker image uploaded to Google Container Registry, it’s time to deploy it on Google Cloud Run:

1. Deploy the App: Run the following command to deploy your Next.js app to Cloud Run:

gcloud run deploy --image gcr.io/YOUR_PROJECT_ID/nextjs-app --platform managed --region us-central1

• This command tells Google Cloud to deploy your app from the specified image.
• You’ll be asked to choose a region (e.g., us-central1).
• Google Cloud will also ask if you want to allow unauthenticated access to your service. Select Yes.

2. View the App: After the deployment is complete, Cloud Run will provide you with a URL to access your live Next.js app.

Step 7: Set Up Custom Domain (Optional)

If you want to use a custom domain for your app instead of the default Google Cloud URL, follow these steps:

1. Go to the Cloud Run Console and select your service.
2. Under the Settings tab, click on Add Mapping and enter your custom domain.
3. Follow the instructions to configure DNS settings for your domain.

Conclusion

Deploying a Next.js app on Google Cloud Platform using Cloud Run is a robust and scalable solution for modern web applications. With just a few steps, you can containerize your app, push it to Google Cloud, and deploy it with minimal effort. Plus, Google Cloud’s infrastructure ensures that your app is highly available and can scale with traffic needs. Whether you’re deploying for production or testing, GCP makes it easy to host your Next.js app in the cloud.