我正在尝试为应该非常简单的问题找到一种优雅的解决方案。我正在使用create-react-app开发一个React应用，并且正在尝试找到一种使用Azure DevOps将代码部署到Azure中的不同环境时替换变量（例如API地址）的简便方法。
到目前为止，我一直在使用.env和.env.production文件来存储变量，只要我们只有一个环境，它们就可以很好地工作。但是当我计划总共拥有三个环境（测试，质量保证和生产）时，我必须找到一个更好的解决方案。
一种方法是在CI构建的npm构建阶段替换变量。这种方法可行，但是我们对在每个环境中创建一个构建不感兴趣。
我试图在Azure中使用应用程序设置，并创建自己的环境变量，但是使用React代码中的process.env根本无法使用这些变量。
是否存在一种在发布到Azure时轻松注入这些变量的方法？或者，我们可以以某种方式在Azure中配置这些吗？ 还是有其他解决方案？
答案 0 :(得分：1)
使用react，vue，angular或其他基于JavaScript的框架开发的复杂应用程序与后端应用程序（java，nodejs，python等）具有相同的问题或要求：如何读取配置？
在这里，我将列出一些用于javascritpt框架配置的方法，从简单到有人为解决方案。其中一些用于后端应用程序。
我们在讨论javascript框架时，只需在应用程序启动时创建全局变量，即可在所有脚本中使用它：
<html>
<header>
<meta charset="utf-8">
<title>This is title</title>
<script>
var myVar = "global value"; // Declare a global variable
</script>
<script>
console.log("from another script:"+myVar);
</script>
</header>
<body>
Hello world
</body>
</html>
当然，源代码中的URL编码不是一个选项，但是请理解，这是下一种方法的切入点。几乎所有人都基于这种方法或做类似的事情。
Webpack为我们提供了多种机制，例如 DefinePlugin
new webpack.DefinePlugin({
API_BASE_URL: JSON.stringify(process.env.API_BASE_URL)
})
DefinePlugin 是直接文本替换。 Webpack将查找标识符并将其替换为给定的字符串。以下示例说明了其工作原理。
您可以像使用全局变量一样使用此变量：
$.ajax({
type: "GET",
url: API_BASE_URL+'/odds?date=2019-01-19',
dataType: 'json',
success: function (data) {
...
}
});
}
更多webpack机制：https://stackoverflow.com/a/40416826/3957754
优势： -设置或定义多个变量并在整个应用程序中使用它们的简单方法。 -使用类似jenkins的C.I服务器，您可以设置所有配置并构建工件，然后进行部署：
export API_BASE_URL=http://awesome.api.com
export ENDPOINT_DETAIL=/detail
export ENDPOINT_FAVOURITE=/favourite
export MODULES=user,guest,admin,configure
npm run build
缺点
检查此答案：
主要思想是将所有配置，设置或属性放在一个站点中，并且所有应用程序都必须以安全的方式检索此值。如今，从最终应用程序检索此配置的最常用技术是对平台发布的api rest执行http请求。
这种平台是微服务架构的完美合作伙伴。我也可以将其用于微前端。
以下是一些平台：
您可以将这些平台之一与webpack方法结合使用。因此，代替手动导出环境变量，您可以在构建阶段在webpack或像jenkins这样的C.I服务器上使用api rest。
优势
缺点
假设您的网站位于http://myapp.com，则可以发布另一个端点，例如http://myapp.com/settings。该终结点将使用 AJAX 返回您在客户端> 上的Microfrontend或Web应用程序所需的所有设置。
在您的javascript应用程序中，入口点（通常是React，Vue等中的App.js），是指在渲染机制之前，您可以消耗http://myapp.com/settings并公开为全局vars到您的应用程序。您也可以将其保存在localStorage，sessionStorage等可用存储之一中。
优势
缺点