- 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
9.4 KiB
Next Steps - ACR Created! 🎉
Je Azure Container Registry is aangemaakt! Volg deze stappen om Docker images automatisch te bouwen en te pushen.
📋 Checklist
- Stap 1: Verifieer ACR naam
- Stap 2: Update pipeline variabelen (als nodig)
- Stap 3: Service Connection aanmaken in Azure DevOps
- Stap 4: Pipeline aanmaken en runnen
- Stap 5: Verifieer images in ACR
🔍 Stap 1: Verifieer ACR Naam
Vind je ACR naam:
Via Azure Portal:
- Ga naar je Container Registry
- Klik op "Overview"
- Noteer de "Login server" (bijv.
zuyderlandcmdbacr.azurecr.io) - De naam vóór
.azurecr.iois je ACR naam (bijv.zuyderlandcmdbacr)
Via Azure CLI:
az acr list --query "[].{Name:name, LoginServer:loginServer}" -o table
Noteer je ACR naam! (bijv. zuyderlandcmdbacr)
🔧 Stap 2: Update Pipeline Variabelen
Check of azure-pipelines.yml de juiste ACR naam heeft:
-
Open
azure-pipelines.yml -
Controleer regel 17:
acrName: 'zuyderlandcmdbacr' # ← Pas aan naar jouw ACR naam -
Als je ACR naam anders is, pas het aan:
acrName: 'jouw-acr-naam-hier' -
Commit en push (als je het hebt aangepast):
git add azure-pipelines.yml git commit -m "Update ACR name in pipeline" git push origin main
✅ Als de naam al klopt, ga door naar Stap 3!
🔗 Stap 3: Service Connection Aanmaken in Azure DevOps
Deze connection geeft Azure DevOps toegang tot je ACR.
Stappen:
-
Ga naar je Azure DevOps project
- Open je project in Azure DevOps
-
Ga naar Project Settings
- Klik op ⚙️ Project Settings (onderaan links in het menu)
-
Open Service Connections
- Scroll naar "Pipelines" sectie
- Klik op "Service connections"
-
Maak nieuwe connection
- Klik op "New service connection" (of "Create service connection")
- Kies "Docker Registry"
- Klik "Next"
-
Selecteer Azure Container Registry
- Kies "Azure Container Registry"
- Klik "Next"
-
Configureer connection
- Authentication type: Kies "Service Principal" ⭐ (aanbevolen)
- Dit is de standaard en meest betrouwbare optie
- Azure DevOps maakt automatisch een Service Principal aan
- Azure subscription: Selecteer je Azure subscription
- Azure container registry: Selecteer je ACR uit de dropdown (bijv.
zdlas) - Service connection name:
zuyderland-cmdb-acr-connection- ⚠️ Belangrijk: Deze naam moet overeenkomen met
dockerRegistryServiceConnectioninazure-pipelines.yml!
- ⚠️ Belangrijk: Deze naam moet overeenkomen met
- Description: Optioneel (bijv. "ACR for CMDB GUI production")
- Authentication type: Kies "Service Principal" ⭐ (aanbevolen)
-
Save
- Klik "Save" (of "Verify and save")
- Azure DevOps test automatisch de connection
- Azure DevOps maakt automatisch een Service Principal aan met de juiste permissions
💡 Waarom Service Principal?
- ✅ Werkt perfect met Azure DevOps Services (cloud)
- ✅ Eenvoudig - Azure DevOps doet alles automatisch
- ✅ Betrouwbaar - Meest ondersteunde optie
- ✅ Veilig - Credentials worden veilig beheerd
📚 Zie docs/AZURE-SERVICE-CONNECTION-AUTH.md voor details over alle authentication types.
✅ Service connection is aangemaakt!
Troubleshooting:
- "Loading Registries..." blijft hangen?
- ✅ Refresh de pagina (F5)
- ✅ Check of je de juiste subscription hebt geselecteerd
- ✅ Wacht 10-30 seconden (kan even duren)
- ✅ Workaround: Gebruik "Others" optie (zie hieronder)
- Als verificatie faalt, check of je toegang hebt tot de ACR in Azure Portal
🔧 Workaround: Als dropdown niet werkt, gebruik "Others" optie:
- Kies "Docker Registry" → "Others" (in plaats van "Azure Container Registry")
- Vul handmatig in:
- Docker Registry:
zdlas.azurecr.io - Docker ID: (haal op met
az acr credential show --name zdlas) - Docker Password: (haal op met
az acr credential show --name zdlas)
- Docker Registry:
- Service connection name:
zuyderland-cmdb-acr-connection - Save
Haal credentials op:
az login
az acr credential show --name zdlas
# Gebruik "username" en "passwords[0].value"
📚 Zie docs/AZURE-SERVICE-CONNECTION-TROUBLESHOOTING.md voor uitgebreide troubleshooting.
🎯 Stap 4: Pipeline Aanmaken en Run
Stappen:
-
Ga naar Pipelines
- Klik op "Pipelines" (links in het menu)
-
Create New Pipeline
- Klik op "New pipeline" of "Create Pipeline"
-
Selecteer Repository
- Kies "Azure Repos Git" (of waar je code staat)
- Selecteer je repository: "CMDB Insight" (of jouw repo naam)
-
Kies YAML File
- Kies "Existing Azure Pipelines YAML file"
- Selecteer:
- Branch:
main(of jouw default branch) - Path:
/azure-pipelines.yml
- Branch:
-
Review Configuration
- Azure DevOps toont de pipeline configuratie
- Controleer of alles klopt
-
Run Pipeline
- Klik "Run" om de pipeline te starten
- De pipeline start automatisch met het bouwen van de images
✅ Pipeline is gestart!
Wat gebeurt er nu?
De pipeline zal:
- ✅ Code uitchecken
- ✅ Backend Docker image bouwen
- ✅ Frontend Docker image bouwen
- ✅ Images naar Azure Container Registry pushen
Verwachte tijd: ~5-10 minuten (afhankelijk van build tijd)
✅ Stap 5: Verifieer Images in ACR
In Azure Portal:
-
Ga naar je Container Registry
- Open Azure Portal
- Ga naar je Container Registry (
zuyderlandcmdbacr)
-
Bekijk Repositories
- Klik op "Repositories" (links in het menu)
- Je zou moeten zien:
cmdb-insight/backendcmdb-insight/frontend
-
Bekijk Tags
- Klik op een repository (bijv.
cmdb-insight/backend) - Je zou tags moeten zien:
latest123(of build ID nummer)
- Klik op een repository (bijv.
✅ Images zijn succesvol gebouwd en gepusht!
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 --orderby time_desc
# Lijst tags voor frontend
az acr repository show-tags --name zuyderlandcmdbacr --repository cmdb-insight/frontend --orderby time_desc
In Azure DevOps:
-
Ga naar je Pipeline
- Klik op "Pipelines"
- Klik op je pipeline run
-
Bekijk Logs
- Klik op een job (bijv. "Build Docker Images")
- Bekijk de logs per stap
- Bij success zie je:
Backend Image: zuyderlandcmdbacr.azurecr.io/cmdb-insight/backend:123 Frontend Image: zuyderlandcmdbacr.azurecr.io/cmdb-insight/frontend:123
🚨 Troubleshooting
Pipeline Fails: "Service connection not found"
Oplossing:
- Controleer of de service connection naam in
azure-pipelines.yml(regel 19) overeenkomt met de naam in Azure DevOps - Ga naar Project Settings → Service connections en verifieer de naam
- Pas
dockerRegistryServiceConnectionaan inazure-pipelines.ymlals nodig
Pipeline Fails: "ACR not found"
Oplossing:
- Controleer of de
acrNamevariabele correct is inazure-pipelines.yml(regel 17) - Verifieer dat de ACR bestaat:
az acr list - Check of je de juiste subscription hebt geselecteerd in de service connection
Pipeline Fails: "Permission denied"
Oplossing:
- Controleer of de service connection de juiste permissions heeft
- Verifieer dat je Azure subscription toegang heeft tot de ACR
- Check of de service connection is geverifieerd (groen vinkje in Azure DevOps)
- 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)
- Check of de service connection correct is geconfigureerd
Build Fails: "Dockerfile not found"
Oplossing:
- Verifieer dat
backend/Dockerfile.prodenfrontend/Dockerfile.prodbestaan - Check of de paths correct zijn in
azure-pipelines.yml - Controleer of de files zijn gecommit en gepusht naar de repository
🎉 Success!
Als alles goed is gegaan, heb je nu:
- ✅ Azure Container Registry aangemaakt
- ✅ Service Connection geconfigureerd
- ✅ Pipeline aangemaakt en gerund
- ✅ Docker images gebouwd en gepusht naar ACR
Je images zijn nu beschikbaar op:
- Backend:
zuyderlandcmdbacr.azurecr.io/cmdb-insight/backend:latest - Frontend:
zuyderlandcmdbacr.azurecr.io/cmdb-insight/frontend:latest
🚀 Volgende Stappen
Nu je images in ACR staan, kun je ze deployen naar:
- Azure Container Instances (ACI) - Eenvoudig, snel
- Azure App Service (Container) - Managed service
- Azure Kubernetes Service (AKS) - Voor complexere setups
- VM met Docker Compose - Volledige controle
Zie docs/AZURE-DEPLOYMENT-SUMMARY.md voor deployment opties.
📚 Meer Informatie
- Quick Start Guide:
docs/AZURE-ACR-QUICKSTART.md - Azure DevOps Setup:
docs/AZURE-DEVOPS-SETUP.md - Container Registry Guide:
docs/AZURE-CONTAINER-REGISTRY.md - Deployment Options:
docs/AZURE-DEPLOYMENT-SUMMARY.md
💡 Tips
- Automatische Triggers: De pipeline triggert automatisch bij elke push naar
mainbranch - Version Tags: Gebruik git tags (bijv.
v1.0.0) voor versie-specifieke builds - Monitor Costs: Check Azure Portal regelmatig voor storage gebruik
- Cleanup: Overweeg oude images te verwijderen om kosten te besparen
Veel succes! 🚀