CI/CD con Azure Pipelines para Angular: Una configuración práctica

# Illustrative azure-pipelines.yml: a generic starting point, not any employer's pipeline
trigger:
  branches:
    include:
      - main
      - develop

pool:
  vmImage: 'ubuntu-latest'

variables:
  nodeVersion: '20.x'
  npmCacheDir: $(Pipeline.Workspace)/.npm
  buildEnvironment: 'production'  # or 'staging'; must match a configuration in angular.json
  sonarConnection: 'sonarqube-service-connection'
  azureConnection: 'azure-service-connection'
  webAppName: 'my-angular-app-prod'

stages:
  - stage: Lint
    jobs:
      - job: LintJob
        steps:
          - task: NodeTool@0
            inputs:
              versionSpec: $(nodeVersion)
          - task: Cache@2
            inputs:
              key: 'npm | "$(Agent.OS)" | package-lock.json'
              restoreKeys: 'npm | "$(Agent.OS)"'
              path: $(npmCacheDir)
          - script: npm ci --cache $(npmCacheDir)
            displayName: 'Install dependencies'
          - script: npm run lint
            displayName: 'Run ESLint'

  - stage: Test
    dependsOn: Lint
    jobs:
      - job: TestJob
        steps:
          - task: NodeTool@0
            inputs:
              versionSpec: $(nodeVersion)
          - task: Cache@2
            inputs:
              key: 'npm | "$(Agent.OS)" | package-lock.json'
              restoreKeys: 'npm | "$(Agent.OS)"'
              path: $(npmCacheDir)
          - script: npm ci --cache $(npmCacheDir)
          # Task major versions track the SonarQube extension installed in your org. Check its
          # marketplace page before copying the @N suffixes.
          - task: SonarQubePrepare@6
            displayName: 'Prepare SonarQube analysis'
            inputs:
              SonarQube: $(sonarConnection)
              scannerMode: 'CLI'
              configMode: 'manual'
              cliProjectKey: 'my-angular-app'
              cliSources: 'src'
              extraProperties: |
                sonar.javascript.lcov.reportPaths=coverage/lcov.info
                sonar.qualitygate.wait=true
          - script: npm test -- --ci --coverage
            displayName: 'Run unit tests'
          # Jest writes these files only if 'cobertura' and 'lcov' are in its coverageReporters
          - task: PublishCodeCoverageResults@2
            inputs:
              summaryFileLocation: '$(System.DefaultWorkingDirectory)/coverage/**/cobertura-coverage.xml'
          - task: SonarQubeAnalyze@6
            displayName: 'Run SonarQube analysis'
          # This is the step that turns a red quality gate into a failed pipeline on Azure DevOps
          - task: SonarQubePublish@6
            displayName: 'Publish Quality Gate Result'
            inputs:
              pollingTimeoutSec: '300'

  - stage: Build
    dependsOn: Test
    jobs:
      - job: BuildJob
        steps:
          - task: NodeTool@0
            inputs:
              versionSpec: $(nodeVersion)
          - task: Cache@2
            inputs:
              key: 'npm | "$(Agent.OS)" | package-lock.json'
              restoreKeys: 'npm | "$(Agent.OS)"'
              path: $(npmCacheDir)
          - script: npm ci --cache $(npmCacheDir)
          - script: npm run build -- --configuration=$(buildEnvironment)
            displayName: 'Build Angular app'
          - task: PublishPipelineArtifact@1
            inputs:
              targetPath: dist
              artifact: angular-dist

  - stage: Deploy
    dependsOn: Build
    condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/main'))
    jobs:
      # A deployment job, not a plain job: the environment is what carries the approval
      - deployment: DeployProduction
        # Approvals and checks are configured on the environment in Azure DevOps, not in this file
        environment: 'production'
        strategy:
          runOnce:
            deploy:
              steps:
                - download: current
                  artifact: angular-dist
                - task: AzureWebApp@1
                  displayName: 'Deploy to App Service'
                  inputs:
                    azureSubscription: $(azureConnection)
                    appType: 'webAppLinux'
                    appName: $(webAppName)
                    # The application builder writes dist/<project>/browser
                    package: '$(Pipeline.Workspace)/angular-dist/my-angular-app/browser'

{
  "configurations": {
    "staging": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.staging.ts"
        }
      ],
      "optimization": true,
      "sourceMap": false
    },
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "optimization": true,
      "sourceMap": false,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "500kb",
          "maximumError": "1mb"
        }
      ]
    }
  }
}