Shopify 盖茨比如何在前端隐藏API键

所以，我很难理解盖茨比是如何工作的。我正在使用一个名为

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键，或者这样就可以了。任何关于这在盖茨比是如何运作的一般性解释都是令人敬畏的

---

谢谢盖茨比·法姆

如代码所示，它使用

process.env.SHOP\u NAME

，其中

SHOP\u NAME

是系统的名称。这些文件是在项目的根目录下使用一些命名声明的，例如

.env.domain1.com

。在该文件中，您可以存储任何所需的变量，以便在盖茨比配置中使用它。在处理微妙的变量（API密钥、令牌、密码等）时，建议使用这种方式，并忽略

.gitignore

中的所有

.env

文件

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

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

在这种情况下，

GATSBY\u ACTIVE\u ENV

var将

domain1.com

作为一个值。然后，在您的

gataby config.js

中，当您可以使用环境变量时（在

module.exports

上方）：

然后，您可以在根项目中创建一个环境文件，如

.env.domain1.com

，并存储任何所需的变量：

SHOP_NAME: 12345

考虑到您提供的代码，如果您运行

develope

（我已经解释过了）命令，它将把

SHOP\u NAME

作为12345

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

请注意，您不应该将.env.*文件提交到源代码 控制并使用连续部署提供的选项 （CD）提供程序

---

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

的文章，感谢您的回复！我想我真正想问的是：如果我在GraphQL中进行查询以获取所有产品，该怎么办。我的应用程序是在运行时从Shopify获取数据，还是全部存储在我的服务器上并“本地”获取？这个问题有意义吗？当您运行

develope

命令时，盖茨比使用所有配置（如您提到的Shopify）从API下载所有内容并生成静态文件，因此当您使用GraphQL查询时，您将获取以前下载的所有数据（即：获取本地数据）。如果您没有API令牌，您将无法下载它，并且您将在控制台中看到提示错误。我希望我已经回答了你有意义的问题。非常感谢。我还发现这篇文章更详细地解释了《盖茨比》中的安全性。如果其他人遇到此问题，请在回答中随意添加您的最后评论+此链接。谢谢你，汉森。我的回答中包括了这篇文章。如果我能为你做点什么，告诉我。如果没有，请验证答案以关闭主题。

SHOP_NAME: 12345