Kusk blog

Deploy NextJS App in Kubernetes

Dec 7, 2022
5 min
read

Deploying your web application in Kubernetes hasn't been easier with the use of Kusk Gateway. Read on for an in-depth tutorial on how to deploy your web applications quickly!

Abdallah Abedraba
Product Leader
Kusk

Table of Contents

Deploy NextJS App in Kubernetes

Deploying your NextJS application (or any web application for that matter) to Kubernetes should be a seamless experience. Containarize 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 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 the responsible of 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 these without the need to write a single line of code yourself.

## Deploy your NextJS application in Kubernetes with Kusk Gateway

[Kusk Gateway](https://kusk.io/) 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. Containarize 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](https://nextjs.org/docs/deployment#docker-image). And once you’ve containerized it, don’t forget to push it to your Dockerhub registry. 

-- CODE language-bash --
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 usecases.

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 installing and managing Kusk Gateway in your cluster:    


# MacOS 
brew install kubeshop/kusk/kusk

# Linux
curl -sSLf https://raw.githubusercontent.com/kubeshop/kusk-gateway/main/cmd/kusk/scripts/install.sh | 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: 

-- CODE language-bash -- 
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`. 

-- CODE language-bash --
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: 

-- CODE language-yaml --
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: 

-- CODE language-bash --
kubectl apply -f static-route.yaml

And you’re 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: 

-- CODE language-bash --
kusk ip
> output: 12.34.56.78

Now test this in your browser: 

And voilá! Your application is now exposed to the world! 

## 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!

Related Content

Stay in the Loop

Subscribe to stay up to date by getting the blog direct to your inbox

Or join the Kubeshop Community in one of these channels