如何使部署的React.js应用程序使用API​​密钥？我正在使用Heroku confing var，但仍无法正常工作

Question

问题：

我创建了一个简单的React应用程序（使用Javascript和Node），该应用程序使用GitHub API搜索用户并返回有关他们的信息。我需要使用GitHub oauth密钥，以便可以进行经过身份验证的API请求。但是，在不将其硬编码到API调用中的情况下，给我已部署的应用程序（使用Heroku）带来麻烦。我在这方面还很新，所以任何帮助都会很棒！我在这篇文章的底部链接了github仓库。

我尝试了以下几项操作：

尝试1：

1. 我创建了一个文件，在其中将GitHub密钥设置为变量并将其导出（Image of code）
2. 我将所述文件放入.gitignore

3. 我将变量导入进行API调用的文件中，并将其直接用于API调用中。 （Image of API call）

4. 这在我的开发环境中有效，但是（显然）在我已部署的Heroku应用中不起作用，因为它不知道变量是什么。 （Image of error）

尝试2：

1. 我在Heroku中配置了变量，并将GITHUB_KEY设置为我的密钥。 （Image of Heroku variable setting）。

2. 接下来，我通过运行命令heroku config:get GITHUB_KEY检查Heroku是否识别了此变量，并收到了正确的响应密钥（Image of terminal）

3. 在我的机密文件中，我像这样设置变量：process.env.GITHUB_KEY = 'a93b2c21918b42df5a28e0e529c627ee22c60de4';（Image of setting variable using process.env）

4. 然后在前端的const res = await fetch( 'https://api.github.com/users/${this.state.input}?access_token=${process.env.GITHUB_KEY}' );的API调用中使用它。 但是，出现以下错误：SearchBar.js:32 GET https://api.github.com/users/livmarx?access_token=undefined 401 (Unauthorized)。 （Image of error）。

因此，我知道我误会了process.env的工作原理，但似乎无法弄清楚！任何澄清将是超级有帮助的。

这是我的github存储库的链接：https://github.com/livmarx/zilliow-challenge