Gatsby, переменные среды не доступны в браузере - PullRequest
Новая
       26

Gatsby, переменные среды не доступны в браузере

1 голос
/ 21 октября 2019

Я хочу использовать переменные окружения. Я создал .env.development файл и поставил некоторые переменные. Затем я включаю плагин dotenv для чтения переменных в gatsby-config.js: 

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

Содержимое моего .env.development: 

GATSBY_APP=MYAPP

Работает в gatbsy-node.js, нов браузере (РЕАКТ) он пуст. Я отображаю console.log(process.env), и он возвращает пустой объект.

Даже если я устанавливаю и настраиваю gatsby-plugin-env-variables.

Ответы [ 2 ]

0 голосов
/ 22 октября 2019

Похоже, что вы комбинируете два подхода, и это может быть причиной проблем.

  1. Gatsby поставляется с поддержкой определения переменных среды в специфичных для среды файлах .env.[environment] (например, .env.development), при условии, что эти файлы находятся в корневаш проект (т.е. your-project/.env.development). Документация для этой функции . Вы не должны установить или настроить dotenv, чтобы это работало.

  2. Другой подход заключается в использовании dotenv , что позволит вам использовать общий файл .env. Затем вам нужно импортировать и настроить инструмент, который обычно выполняется в самой верхней строке gatsby-config.js и выглядит следующим образом: 

    require("dotenv").config()

    Обратите внимание, что вы не указываетеимя среды (например, development) в этом сценарии, и вы не будете фиксировать файл .env в своем хранилище.

Другая проблема, с которой вы можете столкнуться, заключается в том, что часть кода выполняется на стороне сервера с использованием Node, а часть - на стороне клиента (в браузере). Поскольку process.env доступен только в Node, Гэтсби делает некоторую дополнительную работу, чтобы сделать его доступным в браузере. Мы не хотим, чтобы все этих переменных, которые часто содержат секреты, были предоставлены браузеру, поэтому Гэтсби копирует только те, чьи имена начинаются с GATSBY. Наконец, в качестве побочного эффекта от того, что эти переменные копируются, вы должны явно ссылаться на них, чтобы ваша сборка работала: 

// this is okay everywhere
const GATSBY_APP = process.env.GATSBY_APP

// this won't work in code that runs client-side, but will work
// in `gatsby-node.js` and other files that only run in Node
const { GATSBY_APP } = process.env
0 голосов
/ 22 октября 2019

Сайт Gatsby как хорошо документированный раздел о работе с переменными среды . Суть в том, что переменные среды доступны только во время сборки, когда внутренний сервер nodejs является сервером, отображающим ваш сайт. Чтобы получить эти переменные окружения в браузере, вам необходимо программно встраивать их, используя специальные файлы gatsby-*.js. Пример , который они предоставляют, кажется, близок к тому, чего вы хотите достичь.

...