shopify - Gatsby 如何在前端隐藏 API key

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,
  },
},

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

谢谢 Gatsby 家人!

Answer 1

如代码所示，它使用 process.env.SHOP_NAME，其中 SHOP_NAME 是 environment variable 的名称.这些文件使用诸如 .env.domain1.com 之类的命名在项目的根目录中声明。在此文件中，您可以存储任何所需的变量以在您的 Gatsby 配置中使用它。在处理微妙的变量(API key 、 token 、密码等)时，建议使用这种方式并忽略 .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。

因此，在回答您的问题时，您将无权访问该 token 。您需要将它们存储在本地机器和部署服务器中，而不是存储库中。来自 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 的文章