Gatsby 如何在netlify中创建客户端环境变量

我使用netlify从git repos部署gatsby应用程序，并使用contentful作为我的CMS。为了使用内容交付api，我在客户端定义了accessToken和空间id，现在它可以正常工作了。但是accessToken是纯文本的，因此公开accessToken是一个安全问题。我知道netlify可以创建环境变量，但似乎这些变量只在服务器端起作用。我已经创建了一个名为CONENTFUL\u-ACCESS\u-TOKEN的变量，我可以在gatsby-config.js、gatesby-node.js等处使用process.env.CONENTFUL\u-ACCESS\u-TOKEN来访问它，但是我无法在客户端访问它，那么怎么办呢？ 这是我的client.js，它在客户端运行

const client=contentful.createClient({
  space:'your spaceid',
  accessToken:'your access token',
})

如何更改为： const client=contentful.createClient({ 空间：'您的空间id'， accessToken:NETLIFY\u环境\u变量\u名称，

---

})

对于Netlify，您需要在所有环境变量前面加上

GATSBY

。如中所示

除了在

.env

中定义的这些项目环境变量之外* 文件，您还可以定义OS Env变量。操作系统环境变量是 前缀为

GATSBY_uz

将在浏览器JavaScript中可用

因此，您的

CONENTFUL\u ACCESS\u TOKEN

和其他变量将成为

GATSBY\u CONENTFUL\u ACCESS\u TOKEN

（依此类推）。在本地设置它们后（为了保持内聚性和避免重复），您必须在Netlify应用程序中更改它们（在下）：

对

spaceId

执行相同的步骤

要使用这些变量，只需将它们添加到您的

gatsby config.js

：

{
  resolve: `gatsby-source-contentful`,
  options: {
    spaceId: process.env.GATSBY_CONTENTFUL_SPACEID,
    accessToken: process.env.GATSBY_CONTENTFUL_ACCESS_TOKEN,
    host: `preview.contentful.com`,
  },
},

以及：

---

参考资料：

谢谢，我仍然感到困惑，所以我应该在netlify中将变量CONENTFUL\u ACCESS\u TOKEN更改为GATSBY\u CONENTFUL\u ACCESS\u TOKEN？并在服务器端使用CONENTFUL_ACCESS_令牌，在客户端使用GATSBY_CONENTFUL_ACCESS_令牌？或者我应该在netlify中创建另一个变量GATSBY_CONENTFUL_ACCESS_TOKEN吗？没错。在Netlify中，必须将前缀变量与

GATSBY\uu

一起使用，因此需要使用

GATSBY\u CONENTFUL\u ACCESS\u TOKEN

。为了保持内聚性，我建议在所有地方使用相同的变量名，因此我建议在所有变量前加前缀，并使用

GATSBY\u CONENTFUL\u ACCESS\u TOKEN

（其他变量也一样）。随时通知我！你好，@Ferran Buireu，它不起作用，我创建了两个新变量，GATSBY_CONENTFUL_ACCESS_TOKEN和GATSBY_CONENTFUL_SPACE_ID，我将client.js更改为使用这两个变量。netlify部署时，它抛出“WebPackageError:ReferenceError:GATSBY_CONTENTFUL_SPACE_ID未定义”我确定我没有使用.env文件，我没有将此文件上载到git repos，好消息是我已解决此问题，我将GATSBY_CONTENTFUL_SPACE_ID更改为${process.env.GATSBY_CONTENTFUL_SPACE_ID}，与GATSBY_CONTENTFUL_ACCESS_令牌相同，这很有效，谢谢你。

const client=contentful.createClient({
  space:process.env.GATSBY_CONTENTFUL_SPACEID,
  accessToken: process.env.GATSBY_CONTENTFUL_ACCESS_TOKEN,
})