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

Question

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

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

如何更改为： const 客户端=contentful.createClient({ space:'your space id', accessToken:NETLIFY_ENVIROMENT_VARIABLE_NAME, })

Answer 1

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

所示

In addition to these Project Environment Variables defined in .env.* files, you could also define OS Env Vars. OS Env Vars which are prefixed with GATSBY_ will become available in browser 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 中创建客户端环境变量

How to create Client-side environment variables in netlify

contentful

gatsby

netlify