部署后反应添加到dist文件夹中的读取文件

Question

背景：我有一个从Azure中的管道发布的React应用程序，在该管道中编译了React项目，并添加了一个额外的settings.json文件，其中包含密钥，这样我就可以通过管道（我从Azure门户的Key Vault获取密钥）。在发布后，我最终得到了这个：

所以问题是如何从dist文件夹中的文件导入值？以及如何添加在开发过程中可以使用的类似文件以及该文件应位于何处？我需要这些键来进行api调用，发布后，我需要从位于dist文件夹中已编译代码之外的新文件中获取值。请注意，对于管道，我不希望在开发和发布时在两个路径之间进行切换，而是需要一个适用于Booth文件的路径。

关键值可以在所有部署之间更改

Answer 1

如果我正确理解你的话。在Kudu api下面可能是您想要的。在Azure中成功发布应用程序后，可以访问https://yourappsitename.scm.azurewebsites.net来管理部署内容。

您还可以使用Kudu api在天蓝色中操纵应用程序的文件和文件夹。

下面的powershell脚本显示了如何以Azure方式获取应用程序文件。

$srcResGroupName = "Test"
$srcWebAppName = "tstest12"

# Get publishing profile for SOURCE application
$srcWebApp = Get-AzWebApp -Name $srcWebAppName -ResourceGroupName $srcResGroupName
[xml]$publishingProfile = Get-AzWebAppPublishingProfile -WebApp $srcWebApp
# Create Base64 authorization header
$username = $publishingProfile.publishData.publishProfile[0].userName
$password = $publishingProfile.publishData.publishProfile[0].userPWD

$base64AuthInfo = [Convert]::ToBase64String([Text.Encoding]::ASCII.GetBytes(("{0}:{1}" -f $username,$password)))

$apiBaseUrl = "https://$($srcWebApp.Name).scm.azurewebsites.net/api/vfs/site/wwwroot/settings.json"

# Download the settings.json file to ./settings.json

Invoke-RestMethod -Uri "$apiBaseUrl" `
                    -Headers @{UserAgent="powershell/1.0"; `
                     Authorization=("Basic {0}" -f $base64AuthInfo)} `
                    -Method GET `
                    -OutFile ./settings.json

以上脚本将从服务器下载settings.json文件，并将其保存到指定的位置。上面的脚本通过脚本获取用户名和密码，您还可以通过以下方法在发布配置文件中获取它们：转到应用程序服务上的“概述”刀片，单击刀片顶部的...更多，然后单击“获取发布配置文件

如果您在构建管道的powershell任务中运行以上脚本。您可以将文件保存到代理上的某个位置（找到路径及其到predefined variables的映射），并在以下任务中使用它。

下面是将文件添加到应用程序服务器的示例。它使用与上述脚本相同的授权。

$filePath = "c:\temp\settings.json";
$apiUrl = "https://$($srcWebApp.Name).scm.azurewebsites.net/api/vfs/site/wwwroot/settings1.json";
Invoke-RestMethod -Uri $apiUrl -Headers @{Authorization=("Basic {0}" -f $base64AuthInfo)} -UserAgent $userAgent -Method PUT -InFile $filePath -ContentType "application/json";

要进一步使用Kudu api，可以检查here。

Answer 2

我创建了一个文件，但是通过管道在dist文件夹中，该文件允许我从mysite.com/settings.json（包含我的密钥）中打开json文件

Web.config

<?xml version="1.0"?>

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
     </staticContent>
    </system.webServer>
</configuration> 

在dist文件夹中也有一个settings.json文件，该文件也是通过管道创建的。

所以现在我可以从api调用或添加了此代码的本地dev文件中获取文件

import * as Settings from '../../../settings.json'
...
@action initKeys = () => {
    if(window.location.origin.includes("localhost"))
        this.keys = new keyModel(Settings)        
    else //calling api mysite.com/settings.json to get the file
        new AzSearchService(this.keys).getSettingsFile().then((response: any) => runInAction(() => this.keys = new keyModel(response)))                       
}

所以最终结构如下：

Answer 3

您可以使用以下脚本在devOps管道中使用Azure Powershell进行此操作-

function Get-AzWebAppPublishingCredentials($resourceGroupName, $webAppName, $slotName = $null) {
    if ([string]::IsNullOrWhiteSpace($slotName) -or $slotName.ToLower() -eq "production") {
        $resourceType = "Microsoft.Web/sites/config"
        $resourceName = "$webAppName/publishingcredentials"
    }
    else {
        $resourceType = "Microsoft.Web/sites/slots/config"
        $resourceName = "$webAppName/$slotName/publishingcredentials"
    }
    $publishingCredentials = Invoke-AzResourceAction -ResourceGroupName $resourceGroupName -ResourceType $resourceType -ResourceName $resourceName -Action list -ApiVersion 2015-08-01 -Force
    return $publishingCredentials
}

function Get-KuduApiAuthorisationHeaderValue($resourceGroupName, $webAppName, $slotName = $null) {
    $publishingCredentials = Get-AzWebAppPublishingCredentials $resourceGroupName $webAppName $slotName
    $ret = @{ }
    $ret.header = ("Basic {0}" -f [Convert]::ToBase64String([Text.Encoding]::ASCII.GetBytes(("{0}:{1}" -f $publishingCredentials.Properties.PublishingUserName, $publishingCredentials.Properties.PublishingPassword))))
    $ret.url = $publishingCredentials.Properties.scmUri
    return $ret
}

function Get-FileFromWebApp($resourceGroupName, $webAppName, $slotName = "", $kuduPath) {
    $KuduAuth = Get-KuduApiAuthorisationHeaderValue $resourceGroupName $webAppName $slotName
    $kuduApiAuthorisationToken = $KuduAuth.header
    $kuduApiUrl = $KuduAuth.url + "/api/vfs/$kuduPath"

    Write-Host " Downloading File from WebApp. Source: '$kuduApiUrl'." -ForegroundColor DarkGray
    $tmpPath = "$($env:TEMP)\$([guid]::NewGuid()).json"
    $null = Invoke-RestMethod -Uri $kuduApiUrl `
        -Headers @{"Authorization" = $kuduApiAuthorisationToken; "If-Match" = "*" } `
        -Method GET `
        -ContentType "application/json" `
        -OutFile $tmpPath
    $ret = (Get-Content $tmpPath) | Out-String | ConvertFrom-Json
    Remove-Item $tmpPath -Force
    return $ret
}

$jsonFile=Get-FileFromWebApp "<resource group name>" "<web app name>" "" "site/wwwroot/<path to json file>"
$value = $jsonFile.value
Write-Host "The value from file is ::" $value