Deploy NextJS App in Kubernetes

Deploying your NextJS application (or any web application for that matter) to Kubernetes should be a seamless experience. Containerize your NextJS app, create a Kubernetes Deployment and… done?

Actually, that’s not all. You still need to expose the application to the public, connect it to your domain, and probably do some fancy stuff like adding an OAuth login to your application. So, is that something you need to code yourself?

Use an API Gateway to deploy your web applications

Most of these issues that we describe in the process of deploying your web application in Kubernetes are actually solved by an API Gateway.

An API Gateway (or in Kubernetes terms, an Ingress Controller) is responsible for exposing your applications and microservices to the public, so people from outside the cluster can visit your application through your domain.

The API Gateway usually helps you connect your domain to your Kubernetes application, add authentication rules like OAuth, protect your application against DDoS attacks, add CORS rules, and load balance the traffic that is incoming. All of these without the need to write a single line of code yourself.

Deploy your NextJS application in Kubernetes with Kusk Gateway

Kusk Gateway is fully open-source API Gateway for Kubernetes that focuses on providing APIs with an amazing developer experience and simplicity of use, with the power of OpenAPI; but it also helps frontend developers deploy their applications easily in Kubernetes.

Let’s show an example of how to deploy your NextJS application with Kusk Gateway in Kubernetes. These instructions actually apply to any web application written in any language.

1. Containerize your NextJS app

We will first need to create a container of the web application and upload it to a container registry like Dockerhub.

To containerize your NextJS application follow the instruction from the NextJS team here. And once you’ve containerized it, don’t forget to push it to your Dockerhub registry.

docker push -t $DOCKER_USERNAME/web-application .

2. Create a Kubernetes cluster

There are many options to create a Kubernetes cluster, locally or using a cloud provider. The Title team has documented well which clusters work best for your use cases.

For this tutorial, it’s best if you can use a cloud provider cluster. There are very cheap options like Civo cloud from 5$/month. But you can also use a local cluster with Minikube or Kind.

3. Install Kusk Gateway in your cluster

Once you’ve connected to a Kubernetes cluster, install the Kusk CLI which will help you install and manage Kusk Gateway in your cluster:

# MacOS
brew install kubeshop/kusk/kusk

# Linux
curl -sSLf https://get.kusk.io | bash
# Windows

choco source add --name=kubeshop_repo --source=https://chocolatey.kubeshop.io/chocolatey
choco install kusk -y

Once you’ve installed the CLI, run the following command which will install Kusk Gateway in your Kubernetes cluster:

kusk cluster install

4. Deploy your application to the cluster

We’ll take the containerized application from step 1 and deploy it to the cluster. Make sure to update the $DOCKER_USERNAME field and the name of the container if you’ve changed it, in this case we’re using the container name web-application.

kubectl create deployment web-app --image=$DOCKER_USERNAME/web-application
kubectl expose deployment web-app --name web-app-svc --port=3000

5. Expose your web application to the public with Kusk Gateway

To expose your application with Kusk Gateway, you will need to create a Kusk StaticRoute. Here’s an example of one you can use for your application:

apiVersion: gateway.kusk.io/v1alpha1
kind: StaticRoute
metadata:
  name: web-app-static-route
spec:
  fleet:
    name: kusk-gateway-envoy-fleet
    namespace: kusk-system
  upstream:
    service:
      name: web-app-svc
      namespace: default
      port: 3000

Create a static-route.yaml file with the above content and apply it to the cluster with:

kubectl apply -f static-route.yaml

And your application is now exposed to the world!

6. Test your application in the browser

To test your application you’ll need to get the IP address of the gateway. Run the following command to obtain it:

kusk ip

> output: 12.34.56.78

Now test this in your browser:

Next steps

As a next step, you can try to connect your domain to the IP address of the application, you can follow an example the Kusk team has prepared here. Or you can add OAuth to your frontend application, the guides are already created for you!

Kusk also helps your API/backend team be very productive with the use of OpenAPI. It enables some neat GitOps workflows while providing all the features of a resilient gateway to the APIs. Give it a try and spread the word!

If you have any questions or ideas please feel free to join our Discord server and get in touch. Kusk is fully open source, so you can always help us by starring the project on GitHub, opening issues, or a PR!