5

我使用了本教程：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 上，但是当 netlify 从 github 构建时，还有其他安全的方法吗？

4

4 回答 4

12

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

通过 npm 安装 dotenv 并执行以下操作使其工作：

1）运行时gatsby developprocess.env.NODE_ENV 返回未定义，但运行gatsby build时返回“生产”，所以我在这里定义它：

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}`,
        },
    },
],
}
于 2017-12-23T16:15:52.000 回答
9

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

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

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

于 2017-11-03T01:18:00.907 回答
0

查了几遍，发现可以通过netlify网站设置环境变量，步骤如下：

  1. 在自己的netlify控制台平台下，请进入设置
  2. 选择构建和部署选项卡（可以在侧边栏找到）
  3. 选择环境子选项卡选项
  4. 单击编辑变量并添加/放入您的凭据
  5. 完毕！
于 2019-06-24T23:50:28.990 回答
0

我真的不喜欢.env.production文件模式，我们的构建系统设置并使用环境变量，并且有额外的构建步骤将它们写入文件很奇怪。但是 Gatsby 只列出GATSBY_了 env vars 的白名单，没有明显的方式添加你自己的。

但是这样做并不难，您可以通过在文件中添加类似这样的内容来做到这一点gatsby-node.js：

exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
    const config = getConfig();

    // Allow process.env.MY_WHITELIST_PREFIX_* environment variables
    const definePlugin = config.plugins.find(p => p.definitions);
    for (const [k, v] of Object.entries(process.env)) {
        if (k.startsWith("MY_WHITELIST_PREFIX_")) {
            definePlugin.definitions[`process.env.${k}`] = JSON.stringify(v);
        }
    }

    actions.replaceWebpackConfig(config);
};
于 2020-02-12T14:55:59.073 回答