bert.hausmans/cmdb-insight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6bb5907bbd541313e82b272911904648e0141a05
cmdb-insight/docs/AZURE-APP-SERVICE-DEPLOYMENT.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.2 KiB
Raw Blame History

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

az group create \
  --name rg-cmdb-gui-prod \
  --location westeurope

Stap 2: App Service Plan

az appservice plan create \
  --name plan-cmdb-gui-prod \
  --resource-group rg-cmdb-gui-prod \
  --sku B1 \
  --is-linux

Stap 3: Web Apps

# 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

# 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 <acr-resource-group> 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

# 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

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

# 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

az keyvault create \
  --name kv-cmdb-gui-prod \
  --resource-group rg-cmdb-gui-prod \
  --location westeurope \
  --sku standard

Stap 2: Secrets Toevoegen

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

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

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

# 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)

# 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)

# 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

# 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

az webapp show --name cmdb-backend-prod --resource-group rg-cmdb-gui-prod --query state

Restart App

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! 🚀

Reference in New Issue View Git Blame Copy Permalink