Установка переменных окружения в Gatsby

Я использовал этот учебник: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/environment-variables.md

Шаги, которые я сделал:

1) установить [email protected]

2) Создайте в корневой папке два файла: «.env.development» и «.env.production».

3) "следуйте их инструкциям по установке" (пример в документации dotenv npm)

In 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, есть ли другой безопасный способ?


node.js javascript contentful gatsby environment-variables
person Sebastian    schedule 03.11.2017    source источник

Ответы (4)


arrow_upward
9
arrow_downward

Вам следует использовать файлы env только в том случае, если вам удобно помещать их в git. Для паролей / токенов / и т. Д. добавьте их в Netlify или в любой другой инструмент сборки, который вы используете, через их панель управления.

К ним вы можете получить доступ в gatsby-config.js и gatsby-node.js через process.env.ENV_VARIABLE.

Однако вы не можете получить доступ к переменным среды, добавленным таким образом в браузере. Для этого вам нужно использовать .env.development & .env.production.

person Kyle Mathews    schedule 03.11.2017

arrow_upward
11
arrow_downward

У меня была аналогичная проблема, я создал 2 файла в корне «.env.development» и «.env.production», но все еще не мог получить доступ к переменным файла env - он возвращал undefined в моем файле gatsby-config.js .

Получил, что 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}`,
        },
    },
],
}
person laij84    schedule 23.12.2017
comment
Это действительно работает. Но зачем это нужно? Мой вывод из документов заключался в том, что значения, определенные в .env.development и .env .production будет доступен в gatsby-config.js. - person pdoherty926; 18.12.2018
comment
верно. У меня был тот же вывод из чтения документов Гэтсби, что и у pdoherty. тем не менее, ваше решение потрясающе! настройка env теперь у меня отлично работает !! Спасибо - person Hendry Lim; 01.03.2020
comment
У меня тоже болела голова из-за этой проблемы. Пробовал описанный выше метод, и он работал безупречно. - person sunny prakash; 02.05.2020

arrow_upward
0
arrow_downward

После нескольких поисков я обнаружил, что мы можем установить переменные среды через веб-сайт netlify, вот шаги:

  1. Под вашей собственной консольной платформой netlify перейдите в настройки
  2. Выберите вкладку сборки и развертывания (находится на боковой панели)
  3. Выберите вариант дополнительной вкладки среды
  4. Нажмите изменить переменные и добавьте / введите свои учетные данные
  5. Сделанный!
person Community    schedule 24.06.2019

arrow_upward
0
arrow_downward

Мне очень не нравится шаблон файла .env.production, наша система сборки настраивает и использует переменные env, и иметь дополнительные шаги сборки для записи их в файл странно. Но Гэтсби заносит в белый список только GATSBY_ переменных окружения, без очевидного способа добавить свои собственные.

Но сделать это не так уж и сложно, вы можете сделать это, добавив что-то вроде этого в 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);
};
person odinho - Velmont    schedule 12.02.2020