如何使用 Gatsby 存储和访问 API 密钥和密码？

Question

我正在开发一个 Gatsby 应用程序，它实现了一些 3rd 方 API，所有这些 API 都需要个人凭据。稍后我还计划添加一个数据库，因此也需要凭据。由于我的所有代码都提交给 GitHub，我正在寻找一种以安全方式存储和访问这些代码的方法。

虽然我还没有部署我的应用程序，但该解决方案应该适用于本地开发和生产。

我想提一下，过去我从来没有（有机会）处理过类似的问题，因此我什至不知道去哪里寻找或我应该寻找什么来解决这个问题。

Answer 1

区分 Gatsby 中两种类型的秘密很重要：构建时和运行时。

• 构建时机密用于Gatsby 构建过程，例如从 CMS 获取数据时（您需要使用机密从 CMS 中提取数据）。
• 当您从 API 动态获取数据时，客户端会使用运行时机密，例如渲染 Mapbox 地图时（您需要将 API 机密传递给客户端上的 Mapbox）。

构建时的秘密

您可以将构建时机密存储为环境变量（Gatsby 文档）。

简而言之，您将.env.development使用 dev 环境变量创建一个文件，并.env.production为您的 prod 环境创建一个文件。

然后，在您的 开头gatsby-config.js，您将添加：（无需安装dotenv，它已经是 Gatsby 依赖项）

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

还要确保您的.env文件在您的目录中，.gitignore以避免将它们提交给源代码控制：

# ignore env variables files
.env*

作为最后一步，您需要手动将变量添加到您正在使用的用于构建站点的每个服务中。通常这将是您的主机（例如Netlify）和您的 CI（例如GitHub Actions）。

运行时秘密

Gatsby 的优势在于在构建时获取数据并生成静态内容。如果您可以在构建时使用 Gatsby 源插件拉取内容，那么您应该更喜欢这种方式而不是在运行时获取内容。（有关更多详细信息，请参阅有关构建时与运行时数据获取的 Gatsby 文档。）

但是，在某些情况下，您无法在构建时获取数据，例如在获取动态内容或渲染 Mapbox 地图时。

在这种情况下，将您的机密保存为环境变量是不够的，因为机密仍然会在网络调用中公开。

您有几个替代选项，例如：

• 通过后端换前端代理 API 调用，例如 Express.js 服务器，并将机密添加到您的 Express 服务器
• 使用无服务器函数代理调用而无需托管服务器，例如使用Netlify或 AWS Lambda

Gatsby 中的运行时机密显然比构建时机密更难处理。如果您的应用程序严重依赖运行时数据获取，您还可以考虑用Next.js替换 Gatsby ，它通过API 路由（本质上是框架中捆绑的无服务器函数）很好地支持运行时机密。

感谢HaberdashPI和JakobAttk的反馈改进了这个答案！