A Touch of GitOps

In this guide, I’ll walk you through how I deployed and managed a Kubernetes based application using ArgoCD on macOS with Docker Desktop. The goal was to automate the deployment of a video transcription service with a frontend and backend, all while utilizing ArgoCD for GitOps management. This allows changes made to config files in a GitHub repo to be synced with a Kubernetes cluster for continuous deployment.

---

Project Directory Structure

Here’s the final directory structure for my Git repository:

.
├── argocd-applications.yml  # ArgoCD application manifest
├── backend
│   ├── backend-deployment.yml
│   └── backend-service.yml
└── frontend
    ├── frontend-deployment.yml
    └── frontend-service.yml

The argocd-applications.yml defines how ArgoCD manages the backend and frontend deployments.

---

Step 1: Preparing the Environment

Install Docker Desktop and Enable Kubernetes

• Ensure Kubernetes is enabled in Docker Desktop under Preferences > Kubernetes > Enable Kubernetes.
• Test Kubernetes with: kubectl get nodes You should see a docker-desktop node running.

Clone the Repository

Clone your project repository to ensure the local files match what ArgoCD will manage:

git clone https://github.com/mattclemons/argocd_test.git
cd argocd_test

---

Step 2: Install ArgoCD

To install ArgoCD on Kubernetes:

• Create the namespace: kubectl create namespace argocd
• Apply the installation manifest:

kubectl apply -n argocd -f https://raw.githubusercontent.com/argoproj/argo-cd/stable/manifests/install.yaml

• Verify the pods: kubectl get pods -n argocd

---

Step 3: Access ArgoCD

Expose ArgoCD Server

For local development, use port forwarding to access the ArgoCD web interface:

kubectl port-forward svc/argocd-server -n argocd 8080:443

Access the ArgoCD GUI in your browser at https://localhost:8080.

Login to ArgoCD

Retrieve the default admin password:

kubectl get secret argocd-initial-admin-secret -n argocd -o jsonpath="{.data.password}" | base64 -d

Login via CLI:

argocd login localhost:8080

• Use admin as the username.
• Paste the password retrieved earlier.

---

Step 4: Kubernetes Manifests for Frontend and Backend

Backend: backend/backend-deployment.yml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: transcriber-backend
  labels:
    app: transcriber-backend
spec:
  replicas: 2
  selector:
    matchLabels:
      app: transcriber-backend
  template:
    metadata:
      labels:
        app: transcriber-backend
    spec:
      containers:
      - name: transcriber-backend
        image: mattclemons/transcriber-backend:latest
        ports:
        - containerPort: 8000

Backend Service: backend/backend-service.yml

apiVersion: v1
kind: Service
metadata:
  name: transcriber-backend
spec:
  type: LoadBalancer
  selector:
    app: transcriber-backend
  ports:
  - protocol: TCP
    port: 8000
    targetPort: 8000

Frontend: frontend/frontend-deployment.yml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: transcriber-frontend
  labels:
    app: transcriber-frontend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: transcriber-frontend
  template:
    metadata:
      labels:
        app: transcriber-frontend
    spec:
      containers:
      - name: transcriber-frontend
        image: mattclemons/transcriber-frontend:latest
        ports:
        - containerPort: 3000
        env:
        - name: BACKEND_URL
          value: "http://transcriber-backend:8000"

Frontend Service: frontend/frontend-service.yml

apiVersion: v1
kind: Service
metadata:
  name: transcriber-frontend
spec:
  type: LoadBalancer
  selector:
    app: transcriber-frontend
  ports:
  - protocol: TCP
    port: 3000
    targetPort: 3000

---

Step 5: ArgoCD Application Manifest

This manifest tells ArgoCD to monitor the repository and manage the backend and frontend applications.

argocd-applications.yml

apiVersion: argoproj.io/v1alpha1
kind: Application
metadata:
  name: video-transcriber
  namespace: argocd
spec:
  project: default
  source:
    repoURL: https://github.com/mattclemons/argocd_test.git
    path: .
    targetRevision: HEAD
  destination:
    server: https://kubernetes.default.svc
    namespace: default
  syncPolicy:
    automated:
      prune: true
      selfHeal: true
    syncOptions:
    - CreateNamespace=true

Apply the Manifest

Once all files are in place and committed to the repository, apply the ArgoCD application manifest:

kubectl apply -f argocd-applications.yml -n argocd

This will allow ArgoCD to pick up the repository and manage the Kubernetes resources automatically.

---

Step 6: Verify Deployment

• Check the application in ArgoCD: argocd app get video-transcriber
• Verify pods in Kubernetes: kubectl get pods You should see both transcriber-backend and transcriber-frontend pods running.
• Test connectivity:
  • Backend: curl localhost:8000
  • Frontend: Open http://localhost:3000 in your browser.

---

Screens

Here are some screenshots from Lens and GitHub showing a commit where I updated the scaling in the backend-deployment.yml file from 1 to 3 replicas. The screenshots also show ArgoCD detecting the change and applying it to the cluster.