我有一个使用两个第三方服务的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}`

Google
在处理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密钥是否仍未包含在捆绑软件中？

说我按照Google所说的去做

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

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

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

自我解释，我正在寻找解决这一问题的有效方法。

谢谢您的帮助！