Kubernetes Developer Workshop

💻 Adding The Frontend

We've ignored the frontend until this point, with the API and DB in place we are finally ready to deploy it. We need to use a Deployment and Service just as before (you might be starting to see a pattern!). We can pick up the pace a little and setup everything we need in one go.

For the Deployment:

For the Service:

You might like to try creating the service before deploying the pods to see what happens. The YAML you can use for both, is provided below:

frontend-deployment.yaml:

kind: Deployment
apiVersion: apps/v1

metadata:
  name: nanomon-frontend

spec:
  replicas: 1
  selector:
    matchLabels:
      app: nanomon-frontend
  template:
    metadata:
      labels:
        app: nanomon-frontend
    spec:
      containers:
        - name: frontend-container

          image: __ACR_NAME__.azurecr.io/nanomon-frontend:latest
          imagePullPolicy: Always

          ports:
            - containerPort: 8001

          env:
            - name: API_ENDPOINT
              value: http://__API_EXTERNAL_IP__/api

frontend-service.yaml:

Click here for the frontend service YAML
kind: Service
apiVersion: v1

metadata:
  name: frontend

spec:
  type: LoadBalancer
  selector:
    app: nanomon-frontend
  ports:
    - protocol: TCP
      port: 80
      targetPort: 8001

As before, the there are changes that are required to the supplied YAML, do not try to use it as-is, instead replace anything inside double underscores e.g. __SOMETHING__ with a corresponding real value.

💡 Accessing and Using the App

Once the two YAMLs have been applied:

If you want to spend a few minutes using the app, you can click on "New" and create a new monitor, click on the "HTTP" button to create a default HTTP monitor, pointing at http://example.net for example. Then click "Create" and you should see the monitor appear in the main view. It will remain in a grey "Unknown" status until we deploy the runner in a later section. But the fact that the monitor appears shows that the frontend is able to communicate with the API and the API with the database.

🖼️ Cluster & Architecture Diagram

The resources deployed into the cluster & in Azure at this stage can be visualized as follows:

architecture diagram

Notice we have two public IPs, but not two Azure Load Balancers. The LoadBalancer service type is not an instruction to Azure to deploy an entire Azure Load Balancer. Instead it's used to create a new public IP and assign it to the single Azure Load Balancer (created by AKS) that sits in front of the cluster. We'll refine this later when we look at setting up an ingress.