This codelab teaches you how to containerize your web application and then host it on a GCP Kubernetes cluster with a custom domain name.

<a href="https://nextjs.org/">NextJS</a> is a popular framework to write react web applications. It has amazing features like Static Site Generation (SSG) and Server Side Rendering to make your web applications extremely fast and gives a boost to your SEO.&nbsp; It comes correctly configured with all the bells and whistles needed to make your react application production-ready.&nbsp;

But deploying an app to cloud environment requires quite a lot of configuration and learning new things. This tutorial guides you on how you can deploy NextJS application to a <a href="https://kubernetes.io/">Kubernetes</a> Cluster on <a href="https://cloud.google.com/">Google Cloud Platform</a> and then point your custom domain name to it.

Before we begin, we need below dependencies installed on your machine -

To confirm if your environment setup is correct, you can run simple version commands on your terminal as shown below

If any of the dependencies are missing, please use the links given to setup your environment properly.

At the end of this codelab, you would be able to get your web application hosted on your custom domain name and served by a kubernetes cluster hosted in GCP

The entire source code is available here&nbsp;

Let's create a simple NextJS application.&nbsp;

To create your first NextJS application,&nbsp;

This first instruction will take a few seconds to finish.&nbsp; It downloads an existing demo example from NextJS Github directory into&nbsp;<code class="inline-code">nextjs-blog</code> directory.&nbsp;

To verify if everything is working correctly, run <code class="inline-code">npm run dev</code> and you can see the message like below -

If you visit,&nbsp;<a href="http://localhost:3000">http://localhost:3000</a>, you can see a demo page like below -

Now, we need to create project in Google Cloud and set the zone to run our cluster into.

2.&nbsp;Enter a name for your Cloud project -&nbsp; nextjs-blog&nbsp;and click&nbsp;Create.

You will need this project ID many times. So you can set this project name as variable in terminal so that you don't make mistakes in next instructions.

3. Lastly, we need to set the zone to run the cluster into. List of available Google Compute Engine zones is <a href="https://cloud.google.com/compute/docs/zones#available">here</a>.&nbsp;Here, I have chosen us-central1-a. But you should generally choose one that is closest to where your most customers will be.

Now comes the important part to make your react application cloud ready. To be able to deploy your application on Kubernetes cluster, you need a Dockerfile for your application.

So first, we will create a filed named&nbsp;<code class="inline-code">Dockerfile</code> in the root directory of your application and add the below contents to it -

Each command in the <code class="inline-code">Dockerfile</code> helps extend the image generated in previous stage. We start with a basic image&nbsp;<code class="inline-code">FROM node:12</code> and then run our commands that copy our code into the image, install dependencies and then build the main application.&nbsp;&nbsp;The last step exposes the port 3000 that our web application is using.

Now, lets start building our image with a Tag Name in below structure -

&nbsp;⏳ may take a few minutes as it downloads and build entire image.&nbsp;

To verify if the image and application in it is setup correctly, start the docker container

This should start your server and you can verify if your page is again visible on&nbsp;<a href="http://localhost:3000">http://localhost:3000</a>

If everything looks good, you can stop this docker container using -

The docker image that we created in previous steps now should be pushed to Google Cloud Registry.&nbsp;

But before we do that, we need to enable&nbsp;Google Container Registry API on Google Cloud Console.&nbsp;

Now, we are ready to push this image to Google Container Registry.

Kubernetes is a portable, extensible, open-source platform for managing containerized applications and services. It makes it easy to create a cluster of multiple nodes and then manage their lifecycle.&nbsp;

Before you create one, you need to enable the Kubernetes Engine API for your project in Google Cloud. You can do that from the console.

Then choose correct project and click Enable as shown below -

Now, lets create a container cluster named <code class="inline-code">nextjs-blog-test</code> to deploy your web application:

Above command creates a 3 node cluster in a pool named default-pool. You can get information about this cluster using&nbsp;

Once we have an operational cluster, we now need to deploy the docker image we created in earlier steps to our kubernetes cluster.&nbsp;

Create a file named <code class="inline-code">nextjs-blog-deployment.yaml</code> on the root directory of our code and add the below content to it like below.

Note the Container Port 3000 on the last line.&nbsp;Now run the below command to make Kubernetes deploy your image to your cluster

You can get the details of your deployment and see them using below command -&nbsp;&nbsp;

There are 2 options to setup load balancer in front of your cluster nodes.

But if we are exposing an HTTP(S) service hosted on GKE,&nbsp;<a href="https://cloud.google.com/compute/docs/load-balancing/http">HTTP(S) load balancing</a>&nbsp;is the recommended method for load balancing. So we will choose option #2.

Since we wish to expose our service using our custom domain name, we need to reserve a static IP address. So let's create one.&nbsp;

To create a global static IP Address -&nbsp;

To get the details of reserved IP address -&nbsp;

The static IP Address shown here will be used to later when pointing domain name to your cluster.&nbsp;

b. Creating Service - Ingress and Backend

Now we need to create 2 services in kubernetes. 

To create services, first create a <code class="inline-code">next-blog-service.yaml</code> with below content&nbsp;

It creates 2 services with configurations separated by ---.

Services are sets of Pods with a network endpoint that can be used for discovery and load balancing. Ingresses are collections of rules for routing external HTTP(S) traffic to Services.

Where &lt;YOUR_GLOBAL_IP&gt; will be the external global static IP that we created above in part a.

Or you can visit the&nbsp;<a href="https://console.cloud.google.com/kubernetes/discovery?">console</a>

You check if your site is properly up by visiting http://&lt;YOUR_GLOBAL_IP&gt;

The global static IP address -&nbsp;&lt;YOUR_GLOBAL_IP&gt;&nbsp;that you created in previous state can now be used to change your DNS settings.

In our case, our domain is managed through <a href="https://domains.google.com/">domains.google.com</a>.&nbsp;The record values should be like below -&nbsp;

It takes upto few minutes to few hours for the DNS changes to propagate, depending upon your domain name manager.&nbsp;

You can go to https://&lt;your_domain_name&gt; to see your application is hosted properly.&nbsp;

2. Delete the allocation static global IP address

Setting up your web application in kubernetes cluster is quite straight forward. 

There some extra configurations you can do to your cluster through the Cloud Console to make your cluster scale dynamically so that you can save some money.

How to deploy NextJS app to Kubernetes Cluster in GCP with Custom Domain?

Nilesh Mahajan

Introduction

Prerequisites

What you need?

Expected Output

Source Code