别再在 GitHub 上推送你的 React API Key 了😪

您是否曾经使用 React 创建过应用程序，在该应用程序中您使用外部 API 并将这些 API 密钥推送到 GitHub 上？

哦，这不是坏习惯，现在每个人都可以使用您的 API 密钥。

我们将看到如何避免这种情况并在 Github 上隐藏您的 API 密钥，您需要 .env 文件。

如何在 React 应用程序内设置 .env 文件？

您不需要安装 env 包，此功能在react-scripts@0.2.3及更高版本中可用。

• 在项目根目录中创建一个名为 .env 的文件

• 在 env 文件中，添加变量和 API 密钥值，如下所示：
  

REACT_APP_GITHUB_API_KEY=Hello world 12345
REACT_APP_MOOVIE_API=0123456789

您应该在所有变量名称前加上 REACT_APP，否则它将被忽略

• 现在你需要使用 npm start 重启你的 React 服务器来访问这些变量

• 在你的 React 应用程序中，你现在可以使用以下语法访问这些变量：
  

{process.env.REACT_APP_GITHUB_API_KEY}
{process.env.REACT_APP_MOOVIE_API}

现在您没有理由在 React 应用程序中推送 API 密钥。

这里有关于使用环境变量的 React 文档