Gatsby如何在前端隐藏API-keys

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 文档：

Please note that you shouldn’t commit .env.* files to your source control and rather use options given by your Continuous Deployment (CD) provider...

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

的文章

Gatsby如何在前端隐藏API-keys

How does Gatsby hide API-keys on the frontend

shopify

gatsby