dev-resources.site

for different kinds of informations.

A Step-by-Step Guide to CI/CD Pipeline for Angular App with Azure Container Apps

Published at

12/10/2024

Prerequisites

Azure DevOps account
Azure Subscription
Angular project
Azure CLI installed
Docker installed
Azure Container Registry
Azure Container Apps environment

Step 1: Dockerfile

# Stage 1: Build Angular application
FROM node:16-alpine AS build
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build --configuration=production

# Stage 2: Serve with Nginx
FROM nginx:alpine
COPY --from=build /usr/src/app/dist/your-angular-app /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Step 2: Azure Pipelines Configuration

trigger:
  - main

variables:
  # Azure Container Registry details
  acrName: 'yourcontainerregistry'
  imageRepository: 'angular-app'
  dockerfilePath: 'Dockerfile'
  tag: '$(Build.BuildId)'

  # Azure Container Apps details
  containerAppName: 'your-container-app-name'
  resourceGroup: 'your-resource-group'

stages:
- stage: Build
  displayName: Build and Test
  jobs:
  - job: BuildAndTest
    pool:
      vmImage: 'ubuntu-latest'
    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '16.x'
      displayName: 'Install Node.js'

    - script: |
        npm ci
        npm run lint
        npm run test -- --watch=false --browsers=ChromeHeadless
      displayName: 'npm install, lint, and test'

    - task: Docker@2
      displayName: 'Build Docker Image'
      inputs:
        command: build
        repository: $(imageRepository)
        dockerfile: $(dockerfilePath)
        tags: 
          - $(tag)
          - latest

    - task: Docker@2
      displayName: 'Push to Azure Container Registry'
      inputs:
        command: push
        repository: $(imageRepository)
        containerRegistry: $(acrServiceConnection)
        tags: 
          - $(tag)
          - latest

- stage: Approval
  displayName: Deployment Approval
  jobs:
  - job: ApprovalJob
    pool: server
    steps:
    - task: ManualValidation@0
      inputs:
        instructions: 'Please review and approve the deployment'
        onTimeout: 'reject'
        timeoutInMinutes: 120

- stage: Deploy
  displayName: Deploy to Azure Container Apps
  dependsOn: 
    - Build
    - Approval
  condition: succeeded()
  jobs:
  - deployment: DeployToContainerApp
    pool: 
      vmImage: 'ubuntu-latest'
    environment: 'production'
    strategy:
      runOnce:
        deploy:
          steps:
          - task: AzureCLI@2
            displayName: 'Deploy to Azure Container Apps'
            inputs:
              azureSubscription: 'Your-Azure-Subscription'
              scriptType: 'bash'
              scriptLocation: 'inlineScript'
              inlineScript: |
                # Login to Azure Container Registry
                az acr login --name $(acrName)

                # Update Container App with new image
                az containerapp update \
                  --name $(containerAppName) \
                  --resource-group $(resourceGroup) \
                  --image $(acrName).azurecr.io/$(imageRepository):$(tag)

Step 3: Additional Azure CLI Configuration

Before running the pipeline, set up your Azure Container Apps:

# Create Container Registry
az acr create --resource-group your-resource-group \
              --name yourcontainerregistry \
              --sku Basic

# Create Container Apps Environment
az containerapp env create \
  --name your-container-app-environment \
  --resource-group your-resource-group \
  --location eastus

# Create Container App
az containerapp create \
  --name your-container-app-name \
  --resource-group your-resource-group \
  --environment your-container-app-environment \
  --image yourcontainerregistry.azurecr.io/angular-app:latest \
  --target-port 80 \
  --ingress external