让 Heroku 无法识别 React 应用程序中的 gitignored api 键

Question

我在让 Heroku 识别我的 api 键时遇到问题，我在 React 应用程序中忽略了这些键。

我用 api 密钥创建了 credentials.js 并导出了它。

export const API_KEY = 'redacted';

然后我在gitignore中列出了credentials.js。

credentials.js

然后我将 API_KEY 导入到我的项目文件中。

import { API_KEY } from '../credentials.js';

这在开发中工作正常，但是当我推送到 Heroku 时，它无法解析凭证路径并且编译失败，因为它在 gitignored 文件中。我也尝试过使用 .env 文件，但这也不起作用。

我试过不导入它，只是运行终端中的 Heroku "config set" 命令，但无济于事。

$heroku config:set API_KEY=<key>

此外，问题还在于在 index.html 文件中导入 API_KEY gitignored 变量。您如何在 React 应用程序中执行此操作，就像您可以在 rails 中处理 application.yml 文件并使用 #{ENV[API_KEY]} 引用它一样？

有没有人有经过试验和测试的解决方案？

Answer 1

因为您已经使用您提到的命令在 Heroku env 上设置了 API_KEY，为了使用它，您需要执行如下操作：

const API_KEY = process.env.API_KEY;

这样你就可以从 Heroku env 中读取。您可以查看更多信息 here.

Trouble having Heroku recognize gitignored api keys in react app