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

【问题标题】：How to create Client-side environment variables in netlify如何在 netlify 中创建客户端环境变量
【发布时间】：2020-11-04 17:45:21
【问题描述】：

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

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

如何更改为：常量客户端=内容。创建客户端（{ 空间：'你的空间ID'， accessToken:NETLIFY_ENVIROMENT_VARIABLE_NAME, })

【问题讨论】：

标签： gatsby netlify contentful

【解决方案1】：

使用 Netlify，您需要在所有环境变量前面加上 GATSBY_。如Gatsby documentation所示。

除了在.env.* 中定义的这些项目环境变量文件，您还可以定义 OS Env Vars。操作系统环境变量是以 GATSBY_ 为前缀的将在浏览器 JavaScript 中可用。

所以你的CONENTFUL_ACCESS_TOKEN 和其他变量将变成GATSBY_CONENTFUL_ACCESS_TOKEN（等等）。一旦它们在本地设置（以保持凝聚力并避免重复），您必须在您的 Netlify 应用程序中更改它们（在 https://app.netlify.com/sites/YOURSTIE/settings/deploys#environment 下）：

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

还有：

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

参考：https://www.gatsbyjs.org/packages/gatsby-source-contentful/

【讨论】：

谢谢，我还是很困惑，所以我应该在netlify中将变量CONENTFUL_ACCESS_TOKEN更改为GATSBY_CONENTFUL_ACCESS_TOKEN？并在服务器端使用 CONENTFUL_ACCESS_TOKEN，在客户端使用 GATSBY_CONENTFUL_ACCESS_TOKEN？还是应该在 netlify 中创建另一个变量 GATSBY_CONENTFUL_ACCESS_TOKEN？
是的。在 Netlify 中，您必须使用 带有 GATSBY_ 前缀的变量，因此您需要使用 GATSBY_CONENTFUL_ACCESS_TOKEN。为了保持凝聚力，我建议在任何地方都使用相同的变量名，因此我建议为所有变量添加前缀并使用GATSBY_CONENTFUL_ACCESS_TOKEN（其他变量也一样）。
随时通知我！
嗨，@Ferran Buireu，它不起作用，我创建了新的两个变量 GATSBY_CONENTFUL_ACCESS_TOKEN 和 GATSBY_CONENTFUL_SPACE_ID，我更改了 client.js 以使用这两个变量。当 netlify 部署时，它会抛出“WebpackError: ReferenceError: GATSBY_CONTENTFUL_SPACE_ID is not defined”
我确定我不使用 .env 文件，我没有将此文件上传到 git repos，好消息是我已经解决了这个问题，我将 GATSBY_CONTENTFUL_SPACE_ID 更改为 ${process.env。 GATSBY_CONTENTFUL_SPACE_ID}，与 GATSBY_CONTENTFUL_ACCESS_TOKEN 相同，它有效，谢谢。