使用反应环境变量有什么意义?

what is the point of using react environment variables?

Reacts 文档说“环境变量嵌入到构建中,这意味着任何人都可以通过检查您的应用程序的文件来查看它们”。

我假设它是因为 .env。我定义它们的文件将包含在构建中(或者不是因为那个?!)?

那么,如果我不能隐藏任何键,那么使用反应环境变量有什么意义呢? 或者我只是不明白它并且我可以使用反应环境变量隐藏键(我正在观看的教程说你可以使用它隐藏它们)?

如果我在 shell 中定义这些变量会怎样?他们也暴露了吗?

谢谢!!

React 中的环境变量总是以 REACT_APP_ 为前缀,当您想要在前端 React 应用程序中更改值时使用。它们不是为了隐藏 API 私钥而设计的。

不以该前缀开头的变量在最终构建中将不可见(您也可以使用两个 .env 文件)。

您的服务器 shell 中定义的任何变量都不会公开。

环境变量很有帮助,因为它们可以让您自定义设置而无需更改源代码。就运行的代码而言,最终结果是相同的 - 是的,任何运行代码的客户端都能够看到发生了什么,包括应用程序中包含的任何 API 键 - 但它使开发当您可以在一个地方设置因环境而异的设置而无需更改代码本身时,过程会更容易。

这在使用像 Git 这样的源代码控制时是最大的好处。如果您更改构建设置 - 例如更改 API 键 - 将该更改签入代码库的历史记录是没有意义的。相反,惯例是让应用程序读取其环境变量,并将那些 not 签入源代码管理,从而允许轻松更改设置,而无需更改应用程序代码本身的任何其他内容.

请参阅 An Introduction to Environment Variables and How to Use Them 以获得体面的摘要。

if i cannot hide any keys?

隐藏 API 键是一个完全独立的问题 - 这不是环境变量旨在解决的问题。如果你想隐藏你的钥匙,至少有两种方法:

  • 将密钥放在你的服务器上,然后让客户端向你的服务器发出请求,让你的服务器使用(秘密)API密钥到外部服务,然后将结果回显给客户
  • 一些提供密钥的 API 还提供将来自特定域的请求列入白名单并阻止来自其他域的请求的能力。例如,根据您使用的是什么,您可以进入 API 的设置以使用 mysite.com 启用您的密钥,并阻止它被任何其他人识别为有效地点。这样,即使 API 键是 public,也不是(很大)问题。

我不确定如果您在 shell 中定义它们是否会暴露,但情况是:当您将文件夹推送到 git 控制系统时 GitHub,没有上传环境变量。 因此,当您要托管您的网站时,您必须在适当的时候秘密定义它们。 这是它们在您的文件中的样子:

var id = process.env.REACT_APP_CLIENT_ID;
var key = process.env.REACT_APP_KEY;

它们将从 .env.local 官方提及的文件中调用。

我目前很熟悉在 vercel 中使用环境变量,你可以这样做:https://vercel.com/docs/concepts/projects/environment-variables 重点是它们可以帮助您保护 API 免受外部应用程序的侵害。