在Gatsby中设置环境变量

Posted 2021-04-10

我用过这个教程：https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/environment-variables.md

我遵循的步骤：

1）安装dotenv@4.0.0

2）在根文件夹中创建两个文件：“。env.development”和“.env.production”

3）“按照他们的设置说明”（dotenv npm docs上的示例）

在gatsby-config.js：

const fs = require('fs');
const dotenv = require('dotenv');
const envConfig = 
dotenv.parse(fs.readFileSync(`.env.${process.env.NODE_ENV}`));
for (var k in envConfig) {
  process.env[k] = envConfig[k];
}

不幸的是，当我运行gatsby develop时，还没有设置NODE_ENV：

error Could not load gatsby-config


  Error: ENOENT: no such file or directory, open 'E:Front-End ProjectsGatsbysebhewelt.com.env.undefined'

它在我手动设置时有效：

dotenv.parse(fs.readFileSync(`.env.development`));

我需要gatsby-config中的环境变量，因为我将敏感数据放在这个文件中：

  {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: envConfig.CONTENTFUL_SPACE_ID,
        accessToken: envConfig.CONTENTFUL_ACCESS_TOKEN
      }
    }

如何使它工作？

PS：附加问题 - 因为这让我想到，我知道我不应该在github上放置密码和令牌，但是当从github构建netlify时，还有其他安全方法吗？

答案

你应该只使用env文件，当你习惯将它们检入git时。对于密码/令牌/等。将它们添加到Netlify或您通过其仪表板使用的任何构建工具。

您可以通过process.env.ENV_VARIABLE访问gatsby-config.js和gatsby-node.js。

但是，您无法访问在浏览器中以这种方式添加的环境变量。为此你需要使用.env.development和.env.production。

另一答案

我有一个类似的问题，我在根“.env.development”和“.env.production”创建了2个文件，但仍然无法访问env文件变量 - 它在我的gatsby-config.js文件中返回undefined 。

通过npm安装dotenv并完成这项工作：

1）当运行gatsby develop process.env.NODE_ENV返回undefined时，但是当运行gatsby build时它返回'production'，所以我在这里定义它：

let env = process.env.NODE_ENV || 'development';

2）然后我使用了dotenv，但是根据process.env.NODE_ENV指定了文件路径

require('dotenv').config({path: `./.env.${env}`}); 

3）然后您可以访问配置的变量：

module.exports = {
siteMetadata: {
    title: `Gatsby Default Starter`,
},
plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: `${process.env.CONTENTFUL_ID}`,
        accessToken: `${process.env.CONTENTFUL_TOKEN}`,
        },
    },
],
}