Gatsby 如何在前端隐藏 API 密钥

Question

所以，我很难理解 Gatsby 的工作原理。我正在使用https://www.gatsbyjs.org/starters/AlexanderProd/gatsby-shopify-starter/，它使用了一个名为gatsby-source-shopify 的Gatsby 插件。该插件有两个参数：shopName 和 accessToken。在gatsby-config.js 中看起来像这样：

{
  resolve: `gatsby-source-shopify`,
  options: {
    // The domain name of your Shopify shop. This is required.
    shopName: process.env.SHOP_NAME,

    // An API access token to your Shopify shop. This is required.
    accessToken: process.env.SHOPIFY_ACCESS_TOKEN,
  },
},

当我部署应用程序时，访问令牌是否可供人们查看？我是否需要使用无服务器函数之类的东西来隐藏我的 API 密钥，或者这样可以吗？任何关于它在 Gatsby 中如何工作的一般解释都很棒。

感谢盖茨比的家人！

Answer 1

如代码所示，它使用process.env.SHOP_NAME，其中SHOP_NAME是environment variable的名称。这些文件是在项目的根目录中使用一些命名来声明的，例如.env.domain1.com。在此文件中，您可以存储任何所需的变量以在您的 Gatsby 配置中使用它。在处理敏感变量（API 密钥、令牌、密码等）时，建议使用这种方式并忽略 .gitignore 中的所有 .env 文件。

在 Gatsby 中触发命令时，可以传递一些变量，例如：

"develop": "GATSBY_ACTIVE_ENV=domain1.com gatsby develop"

在这种情况下，GATSBY_ACTIVE_ENV var 将具有 domain1.com 作为值。那么，在你gataby-config.js，你什么时候可以使用环境变量（上面module.exports）：

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

然后，您可以在根项目中创建一个环境文件，例如.env.domain1.com，并存储任何所需的变量：

SHOP_NAME: 12345

考虑到您提供的代码，如果您运行 develop（我已经解释过）命令，它将把 SHOP_NAME 作为 12345。

因此，回答您的问题，您将无法访问该令牌。您需要将它们存储在本地计算机和部署服务器中，而不是存储库中。 来自 Gatsby 文档：

请注意，您不应将 .env.* 文件提交到您的源 控制而不是使用持续部署提供的选项 (CD) 提供商...

编辑：感谢@Hans Martin Henken 提供以下关于Gatsby security的文章