What will we be doing?

Watch the workshop video! 🍿🍿

In this workshop, we will walk you through the process of setting up a Kubernetes environment and creating a front-end and API that communicate with each other. We will containerize the API and demonstrate how to access it using Minikube.

Prerequisites

Before getting started, make sure you have the following prerequisites installed:

• Docker Desktop
• DockerHub account
• Minikube
• kubectl CLI
• k9s interface
• Visual Studio Code (VSC)

Additionally, you can use the following command to set the remote origin of your Git repository:

git remote set-url origin [email protected]:your-repo.git

Part 1: Setting up Minikube

Install Minikube

Begin by installing Minikube by following the instructions here. After installation, start Minikube with the following command:

minikube start

Your kubectl CLI will automatically set the Kubernetes context, indicating the environment you are working with.

Visualizing with k9s

Instead of relying solely on CLI commands, we will use the k9s interface to monitor our progress. Run k9s using the following command:

k9s

Experimenting with Deployments

Let's start by creating a deployment using an Nginx image from Docker Hub:

In the k9s interface, you can easily switch between different tabs to view various aspects of your Kubernetes environment. To do this, press Shift + : and then type the name of the tab you want to switch to. In this case we'll be switching to deployments

First up is creating a deployment using a Nginx image:

When using the kubectl CLI to create a deployment, it's important to note that if you don't specify a Docker registry (i.e., the place where Docker images are hosted), Docker Hub is automatically used as the default registry. This is why we can directly reference the nginxdemos/hello image without mentioning a specific registry.

kubectl create deployment web --image=nginxdemos/hello

Now let's use k9s to debug and see if it's running.

To see if it's running, use k9s:

• Go to the pods tab.
• Port-forward our application using shift-f.
• Set port 80 for the container and a port of your choice for localhost.

Now, open the demo in your browser!

Exposing the app

Open the service tab using:

kubectl expose deployment web --type=NodePort --port=80

Ingress setup

ypically, you would use Ingresses to act as gateways between clients and your Kubernetes cluster. Let's enable and configure Ingress for Minikube:

minikube addons enable ingress
minikube addons enable ingress-dns

Add your first custom Kubernetes configuration for Ingress:

cat <<EOF | kubectl apply -f -
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: example-ingress
spec:
  rules:
    - host: hello-world.info
      ingressClassName: "nginx"
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: web
                port:
                  number: 80
EOF

To resolve the URL name, add it to your OS address list:

sudo -- sh -c 'echo "127.0.0.1  hello-world.info" >> /etc/hosts'

Expose the app to your OS:

minikube tunnel

You should now be able to access the server through your browser.

Part 2. Front-end and API

Creating the API

Create the necessary directories:

k8s-workshop/
├- front-end/
└─ api/
   └─ index.js

Create the API with the following code:

npm init
npm i koa
npm i @koa/cors

const Koa = require('koa');
const app = new Koa();

app.use(cors());

app.use(ctx => {
  ctx.body = {message: '🐒 Hello world'};
});

app.listen(4000);

Add a start script to your package.json:

"start": "node index.js"

Setting up the Front-end

For the front-end, let's use Next.js:

npx create-next-app@latest

Fetch data from your API by making an HTTP request. Be sure to use a different port for your front-end:

  useEffect(() => {
    (async () => {
      const response = await fetch("localhost:4000/");

      if (response.ok) {
        const body = await response.json();
        console.log(body);
      }
    })();
  }, []);

Part 3: Dockerize the API and Deploy to Minikube

Now, let's containerize our API using Docker. Follow the Docker workshop tutorial to create your Docker files.

Load your Docker image into Minikube:

minikube image load my-image

As a workaround for getting local images into minikube you can use:

1. Set the environment variables with sh eval $(minikube docker-env)
2. Build the image with the Docker daemon of Minikube docker build -t my-image .
3. Set the image in the pod specification like the build tag
4. Set the imagePullPolicy to Never, otherwise Kubernetes will try to download the image.

In other words:

# Set docker env
eval $(minikube docker-env)               # Unix shells
# minikube docker-env | Invoke-Expression # PowerShell

# Build image
docker build -t foo:0.0.1 .

Next, create a YAML file for the API deployment:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: workshop-api
  labels:
    app: web
spec:
  selector:
    matchLabels:
      app: web
  replicas: 1
  strategy:
    type: RollingUpdate
    template:
      metadata:
        labels:
          app: web
    spec:
      containers:
        - name: workshop-api
          image: workshop-api
          imagePullPolicy: Never
          ports:
            - containerPort: 4000

Apply the deployment to Minikube:

kubectl apply -f deployment.yaml

Create a service for the API:

kubectl expose deployment workshop-api --type=NodePort --port=4000

Create a yaml file:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: workshop-api
spec:
  rules:
    - host: workshop-api.info
      ingressClassName: "nginx"
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: workshop-api
                port:
                  number: 4000

Apply the Ingress:

kubectl apply -f ingress.yaml

Test the API with the following command:

curl --resolve "workshop-test.info:4000:$(minikube ip)" -i http://workshop-test.info

Add the API to your OS hosts and use minikube tunnel to expose it.

Now, you should be able to locally run your front-end and connect it to the Minikube-hosted API. Enjoy your Kubernetes journey!