Files
cmdb-insight/docs/QUICK-DEPLOYMENT-GUIDE.md
Bert Hausmans cdee0e8819 UI styling improvements: dashboard headers and navigation
- Restore blue PageHeader on Dashboard (/app-components)
- Update homepage (/) with subtle header design without blue bar
- Add uniform PageHeader styling to application edit page
- Fix Rapporten link on homepage to point to /reports overview
- Improve header descriptions spacing for better readability
2026-01-21 03:24:56 +01:00

7.8 KiB

Quick Deployment Guide - Van Images naar Productie 🚀

Je Docker images zijn klaar! Hier is een snelle guide om ze te deployen.

🎯 Snelle Keuze: Welke Deployment Optie?

Voor 20 gebruikers, productie:Azure App Service (Managed, eenvoudig, ~€20/maand)

Voor test/development:VM met Docker Compose (Flexibel, snel op te zetten)

Voor enterprise/scale:Azure Kubernetes Service (Complex, maar krachtig)


Optie 1: Azure App Service (Aanbevolen) - 15 minuten

Stap 1: Maak App Service Plan aan

# Resource Group (als nog niet bestaat)
az group create --name rg-cmdb-gui --location westeurope

# App Service Plan (Basic B1 - voldoende voor 20 gebruikers)
az appservice plan create \
  --name plan-cmdb-gui \
  --resource-group rg-cmdb-gui \
  --sku B1 \
  --is-linux

Stap 2: Maak Web Apps aan

# Backend Web App
az webapp create \
  --name cmdb-backend-prod \
  --resource-group rg-cmdb-gui \
  --plan plan-cmdb-gui \
  --deployment-container-image-name zdlas.azurecr.io/cmdb-insight/backend:latest

# Frontend Web App
az webapp create \
  --name cmdb-frontend-prod \
  --resource-group rg-cmdb-gui \
  --plan plan-cmdb-gui \
  --deployment-container-image-name zdlas.azurecr.io/cmdb-insight/frontend:latest

Stap 3: Configureer ACR Authentication

# Enable managed identity
az webapp identity assign \
  --name cmdb-backend-prod \
  --resource-group rg-cmdb-gui

az webapp identity assign \
  --name cmdb-frontend-prod \
  --resource-group rg-cmdb-gui

# Grant ACR pull permissions
az acr update \
  --name zdlas \
  --admin-enabled true

# Configure ACR credentials
az webapp config container set \
  --name cmdb-backend-prod \
  --resource-group rg-cmdb-gui \
  --docker-custom-image-name zdlas.azurecr.io/cmdb-insight/backend:latest \
  --docker-registry-server-url https://zdlas.azurecr.io \
  --docker-registry-server-user $(az acr credential show --name zdlas --query username -o tsv) \
  --docker-registry-server-password $(az acr credential show --name zdlas --query passwords[0].value -o tsv)

az webapp config container set \
  --name cmdb-frontend-prod \
  --resource-group rg-cmdb-gui \
  --docker-custom-image-name zdlas.azurecr.io/cmdb-insight/frontend:latest \
  --docker-registry-server-url https://zdlas.azurecr.io \
  --docker-registry-server-user $(az acr credential show --name zdlas --query username -o tsv) \
  --docker-registry-server-password $(az acr credential show --name zdlas --query passwords[0].value -o tsv)

Stap 4: Configureer Environment Variabelen

# Backend environment variables
az webapp config appsettings set \
  --name cmdb-backend-prod \
  --resource-group rg-cmdb-gui \
  --settings \
    NODE_ENV=production \
    PORT=3001 \
    JIRA_BASE_URL=https://jira.zuyderland.nl \
    JIRA_SCHEMA_ID=your-schema-id \
    SESSION_SECRET=your-secure-secret \
    FRONTEND_URL=https://cmdb-frontend-prod.azurewebsites.net

# Frontend environment variables
az webapp config appsettings set \
  --name cmdb-frontend-prod \
  --resource-group rg-cmdb-gui \
  --settings \
    VITE_API_URL=https://cmdb-backend-prod.azurewebsites.net/api

Stap 5: Configureer SSL (Gratis via App Service)

# App Service heeft automatisch SSL via *.azurewebsites.net
# Voor custom domain:
az webapp config hostname add \
  --webapp-name cmdb-frontend-prod \
  --resource-group rg-cmdb-gui \
  --hostname cmdb.zuyderland.nl

# Bind SSL certificate
az webapp config ssl bind \
  --name cmdb-frontend-prod \
  --resource-group rg-cmdb-gui \
  --certificate-thumbprint <thumbprint> \
  --ssl-type SNI

Stap 6: Start de Apps

