Zero to Kubernetes Part 5: Two Frontends + Complete Stack

Series: Zero to Kubernetes — Part 1 · Part 2 · Part 3 · Part 4 · Part 5

You've made it to the final part. You now have a real Kubernetes cluster, automatic TLS, GitOps with ArgoCD, PostgreSQL, and a FastAPI backend running with 2 replicas. Only what your users actually see is missing: the frontends.

We'll deploy two independent applications that consume the same API. One is an admin dashboard (React + Vite). The other is a public app (Vue 3). Both packaged with Docker, served with nginx for production, and exposed with ingress + TLS. At the end, we'll run a full integration test.

Final Architecture

┌────────────────────────────────────────────────────────────┐
│                      INTERNET                               │
│                         │                                   │
│    ┌────────────────────┼────────────────────┐              │
│    │                    │                    │              │
│    ▼                    ▼                    ▼              │
│ ┌──────────┐    ┌──────────────┐    ┌──────────────┐       │
│ │ admin.   │    │ api.         │    │ app.         │       │
│ │yourdomain│    │yourdomain.com│    │yourdomain.com│       │
│ └────┬─────┘    └──────┬───────┘    └──────┬───────┘       │
│      │                 │                   │               │
│      ▼                 ▼                   ▼               │
│ ┌──────────┐    ┌──────────────┐    ┌──────────────┐       │
│ │ React    │    │ FastAPI      │    │ Vue 3        │       │
│ │ Dashboard│───▶│ Backend      │◀───│ Landing Page │       │
│ │ (Vite)   │    │ (2 replicas) │    │ (Vite)       │       │
│ └──────────┘    └──────┬───────┘    └──────────────┘       │
│                        │                                   │
│                        ▼                                   │
│               ┌────────────────┐                           │
│               │ PostgreSQL 16  │                           │
│               │ (CloudNativePG)│                           │
│               └────────────────┘                           │
│                                                            │
│ ☸️ Kubernetes (kubeadm + containerd + Calico)               │
│ 🌐 nginx ingress + cert-manager (Let's Encrypt TLS)        │
│ 🔄 ArgoCD — everything synced from GitHub                  │
└────────────────────────────────────────────────────────────┘

Part A: Frontend #1 — Admin Dashboard (React + Vite)

npm create vite@latest frontend-admin -- --template react-ts
cd frontend-admin && npm install

src/App.tsx (simplified):

import { useEffect, useState } from 'react'

const API_URL = import.meta.env.VITE_API_URL || 'https://api.yourdomain.com:30443'

interface Item {
  id: number; name: string; description: string; created_at: string
}

export default function App() {
  const [items, setItems] = useState<Item[]>([])
  const [name, setName] = useState('')
  const [desc, setDesc] = useState('')
  const [loading, setLoading] = useState(true)
  const [dbStatus, setDbStatus] = useState('')

  useEffect(() => {
    fetch(`${API_URL}/health`).then(r => r.json()).then(d => setDbStatus(d.db))
    loadItems()
  }, [])

  const loadItems = () => {
    fetch(`${API_URL}/items`).then(r => r.json()).then(setItems).finally(() => setLoading(false))
  }

  const createItem = async () => {
    await fetch(`${API_URL}/items`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, description: desc })
    })
    setName(''); setDesc(''); loadItems()
  }

  const deleteItem = async (id: number) => {
    await fetch(`${API_URL}/items/${id}`, { method: 'DELETE' })
    loadItems()
  }

  return (
    <div className="dashboard">
      <header>
        <h1>📊 Admin Dashboard</h1>
        <span className={`status ${dbStatus === 'connected' ? 'ok' : 'err'}`}>
          DB: {dbStatus}
        </span>
      </header>
      <section className="create-form">
        <input value={name} onChange={e => setName(e.target.value)} placeholder="Item name" />
        <input value={desc} onChange={e => setDesc(e.target.value)} placeholder="Description" />
        <button onClick={createItem}>Create Item</button>
      </section>
      <section className="items-table">
        <h2>Items ({items.length})</h2>
        {loading ? <p>Loading...</p> : (
          <table>
            <thead><tr><th>ID</th><th>Name</th><th>Description</th><th>Created</th><th></th></tr></thead>
            <tbody>
              {items.map(item => (
                <tr key={item.id}>
                  <td>{item.id}</td><td>{item.name}</td><td>{item.description}</td>
                  <td>{new Date(item.created_at).toLocaleString()}</td>
                  <td><button onClick={() => deleteItem(item.id)}>🗑️</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </section>
    </div>
  )
}

Part B: Frontend #2 — Public Landing (Vue 3)

npm create vite@latest frontend-app -- --template vue-ts
cd frontend-app && npm install

src/App.vue (simplified):

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const API_URL = import.meta.env.VITE_API_URL || 'https://api.yourdomain.com:30443'
const items = ref<any[]>([])
const loading = ref(true)
const form = ref({ name: '', description: '' })

const loadItems = async () => {
  const r = await fetch(`${API_URL}/items`)
  items.value = await r.json()
  loading.value = false
}

const createItem = async () => {
  await fetch(`${API_URL}/items`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(form.value)
  })
  form.value = { name: '', description: '' }
  loadItems()
}

onMounted(loadItems)
</script>

<template>
  <main class="landing">
    <h1>🚀 Guayoyo Items</h1>
    <p class="subtitle">Create and share items instantly</p>
    <form @submit.prevent="createItem" class="create">
      <input v-model="form.name" placeholder="What do you want to create?" required />
      <textarea v-model="form.description" placeholder="Describe your item..." rows="2" />
      <button type="submit">Create</button>
    </form>
    <div class="grid">
      <div v-for="item in items" :key="item.id" class="card">
        <h3>{{ item.name }}</h3>
        <p>{{ item.description }}</p>
        <small>{{ new Date(item.created_at).toLocaleDateString() }}</small>
      </div>
    </div>
    <p v-if="loading">Loading...</p>
  </main>
</template>

Part C: Docker + nginx for Production

Both frontends use the exact same multi-stage Docker pattern:

Dockerfile:

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf:

server {
    listen 80;
    server_name _;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    location /health {
        return 200 "OK";
        add_header Content-Type text/plain;
    }
}

Build and push for both:

docker build -t ghcr.io/your-org/frontend-admin:v1.0.0 ./frontend-admin
docker push ghcr.io/your-org/frontend-admin:v1.0.0

docker build -t ghcr.io/your-org/frontend-app:v1.0.0 ./frontend-app
docker push ghcr.io/your-org/frontend-app:v1.0.0

Part D: Kubernetes Manifests for Both Frontends

Both use the same structure. Only the image, ingress host, and API variable change.

gitops/apps/frontend-app1/deployment.yaml (Admin Dashboard):

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend-admin
  namespace: production
spec:
  replicas: 2
  selector:
    matchLabels:
      app: frontend-admin
  template:
    metadata:
      labels:
        app: frontend-admin
    spec:
      containers:
        - name: nginx
          image: ghcr.io/your-org/frontend-admin:v1.0.0
          ports:
            - containerPort: 80
          resources:
            requests:
              memory: "64Mi"
              cpu: "50m"
            limits:
              memory: "128Mi"
              cpu: "200m"
          livenessProbe:
            httpGet:
              path: /health
              port: 80
            initialDelaySeconds: 5
            periodSeconds: 15
          readinessProbe:
            httpGet:
              path: /health
              port: 80
            initialDelaySeconds: 3
            periodSeconds: 10

Ingress (admin):

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: frontend-admin
  namespace: production
  annotations:
    cert-manager.io/cluster-issuer: letsencrypt-production
    nginx.ingress.kubernetes.io/ssl-redirect: "true"
spec:
  ingressClassName: nginx
  tls:
    - hosts:
        - admin.yourdomain.com
      secretName: admin-tls
  rules:
    - host: admin.yourdomain.com
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: frontend-admin
                port:
                  number: 80

Repeat the same pattern for frontend-app (Vue), changing admin to app everywhere.

Part E: ArgoCD Syncs Everything

On git push with both frontend files, ArgoCD auto-detects the new directories in gitops/apps/ (thanks to directory.recurse: true in app-of-apps). The UI shows:

🌳 app-of-apps
  ├── 🟢 database        (Healthy · Synced)
  ├── 🟢 backend         (Healthy · Synced)  2 pods
  ├── 🟢 frontend-app1   (Healthy · Synced)  2 pods
  └── 🟢 frontend-app2   (Healthy · Synced)  2 pods

Four applications, two replicas each (except DB), TLS on all ingresses. Everything from a git push.

Part F: Full Integration Test

1. Create an item from the public app

Open https://app.yourdomain.com, fill in "Coffee time" and create. The backend responds 201 Created.

2. See it in the admin dashboard

Open https://admin.yourdomain.com. The table shows:

ID	Name	Description	Created
1	Coffee time	Best coffee in town	5/20/2026

The dashboard also shows DB: connected in green.

3. Create another item from the dashboard

"Create Item" → "Morning meeting notes" → Enter.

4. Verify the public app sees it

Refresh https://app.yourdomain.com. Now there are 2 cards. Both apps share data through the same API.

5. Delete from dashboard

🗑️ on "Coffee time" → disappears from both apps.

Rollback in Action

# 1. Revert the change in git
cd gitops
git revert HEAD --no-edit
git push

# 2. ArgoCD detects the change and reverts
argocd app diff backend  # shows image going back to v1.0.0

# 3. Verify
curl https://api.yourdomain.com/health
# {"status":"ok","db":"connected"}

Total rollback time: however long git revert && git push takes. Under 30 seconds.

What You Built Across These 5 Parts

Part	Deliverable
Part 1	3 Hetzner VMs, kubeadm, containerd, Calico — real cluster
Part 2	Namespaces, nginx ingress, cert-manager (auto TLS), storage, RBAC
Part 3	ArgoCD, GitOps, app-of-apps, auto sync with selfHeal + prune
Part 4	PostgreSQL with CloudNativePG, FastAPI backend with health checks and migrations
Part 5	Two frontends (React + Vue, each with its own ingress + TLS), backend ↔ frontend communication

Complete tech stack: Hetzner Cloud → Terraform → kubeadm → containerd → Calico → nginx ingress → cert-manager → ArgoCD → CloudNativePG → FastAPI → React → Vue → Docker → GitHub

Next Steps (On Your Own)

What you built is the foundation. On top of this you can add:

CI with GitHub Actions: Automatic Docker build on push, push to registry, update tag in GitOps repo
Monitoring: Prometheus + Grafana (kube-prometheus-stack installs in 5 minutes)
Centralized Logs: Loki + Grafana
HA: Second PostgreSQL instance with replication, multiple control-planes
Service Mesh: Linkerd for automatic mTLS between services
Image Updater: ArgoCD Image Updater for auto-updating images on new tags
Real Secrets: Migrate from plain text Secret to SealedSecrets or ExternalSecrets + Vault

At Guayoyo Tech, we build complete architectures like this for companies that need serious infrastructure. From the Terraform that provisions the VMs to the last button on the React dashboard. Kubernetes, GitOps, CI/CD, monitoring — all integrated, documented, with knowledge transfer included. Talk to the team free for 15 minutes and we'll show you how to take your infrastructure to the next level.

推荐订阅源

DEV Community