- 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
8.6 KiB
Azure DevOps Setup - Stap voor Stap Guide
Nu je code in Azure DevOps staat, volg deze stappen om Docker images automatisch te bouwen en naar Azure Container Registry te pushen.
📋 Stappenplan
Stap 1: Azure Container Registry Aanmaken
Als je nog geen Azure Container Registry hebt:
Optie A: Met Script (Aanbevolen) 🚀
# Run het script (interactief)
./scripts/create-acr.sh
# Of met custom parameters:
./scripts/create-acr.sh rg-cmdb-gui zuyderlandcmdbacr westeurope Basic
Het script doet automatisch:
- ✅ Checkt of je ingelogd bent bij Azure
- ✅ Maakt resource group aan (als nodig)
- ✅ Controleert of ACR naam beschikbaar is
- ✅ Maakt ACR aan met Basic SKU
- ✅ Toont credentials
- ✅ Test Docker login
Optie B: Via Azure CLI (Handmatig)
# Login bij Azure
az login
# Resource group aanmaken (als nog niet bestaat)
az group create --name rg-cmdb-gui --location westeurope
# Container Registry aanmaken
az acr create \
--resource-group rg-cmdb-gui \
--name zuyderlandcmdbacr \
--sku Basic \
--admin-enabled true
Optie C: Via Azure Portal
- Ga naar Azure Portal
- Klik op "Create a resource"
- Zoek naar "Container Registry"
- Klik "Create"
- Vul in:
- Resource group: Kies bestaande of maak nieuwe (bijv.
rg-cmdb-gui) - Registry name: Bijv.
zuyderlandcmdbacr(moet uniek zijn, alleen kleine letters en cijfers) - Location:
West Europe(of gewenste regio) - SKU:
Basic(voor development/test) ofStandard(voor productie)
- Resource group: Kies bestaande of maak nieuwe (bijv.
- Klik "Review + create" → "Create"
Noteer je ACR naam! Je hebt deze nodig in de volgende stappen.
📚 Zie docs/AZURE-ACR-QUICKSTART.md voor een complete quick-start guide.
Stap 2: Service Connection Aanmaken in Azure DevOps
Deze connection geeft Azure DevOps toegang tot je Azure Container Registry.
- Ga naar je Azure DevOps project
- Klik op ⚙️ Project Settings (onderaan links)
- Ga naar Service connections (onder Pipelines)
- Klik op "New service connection"
- Kies "Docker Registry"
- Kies "Azure Container Registry"
- Vul in:
- Azure subscription: Selecteer je Azure subscription
- Azure container registry: Selecteer je ACR (bijv.
zuyderlandcmdbacr) - Service connection name: Bijv.
zuyderland-cmdb-acr-connection - Description: Optioneel
- Klik "Save"
✅ Noteer de service connection naam! Je hebt deze nodig voor de pipeline.
Stap 3: Pipeline Variabelen Aanpassen
Pas de azure-pipelines.yml aan naar jouw instellingen:
- Open
azure-pipelines.ymlin je repository - Pas de variabelen aan (regel 15-20):
variables:
# Pas deze aan naar jouw ACR naam
acrName: 'zuyderlandcmdbacr' # ← Jouw ACR naam hier
repositoryName: 'cmdb-insight'
# Pas deze aan naar de service connection naam die je net hebt gemaakt
dockerRegistryServiceConnection: 'zuyderland-cmdb-acr-connection' # ← Jouw service connection naam
imageTag: '$(Build.BuildId)'
- Commit en push de wijzigingen:
git add azure-pipelines.yml
git commit -m "Configure Azure DevOps pipeline"
git push origin main
Stap 4: Pipeline Aanmaken in Azure DevOps
- Ga naar je Azure DevOps project
- Klik op Pipelines (links in het menu)
- Klik op "New pipeline" of "Create Pipeline"
- Kies "Azure Repos Git" (of waar je code staat)
- Selecteer je repository: "CMDB Insight" (of jouw repo naam)
- Kies "Existing Azure Pipelines YAML file"
- Selecteer:
- Branch:
main - Path:
/azure-pipelines.yml
- Branch:
- Klik "Continue"
- Review de pipeline configuratie
- Klik "Run" om de pipeline te starten
Stap 5: Pipeline Uitvoeren
De pipeline start automatisch en zal:
- ✅ Code uitchecken
- ✅ Backend Docker image bouwen
- ✅ Frontend Docker image bouwen
- ✅ Images naar Azure Container Registry pushen
Je kunt de voortgang volgen:
- Klik op de running pipeline
- Bekijk de logs per stap
- Bij success zie je de image URLs
Verwachte output:
Backend Image: zuyderlandcmdbacr.azurecr.io/cmdb-insight/backend:123
Frontend Image: zuyderlandcmdbacr.azurecr.io/cmdb-insight/frontend:123
Stap 6: Images Verifiëren
In Azure Portal:
- Ga naar je Container Registry (
zuyderlandcmdbacr) - Klik op "Repositories"
- Je zou moeten zien:
cmdb-insight/backendcmdb-insight/frontend
- Klik op een repository om de tags te zien (bijv.
latest,123)
Via Azure CLI:
# Lijst repositories
az acr repository list --name zuyderlandcmdbacr
# Lijst tags voor backend
az acr repository show-tags --name zuyderlandcmdbacr --repository cmdb-insight/backend
# Lijst tags voor frontend
az acr repository show-tags --name zuyderlandcmdbacr --repository cmdb-insight/frontend
🚀 Automatische Triggers
De pipeline triggert automatisch bij:
- Push naar
mainbranch → Bouwtlatesttag - Git tags die beginnen met
v*→ Bouwt versie tag (bijv.v1.0.0)
Voorbeeld:
# Tag aanmaken en pushen
git tag v1.0.0
git push origin v1.0.0
# → Pipeline triggert automatisch en bouwt versie 1.0.0
🔧 Troubleshooting
Pipeline Fails: "Service connection not found"
Oplossing:
- Controleer of de service connection naam in
azure-pipelines.ymlovereenkomt met de naam in Azure DevOps - Ga naar Project Settings → Service connections en verifieer de naam
Pipeline Fails: "ACR not found"
Oplossing:
- Controleer of de
acrNamevariabele correct is inazure-pipelines.yml - Verifieer dat de ACR bestaat:
az acr list
Pipeline Fails: "Permission denied"
Oplossing:
- Controleer of de service connection de juiste permissions heeft
- Verifieer dat je Azure subscription toegang heeft tot de ACR
- Probeer de service connection opnieuw aan te maken
Images worden niet gepusht
Oplossing:
- Check de pipeline logs voor specifieke errors
- Verifieer dat de Docker build succesvol is
- Controleer of de ACR admin-enabled is (voor development)
📦 Volgende Stappen: Deployment
Nu je images in Azure Container Registry staan, kun je ze deployen:
Optie 1: Azure App Service
# Web App aanmaken en configureren
az webapp create --name cmdb-backend --resource-group rg-cmdb-gui --plan plan-cmdb-gui
az webapp config container set --name cmdb-backend --resource-group rg-cmdb-gui \
--docker-custom-image-name zuyderlandcmdbacr.azurecr.io/cmdb-insight/backend:latest \
--docker-registry-server-url https://zuyderlandcmdbacr.azurecr.io
Optie 2: Docker Compose op VM
# Login bij ACR
az acr login --name zuyderlandcmdbacr
# Pull images
docker-compose -f docker-compose.prod.acr.yml pull
# Deploy
docker-compose -f docker-compose.prod.acr.yml up -d
Optie 3: Azure Container Instances (ACI)
az container create \
--resource-group rg-cmdb-gui \
--name cmdb-backend \
--image zuyderlandcmdbacr.azurecr.io/cmdb-insight/backend:latest \
--registry-login-server zuyderlandcmdbacr.azurecr.io \
--registry-username <acr-username> \
--registry-password <acr-password>
📝 Checklist
- Azure Container Registry aangemaakt
- Service Connection geconfigureerd in Azure DevOps
azure-pipelines.ymlvariabelen aangepast- Pipeline aangemaakt en gerund
- Images succesvol gebouwd en gepusht
- Images geverifieerd in Azure Portal
- Automatische triggers getest (push naar main)
🎯 Quick Reference
ACR Login:
az acr login --name zuyderlandcmdbacr
Images Lijsten:
az acr repository list --name zuyderlandcmdbacr
az acr repository show-tags --name zuyderlandcmdbacr --repository cmdb-insight/backend
Pipeline Handmatig Triggeren:
- Ga naar Pipelines → Selecteer pipeline → "Run pipeline"
Pipeline Logs Bekijken:
- Ga naar Pipelines → Selecteer pipeline → Klik op de run → Bekijk logs per stap
📚 Meer Informatie
💡 Tips
- Gebruik versie tags voor productie: Tag releases met
v1.0.0,v1.0.1, etc. - Monitor pipeline costs: Azure DevOps geeft gratis build minuten per maand
- Enable retention policies: Configureer ACR om oude images automatisch te verwijderen
- Use build caching: Voor snellere builds bij volgende runs
- Set up notifications: Configureer email/Slack notificaties voor pipeline status