我有一个使用两个第三方服务的 React 应用程序。该应用程序开始使用react-create-app.

这两项服务都需要 API 密钥。

一个键是通过脚本标签提供的，如下所示：

<script type="text/javascript" src="https://myapi?key=MY_KEY">
</script>

另一个 API 密钥用于请求。我将实际密钥存储在一个常量中并使用它来形成请求。像这样：

const MY_OTHER_KEY = 'MY_OTHER_KEY'
let url = `http://myotherapi?key=${MY_OTHER_KEY}&q=${query}`

谷歌关于处理 API 密钥的最佳实践提示说：

不要直接在代码中嵌入 API 密钥

这让我想到了我的第一个问题：

1.如何使用变量index.html？

在我的index.html文件中，我有两个如下所示的标签：

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

显然，%PUBLIC_URL%是一个变量。如何添加变量%MY_KEY%以避免将 API 密钥直接嵌入到我的代码中？

要得到这样的东西：

<script type="text/javascript" src="https://myapi?key=%MY_KEY%">
</script>

与此问题相关，将 API 密钥存储在常量中是否安全，就像我所做的那样MY_OTHER_KEY？

谷歌还说：

不要将 API 密钥存储在应用程序源树中的文件中

这让我想到我的第二个问题：

2. API 密钥不是仍在捆绑包中吗？

说我按照谷歌说的去做

... 将它们存储在环境变量中或应用程序源代码树之外的文件中

假设我将密钥存储在外部文件中。我假设该文件将在某个时候被读取，其内容要么复制到包中，要么以其他方式引用。最后，除了可能更难找到之外，密钥是否仍然在捆绑包中可见？这究竟有什么帮助？

3. 是否有在 React 应用程序中使用 API 密钥的规范方式？还是由个人开发人员决定？

不言自明，我正在寻找解决这个问题的react方式，如果有的话。

谢谢您的帮助！