Angular 项目 - Azure DevOps - 3 个环境文件。在 yaml 文件中，我在哪里放置指定要使用哪个环境文件的变量？

Question

Angular 12 我有3个环境文件 environment.dev.ts environment.prod.ts environment.ts

我的 yaml 文件中有 2 个作业。 Build_Dev 和 Build_Prod

这是我的 yaml 文件：

蔚蓝-pipelines.yml

name: $(date:yyyyMMdd)$(rev:.r)

trigger:
  - master

variables:
  baseHref: ""
  environmentName: "dev"
  prodEnvironmentName: "prod"
  nodeVersion: 12.14

jobs:
  - job: Build_Dev
    steps:
      parameters:
        environmentName: 'dev'
      - task: NodeTool@0
        displayName: "Use Node Version"
        inputs:
          versionSpec: ${{variables.nodeVersion}}
      - task: Npm@1
        displayName: "npm install"
        inputs:
          verbose: false
      - task: Npm@1
        displayName: "npm run build"
        condition: and(succeeded(), eq('${{variables.baseHref}}', ''))
        inputs:
          command: custom
          verbose: false
          customCommand: "run build -- --output-path=dist/${{variables.environmentName}} --verbose"
      - task: ArchiveFiles@2
        displayName: "Archive dist folder"
        inputs:
          rootFolderOrFile: dist/${{variables.environmentName}}
          includeRootFolder: false
          archiveFile: "$(Build.ArtifactStagingDirectory)/${{variables.environmentName}}/$(Build.BuildId).zip"
      - task: PublishBuildArtifacts@1
        displayName: "Publish Artifact"
        inputs:
          PathtoPublish: "$(Build.ArtifactStagingDirectory)/${{variables.environmentName}}"
          ArtifactName: ${{variables.environmentName}}
  - job: Build_Prod
    steps:
      - task: NodeTool@0
        displayName: "Use Node Version"
        inputs:
          versionSpec: ${{variables.nodeVersion}}
      - task: Npm@1
        displayName: "npm install"
        inputs:
          verbose: false
      - task: Npm@1
        displayName: "npm run build"
        condition: and(succeeded(), eq('${{variables.baseHref}}', ''))
        inputs:
          command: custom
          verbose: false
          customCommand: "run build -- --output-path=dist/${{variables.prodEnvironmentName}} --verbose"
      - task: ArchiveFiles@2
        displayName: "Archive dist folder"
        inputs:
          rootFolderOrFile: dist/${{variables.prodEnvironmentName}}
          includeRootFolder: false
          archiveFile: "$(Build.ArtifactStagingDirectory)/${{variables.prodEnvironmentName}}/$(Build.BuildId).zip"
      - task: PublishBuildArtifacts@1
        displayName: "Publish Artifact"
        inputs:
          PathtoPublish: "$(Build.ArtifactStagingDirectory)/${{variables.prodEnvironmentName}}"
          ArtifactName: ${{variables.prodEnvironmentName}}

两项工作 运行 都很好，除了它们都来自 environment.ts 文件之外。

我不知道在每个作业中的哪里添加参数来指定要使用哪个环境文件。

environment.ts

export const environment = {
  production: false,
  development: false,
...
}

environment.dev.ts

export const environment = {
  production: false,
  development: true,
...
}

environment.prod.ts

export const environment = {
  production: true,
  development: false,
...
}

Answer 1

解决您的问题-

Where do I put the variable that designates which environment file to use?

首先使用 stages 关键字将管道组织成多个阶段。多阶段管道是通过代码配置发布的新方法，它可以帮助您在逻辑上划分管道。

通常，您可以设置一个多阶段管道，其中包含应用程序的主要流程，例如“构建”、“测试”和“部署”。和发布管道一样，您也可以在同一个管道中为每个部署环境设置一个阶段。

stages:
- stage: Build
  jobs:
  - job: A1

- stage: Deploy_dev
  jobs:
  - job: B1
...
...

之后，在您的环境文件中添加替换令牌，我们可以在部署阶段使用这些文件将令牌替换为实际值。

// environment.prod.ts
export const environment = {
  production: true,
  auth: {
    clientID: '#{authClientID}#',
    domain: '#{authDomain}#',
  },
  apiEndpoint: '#{apiEndpoint}#',
};

并在组织级别安装 Replace Tokens 扩展需求以替换我们上面使用的令牌。

现在创建两个变量组来存储实际变量，这些变量将用于替换您的 Dev 和 Prod 的令牌。 转到管道的库部分并添加此变量组。然后最后添加替换令牌任务以将它们替换为实际值。

我建议阅读此 How to use Angular environment files in your Azure DevOps multi-stage yml release pipeline for detailed step by step procedure. And also check this similar thread 在堆栈溢出中引发的内容。