# Azure App Service Deployment - Stap-voor-Stap Guide 🚀 Complete deployment guide voor CMDB Insight naar Azure App Service. ## 📋 Prerequisites - Azure CLI geïnstalleerd en geconfigureerd (`az login`) - Docker images in ACR: `zdlas.azurecr.io/cmdb-insight/backend:latest` en `frontend:latest` - Azure DevOps pipeline werkt (images worden automatisch gebouwd) --- ## 🎯 Quick Start (15 minuten) ### Stap 1: Resource Group ```bash az group create \ --name rg-cmdb-gui-prod \ --location westeurope ``` ### Stap 2: App Service Plan ```bash az appservice plan create \ --name plan-cmdb-gui-prod \ --resource-group rg-cmdb-gui-prod \ --sku B1 \ --is-linux ``` ### Stap 3: Web Apps ```bash # Backend az webapp create \ --name cmdb-backend-prod \ --resource-group rg-cmdb-gui-prod \ --plan plan-cmdb-gui-prod \ --deployment-container-image-name zdlas.azurecr.io/cmdb-insight/backend:latest # Frontend az webapp create \ --name cmdb-frontend-prod \ --resource-group rg-cmdb-gui-prod \ --plan plan-cmdb-gui-prod \ --deployment-container-image-name zdlas.azurecr.io/cmdb-insight/frontend:latest ``` ### Stap 4: ACR Authentication ```bash # Enable Managed Identity az webapp identity assign --name cmdb-backend-prod --resource-group rg-cmdb-gui-prod az webapp identity assign --name cmdb-frontend-prod --resource-group rg-cmdb-gui-prod # Get Principal IDs BACKEND_PRINCIPAL_ID=$(az webapp identity show --name cmdb-backend-prod --resource-group rg-cmdb-gui-prod --query principalId -o tsv) FRONTEND_PRINCIPAL_ID=$(az webapp identity show --name cmdb-frontend-prod --resource-group rg-cmdb-gui-prod --query principalId -o tsv) # Get ACR Resource ID (vervang met jouw ACR resource group) ACR_ID=$(az acr show --name zdlas --query id -o tsv) # Grant AcrPull permissions az role assignment create --assignee $BACKEND_PRINCIPAL_ID --role AcrPull --scope $ACR_ID az role assignment create --assignee $FRONTEND_PRINCIPAL_ID --role AcrPull --scope $ACR_ID # Configure container settings az webapp config container set \ --name cmdb-backend-prod \ --resource-group rg-cmdb-gui-prod \ --docker-custom-image-name zdlas.azurecr.io/cmdb-insight/backend:latest \ --docker-registry-server-url https://zdlas.azurecr.io az webapp config container set \ --name cmdb-frontend-prod \ --resource-group rg-cmdb-gui-prod \ --docker-custom-image-name zdlas.azurecr.io/cmdb-insight/frontend:latest \ --docker-registry-server-url https://zdlas.azurecr.io ``` ### Stap 5: Environment Variabelen ```bash # Backend (vervang met jouw waarden) az webapp config appsettings set \ --name cmdb-backend-prod \ --resource-group rg-cmdb-gui-prod \ --settings \ NODE_ENV=production \ PORT=3001 \ JIRA_BASE_URL=https://jira.zuyderland.nl \ JIRA_SCHEMA_ID=your-schema-id \ JIRA_PAT=your-pat-token \ SESSION_SECRET=$(openssl rand -hex 32) \ FRONTEND_URL=https://cmdb-frontend-prod.azurewebsites.net # Frontend az webapp config appsettings set \ --name cmdb-frontend-prod \ --resource-group rg-cmdb-gui-prod \ --settings \ VITE_API_URL=https://cmdb-backend-prod.azurewebsites.net/api ``` ### Stap 6: Start Apps ```bash az webapp start --name cmdb-backend-prod --resource-group rg-cmdb-gui-prod az webapp start --name cmdb-frontend-prod --resource-group rg-cmdb-gui-prod ``` ### Stap 7: Test ```bash # Health check curl https://cmdb-backend-prod.azurewebsites.net/api/health # Frontend curl https://cmdb-frontend-prod.azurewebsites.net ``` **🎉 Je applicatie is nu live!** - Frontend: `https://cmdb-frontend-prod.azurewebsites.net` - Backend API: `https://cmdb-backend-prod.azurewebsites.net/api` --- ## 🔐 Azure Key Vault Setup (Aanbevolen) Voor productie: gebruik Azure Key Vault voor secrets. ### Stap 1: Key Vault Aanmaken ```bash az keyvault create \ --name kv-cmdb-gui-prod \ --resource-group rg-cmdb-gui-prod \ --location westeurope \ --sku standard ``` ### Stap 2: Secrets Toevoegen ```bash az keyvault secret set --vault-name kv-cmdb-gui-prod --name JiraPat --value "your-token" az keyvault secret set --vault-name kv-cmdb-gui-prod --name SessionSecret --value "$(openssl rand -hex 32)" az keyvault secret set --vault-name kv-cmdb-gui-prod --name JiraSchemaId --value "your-schema-id" ``` ### Stap 3: Grant Access ```bash az keyvault set-policy \ --name kv-cmdb-gui-prod \ --object-id $BACKEND_PRINCIPAL_ID \ --secret-permissions get list ``` ### Stap 4: Configure App Settings met Key Vault References ```bash az webapp config appsettings set \ --name cmdb-backend-prod \ --resource-group rg-cmdb-gui-prod \ --settings \ JIRA_PAT="@Microsoft.KeyVault(SecretUri=https://kv-cmdb-gui-prod.vault.azure.net/secrets/JiraPat/)" \ SESSION_SECRET="@Microsoft.KeyVault(SecretUri=https://kv-cmdb-gui-prod.vault.azure.net/secrets/SessionSecret/)" \ JIRA_SCHEMA_ID="@Microsoft.KeyVault(SecretUri=https://kv-cmdb-gui-prod.vault.azure.net/secrets/JiraSchemaId/)" ``` --- ## 📊 Monitoring Setup ### Application Insights ```bash # Create Application Insights az monitor app-insights component create \ --app cmdb-gui-prod \ --location westeurope \ --resource-group rg-cmdb-gui-prod \ --application-type web # Get Instrumentation Key INSTRUMENTATION_KEY=$(az monitor app-insights component show \ --app cmdb-gui-prod \ --resource-group rg-cmdb-gui-prod \ --query instrumentationKey -o tsv) # Configure App Settings az webapp config appsettings set \ --name cmdb-backend-prod \ --resource-group rg-cmdb-gui-prod \ --settings \ APPINSIGHTS_INSTRUMENTATIONKEY=$INSTRUMENTATION_KEY ``` --- ## 🔄 Updates Deployen ### Optie 1: Manual (Eenvoudig) ```bash # Restart Web Apps (pull nieuwe latest image) az webapp restart --name cmdb-backend-prod --resource-group rg-cmdb-gui-prod az webapp restart --name cmdb-frontend-prod --resource-group rg-cmdb-gui-prod ``` ### Optie 2: Deployment Slots (Zero-Downtime) ```bash # Create staging slot az webapp deployment slot create \ --name cmdb-backend-prod \ --resource-group rg-cmdb-gui-prod \ --slot staging # Deploy to staging az webapp deployment slot swap \ --name cmdb-backend-prod \ --resource-group rg-cmdb-gui-prod \ --slot staging \ --target-slot production ``` --- ## 🛠️ Troubleshooting ### Check Logs ```bash # Live logs az webapp log tail --name cmdb-backend-prod --resource-group rg-cmdb-gui-prod # Download logs az webapp log download --name cmdb-backend-prod --resource-group rg-cmdb-gui-prod --log-file logs.zip ``` ### Check Status ```bash az webapp show --name cmdb-backend-prod --resource-group rg-cmdb-gui-prod --query state ``` ### Restart App ```bash az webapp restart --name cmdb-backend-prod --resource-group rg-cmdb-gui-prod ``` --- ## 📚 Meer Informatie - **Deployment Advies**: `docs/DEPLOYMENT-ADVICE.md` - **Quick Deployment Guide**: `docs/QUICK-DEPLOYMENT-GUIDE.md` - **Production Deployment**: `docs/PRODUCTION-DEPLOYMENT.md` --- ## ✅ Checklist - [ ] Resource Group aangemaakt - [ ] App Service Plan aangemaakt - [ ] Web Apps aangemaakt - [ ] ACR authentication geconfigureerd - [ ] Environment variabelen ingesteld - [ ] Key Vault geconfigureerd (optioneel) - [ ] Application Insights ingeschakeld - [ ] Health checks werken - [ ] Team geïnformeerd **Veel succes! 🚀**