az webapp start --name cmdb-backend-prod --resource-group rg-cmdb-gui
az webapp start --name cmdb-frontend-prod --resource-group rg-cmdb-gui

Je applicatie is nu live op:

  • Frontend: https://cmdb-frontend-prod.azurewebsites.net
  • Backend API: https://cmdb-backend-prod.azurewebsites.net/api

🖥️ Optie 2: VM met Docker Compose - 20 minuten

Stap 1: Maak VM aan

az vm create \
  --resource-group rg-cmdb-gui \
  --name vm-cmdb-gui \
  --image Ubuntu2204 \
  --size Standard_B2s \
  --admin-username azureuser \
  --generate-ssh-keys \
  --public-ip-sku Standard

Stap 2: SSH naar VM en installeer Docker

# SSH naar VM
ssh azureuser@<vm-public-ip>

# Installeer Docker
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh
sudo usermod -aG docker $USER
newgrp docker

# Installeer Docker Compose
sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

Stap 3: Login naar ACR

# Installeer Azure CLI (als nog niet geïnstalleerd)
curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash
az login

# Login naar ACR
az acr login --name zdlas

# OF gebruik credentials
az acr credential show --name zdlas
docker login zdlas.azurecr.io -u <username> -p <password>

Stap 4: Clone Repository en Deploy

# Clone repository
git clone <your-repo-url>
cd cmdb-insight

# Maak .env.production aan
nano .env.production
# (Plak je environment variabelen)

# Update docker-compose.prod.acr.yml (ACR naam is al correct: zdlas)

# Start containers
docker-compose -f docker-compose.prod.acr.yml up -d

# Check status
docker-compose -f docker-compose.prod.acr.yml ps
docker-compose -f docker-compose.prod.acr.yml logs -f

Stap 5: Configureer Nginx en SSL

# Installeer certbot voor Let's Encrypt
sudo apt update
sudo apt install certbot python3-certbot-nginx -y

# Configureer SSL
sudo certbot --nginx -d cmdb.zuyderland.nl

🔍 Verificatie

Test of alles werkt:

# Check backend health
curl https://your-backend-url/api/health

# Check frontend
curl https://your-frontend-url

# Check container logs
docker-compose -f docker-compose.prod.acr.yml logs backend
docker-compose -f docker-compose.prod.acr.yml logs frontend

🔄 Updates Deployen

Wanneer je code pusht naar main:

  1. Pipeline bouwt automatisch nieuwe images
  2. Images worden gepusht naar ACR met nieuwe tag
  3. Pull nieuwe images:
    # VM met Docker Compose
    docker-compose -f docker-compose.prod.acr.yml pull
    docker-compose -f docker-compose.prod.acr.yml up -d
    
    # App Service (automatisch via Continuous Deployment)
    az webapp restart --name cmdb-backend-prod --resource-group rg-cmdb-gui
    

📝 Environment Variabelen Template

Maak .env.production aan:

# Backend
NODE_ENV=production
PORT=3001

# Jira
JIRA_BASE_URL=https://jira.zuyderland.nl
JIRA_SCHEMA_ID=your-schema-id
JIRA_PAT=your-pat-token
# OF OAuth
JIRA_OAUTH_CLIENT_ID=your-client-id
JIRA_OAUTH_CLIENT_SECRET=your-client-secret
JIRA_OAUTH_CALLBACK_URL=https://your-domain/api/auth/callback

# Session
SESSION_SECRET=$(openssl rand -hex 32)

# AI (Optioneel)
ANTHROPIC_API_KEY=your-key
OPENAI_API_KEY=your-key

# Database (als PostgreSQL)
DATABASE_URL=postgresql://user:pass@host:5432/db

# Frontend
VITE_API_URL=https://your-backend-url/api

⚠️ BELANGRIJK: Gebruik Azure Key Vault voor secrets in productie!


🎯 Volgende Stappen

  1. Kies deployment optie (App Service of VM)
  2. Configureer environment variabelen
  3. Deploy en test
  4. Configureer SSL/TLS
  5. Setup monitoring
  6. Documenteer voor team

📚 Meer Informatie

  • Volledige Deployment Guide: docs/DEPLOYMENT-NEXT-STEPS.md
  • Production Deployment: docs/PRODUCTION-DEPLOYMENT.md
  • Azure Deployment Summary: docs/AZURE-DEPLOYMENT-SUMMARY.md

Success Checklist

  • Images geverifieerd in ACR
  • Deployment optie gekozen
  • Environment variabelen geconfigureerd
  • Applicatie gedeployed
  • SSL/TLS geconfigureerd
  • Health checks werken
  • Monitoring ingesteld
  • Team geïnformeerd

Veel succes met de deployment! 🚀