如何在运行时从 React 应用程序访问 Azure Web App AppSettings

Question

我有一个使用create-react-app创建的 React 应用程序，我已将其部署到 Azure Web 应用程序。没有后端：该网站是纯粹的“静态”。

在生产环境中，我需要保证 API 服务的许多密钥和其他机密的安全，但客户端应用程序需要能够读取它们。

在 React 中，有一种使用文件访问特定于环境的信息的机制.env，例如.env.production，但这不适合保密，因为代码中提到的环境变量.env在构建过程中被替换为文件中的实际值，因此任何在浏览器中查看 JavaScript 的人都可以看到。

设置 AppSettings 的值可以在 Azure 门户上完成（或通过 CI/CD 管道中的合适脚本），但如何在运行时读取 AppSettings 值？

许多 StackOverflow 问题都与此相关，但没有一个答案正确解决了基本问题，或者似乎没有抓住要点。例如，这里和这里。

Answer 1

首先，这个话题令全球许多开发人员感到困惑，应该在 Aspnet Core 中得到妥善解决。一种可行的选择是设置服务器端渲染，但我们中的一些人不会从中受益。此外，在 Aspnet Core 世界中没有针对 ReactJS + Redux 执行此操作的正确示例。

我的解决方案是选择 a InMemoryFileProvider，请参阅https://github.com/dazinator/Dazinator.AspNet.Extensions.FileProviders有关 NuGet 包的详细信息，

要开始使用，Configure()我将执行以下操作：

configuredSpaFileProvider = CreateFileProvider(env);
app.UseSpaStaticFiles(new StaticFileOptions
{
    FileProvider = configuredSpaFileProvider
});

MyCreateFileProvider()包含 -class 的实例InMemoryFileProvider，可以用额外的假“文件”填充它。文件系统上预先存在的静态文件将使用PhysicalFileProvider.

要允许访问index.html、CSS、JavaScript 和所有可能的静态文件，请执行以下操作DefaultSpaStaticFileProvider：

var defaultPath = "build";
if (env.IsDevelopment())
    defaultPath = "public";
var absoluteRootPath = System.IO.Path.Combine(
    env.ContentRootPath,
    $"{ReactJSdirectory}/{defaultPath}");
var physicalFileProvider = new PhysicalFileProvider(absoluteRootPath);

然后创建一个提供程序和虚拟文件，如下所示：

var inMemoryProvider = new InMemoryFileProvider();
inMemoryProvider.Directory.AddFile("/", new StringFileInfo(configJsContent, "app.config.js"));

最后将它们粘合在一起，优先考虑虚拟文件：

return new CompositeFileProvider(inMemoryProvider, physicalFileProvider);

既然存在动态 JavaScript 文件，就需要在客户端代码上访问它。有一些选择，但我会简单地做一个：

<script src="/app.config.js" async defer></script>

在我的index.html。技巧是使用合适的 JavaScript 可解析内容构造一个字符串，设置变量并将它们存储到window-object 中，并稍后在客户端上访问它们。

现在我的12 因素应用程序完全符合第三因素“在环境中存储配置”。