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

Question

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

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

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

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

许多 StackOverflow 问题都与此相关，但没有一个答案正确解决了基本问题，或者似乎没有捕获重点。例如，here和 here .

Answer 1

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

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

要开始使用一个，在我的 Configure() 中我将执行以下操作:

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

我的CreateFileProvider()包含一个InMemoryFileProvider类的实例，它可以用额外的假"file"填充。文件系统上预先存在的静态文件将由 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 对象中，并稍后在客户端上访问它们。

现在我的12 factor application完全符合第三个因素“在环境中存储配置”。