在 Azure Web App/内置 Azure DevOps 中配置 javascript 设置答案

【问题标题】：Configuring settings in javascript in Azure Web App / built in Azure DevOps在 Azure Web App/内置 Azure DevOps 中配置 javascript 设置
【发布时间】：2020-10-22 10:54:27
【问题描述】：

假设我有一个 js (plain, vanilla non-node js) 文件，它在顶部包含这样的设置：

const API_ENDPOINT = 'https://somedomain-dev.azurewebsites.net/api/v1/';

在生产中运行时，我需要这个值：

const API_ENDPOINT = 'https://somedomain-prod.azurewebsites.net/api/v1/';

我可以想到两种方法，但不知道它们中的任何一种是否可行以及如何：

在 Azure Web 应用程序中进行配置 => 配置。这将是最好的，因为所有配置都是集中的。
在 Azure Devops 的构建/发布过程中转换文件。（不知道如何）

有什么方法可以做到这一点？

【问题讨论】：

请检查以下几个答案是否可以解决您的问题，如果可以，您可以接受它作为this之类的答案。

标签： javascript azure-devops azure-web-app-service

【解决方案1】：

在 Azure Devops 的构建/发布过程中转换文件。

您可以使用PowerShell scripts 更改文件。请在您的构建或发布管道中添加 PowerShell 任务。这是我的示例：

- task: PowerShell@2
  inputs:
    targetType: 'inline'
    script: |
      $filePath = 'test.js'
      $tempFilePath = "test1.js"
      $find = 'https://somedomain-dev.azurewebsites.net/api/v1/'
      $replace = 'https://somedomain-prod.azurewebsites.net/api/v1/'
      
      (Get-Content -Path $filePath) -replace $find, $replace | Add-Content -Path $tempFilePath
      
      Remove-Item -Path $filePath
      Move-Item -Path $tempFilePath -Destination $filePath

您也可以尝试使用市场中的扩展程序，例如“文件创建器”。它可以创建一个新文件并替换旧文件。

【讨论】：

【解决方案2】：

我们个人使用这样的东西： https://marketplace.visualstudio.com/items?itemName=qetza.replacetokens

然后您将标记值：

const API_ENDPOINT = '#{API_ENDPOINT}#';

并在部署前使用 AzureDevops 中的任务：

#YAML file
- task: a8515ec8-7254-4ffd-912c-86772e2b5962@3
  displayName: 'Replace Tokens in ARM parameters'
  inputs:
    rootDirectory: '$(Pipeline.Workspace)/drop'
    targetFiles: '**/fileToReplace.json'
    encoding: 'auto'
    writeBOM: true
    keepToken: false
    tokenPrefix: '#{'
    tokenSuffix: '}#'
    enableTelemetry: false
    actionOnMissing: 'continue'
    verbosity: detailed

您需要将变量导入管道。有多种方法可以做到这一点，具体取决于您使用的是经典管道还是 yaml。例如，如果您的测试和生产环境有单独的 Key Vault，则可以将这些值存储在那里并使用：

#YAML file
- task: AzureKeyVault@1
  displayName: Get KeyVault variables
  inputs:
    azureSubscription: '${{ parameters.KV_APP_NAME }}'
    KeyVaultName: '$(vg.keyVaultName)'

此任务将 KV 中的值作为变量读取到管道中，然后您可以在部署中使用这些变量。在您的情况下，您将有一个名为 Test/Dev 的阶段，并且在那里有 KV 读取任务以及 Prod 中的相同任务以从具有其他值的不同 KV 读取。您还可以使用 Azure DevOps 库或在每个阶段最常声明的经典管道环境变量中。

上述两个任务也可以在经典管道中使用。

总体而言，要使其工作，您应该以某种方式设计部署管道，即每个环境都有自己的阶段，并且可以像这样替换每个环境的配置值：

Documentation for classic pipelines:

Documentation for yaml pipelines variables

【讨论】：