在 Azure devops (angular+api) 中交换插槽，如何更改目标插槽的 Angular 配置？

Question

Angular 应用程序的配置是具有挑战性的部分。在 Azure Yaml 管道中发布作业期间，我们执行“令牌”替换以匹配令牌化工件上此配置的目标环境。

稍后我们将此标记化工件（标记已被替换）部署到特定环境：

    - task: AzureWebApp@1
      inputs:
        azureSubscription: 'xxxx'
        appType: 'webApp'
        appName: [depends on $(environment)]
        package: '$(Pipeline.Workspace)/xxx'

这样，我们就可以对 DEV、TEST 和 STAGING 进行特定配置（staging 是一个 Production 插槽）。

在某些时候，我们需要将 STAGING 换成 PROD。结果，我们在 PROD 中有 Angular 应用程序，但其值仍然用于 STAGING，这是不正确的，在这里我们无法确定要做什么。我想获得有关继续的好方法的建议。

一些想法：

在 STAGING 部署期间，还使用不同的名称（即 main.*.js.PROD）生成 PROD 文件。然后，在 PROD 交换之后，重命名文件，但是..
- 文件可能正在使用中，因此无法重命名。
- 在重命名期间增加了一点停机时间（我什至不确定是否有办法，对于 yaml，重命名已经部署的文件）。
触发deploy to PROD时，先用PROD变量部署到STAGING，然后执行swap，但是...
- 它的部署时间会更长，因为即使已经部署，也必须先部署 STAGING。
- 它很少利用插槽。
不要从 STAGING 切换并完全部署到 PROD，但是...
- 它将拥有最长的部署时间。
- 不会占用插槽的任何优势。

编辑：感谢@prawin 的建议，我再补充一个：

从服务器端动态提供配置
- 看起来很有前途，因为前端与服务器端共享一个主机。但是，如果与后端部分解耦呢？这意味着 后端 url 也需要根据环境 在某处进行配置。

经过一些阅读、尝试和错误，我还有一些:

使用 FTP 或 Kudu API
仅部署更改文件
生成并复制 PROD 配置到 STAGING，然后执行交换任务。 我真的很喜欢这个选项大多数。

还有什么要考虑的吗？执行此操作的“标准”方法是什么？

Answer 1

编辑（17/05/2022）：我保留原始提案作为参考（如下），但我必须警告，如果要替换文件，它将静默失败正在使用中。大多数时候都可能发生这种情况。

由于这个问题，我们改变了策略：

我们使用 STAGING 变量部署 STAGING 以进行适当的测试（自动化 E2E）。
对结果满意后，我们再次部署 STAGING，但使用 PROD 变量。我们称此作业步骤为：“PRE-PROD”。
当 PRE-PROD 准备就绪时，我们将 STAGING 切换为 PROD。

- stage: STAGING
  jobs:
    - template: release-to.yml
      parameters:
        environment: staging
        variables: staging

- stage: Release_PRE_PROD
  dependsOn: Release_STAGING
  jobs:
    - template: release-to.yml
      parameters:
        environment: staging
        variables: production

- stage: Swap_PROD
  dependsOn: Release_PRE_PROD
  #Your swap steps

在 release-to.yml 中，我们执行适当的变量加载和替换。

希望对您有所帮助！

17/05/2022之前仅供参考经过测试不同的方法，我们发现了以下方法：

在构建阶段生成一个 PROD 特定文件。该文件将作为单独的工件放置。这个想法是拥有“构建”和“PROD angular 配置”工件，例如：

      - publish: $(Build.artifactstagingdirectory)/Config
        displayName: 'Publish config'
        artifact: ConfigPROD

      - publish: $(Build.artifactstagingdirectory)/Build
        displayName: 'Publish build'
        artifact: BUILD

在 STAGING 中部署 BUILD 工件后，使用 FTP 下载 ConfigPROD 工件到 STAGING。这将覆盖现有的 (STAGING) 配置。

    - task: DownloadPipelineArtifact@2
      displayName: 'Download config artifact'
      inputs:
        buildType: 'specific'
        project: [your devops project name]
        definition: [your build definition name]
        artifactName: 'ConfigPROD'
        path: '$(Pipeline.Workspace)/config'

    - task: FtpUpload@2
      displayName: 'Deploy configPROD'
      inputs:
        credentialsOption: 'inputs'
        serverUrl: [your ftp server url]
        username: [your ftp username]
        password: [your ftp password]
        rootDirectory: '$(Pipeline.Workspace)/config'
        filePatterns: '**' 
        remoteDirectory: [your remote directory] 
        clean: false 
        cleanContents: false

将 STAGING 换成 PROD

    - task: AzureAppServiceManage@0
      displayName: 'Swap STAGING and PROD'
      inputs:
        azureSubscription: [your azure subscription]
        Action: 'Swap Slots'
        WebAppName: [your app name]
        ResourceGroupName: [your rg name]
        SourceSlot: 'staging'

如果您想知道如何在 Azure 中找到您的 ftp 凭据，路径如下： [AzurePortal]/[AppServicePage]/部署 Center/Deployment 凭据
[你的远程目录] 可以使用 Kudu 或“高级工具”中的控制台进行检查。在这种情况下，Angular wwwroot 位于 site/wwwroot 内，因此我的远程目录是 ' /site/wwwroot/wwwroot'

不是灵丹妙药，但 100% 工作并且绝对没有额外的停机时间。

感谢您的建议

在 Azure devops (angular+api) 中交换插槽，如何更改目标插槽的 Angular 配置？

Swap slots in Azure devops (angular+api), how to change Angular configuration for the target slot?

angular

azure

azure-devops

azure-pipelines-yaml