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

# 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;"]

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)

# 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