在Gatsby中设置环境变量

Question

我使用了这个教程: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 Projects\Gatsby\sebhewelt.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时,还有其他安全方法吗？

Answer 1

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

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

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

Answer 2

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

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

1)运行gatsby developprocess.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}`,
        },
    },
],
}