如何正确（安全地）为 Azure SWA 托管的 React.js 网站（仅前端；无后端）设置环境变量？

Question

我的设置是基于 Vite 的开发环境和 React.js 框架； CI/CD 的 GitHub 操作。

我可以毫无问题地将我的环境变量传递到我的应用程序中。但是，如果我运行我的 Web 应用程序的构建并将其推送到 GitHub（操作）以便我的网站获得最新和最好的，我现在已经有效地暴露了我的环境变量值因为这些环境变量的值出现在 index-.js 中获取输出到我的构建文件夹 /dist.

我已经研究过 Azure 静态 Web 应用程序 (SWA) 的应用程序设置，但据我所知，创建应用程序设置变量适用于网站附加后端的情况（我的没有）。参考如下：

我还了解到，如果我想为前端构建设置环境变量，我可以选择在构建配置文件中定义环境变量。参考如下：

但是如果我将我的环境变量放在我的 .yml 配置文件中，我也会暴露私人信息，因为这在 GitHub 存储库上是公开的。那么，这里的解决方案是什么？跟secrets有关系吗？请帮助社区！

Answer 1

不幸的是，没有办法解决这个问题。如果您的代码是由浏览器（网站）下载的，那么它的设计就不安全。因此，你不应该在你的前端代码中暴露秘密。

您应该有一个公开 API 的后端，您网页的用户应该通过它访问安全内容。