json - 部署后反应在 dist 文件夹中添加的读取文件

Question

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

所以问题是如何从位于 dist 文件夹中的文件中导入值？以及如何添加我可以在开发时使用的类似文件，它应该放在哪里？我需要这些用于 api 调用的密钥，并且在发布后，我需要从位于 dist 文件夹中已编译代码之外的新文件中获取值。请注意，对于管道，我不希望在开发和发布时有两条路径在我之间切换，我需要一个适用于展位文件的路径。

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

标签： jsonreactjsazure-pipelines

Answer 1

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

网页配置

<?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)))                       
}

所以最终的结构是这样的：