Невозможно получить доступ к переменным среды gatsby на стороне клиента

Я настроил файл.env и gatsby-config.js, как показано ниже.

// .env.development
GATSBY_API_URL=https://example.com/api

// gatsby-config.js
console.log(process.env)
...
...

Хотя когда бежать gatsby develop, он показывает все env vars, включая GATSBY_API_URL: 'https://example.com/api', но в браузере нет переменных env.

// client side
console.log(process.env)  // => this will return {}  empty object

Я думаю, что я следовал https://www.gatsbyjs.org/docs/environment-variables/ как он говорит, и добавил GATSBY_ префикс к вар.

Есть ли причина, по которой я не вижу env var на стороне клиента?

gatsby info --clipboard

  System:
    OS: macOS Sierra 10.12.6
    CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
    Shell: 5.2 - /bin/zsh
  Binaries:
    Node: 11.2.0 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.110
    Firefox: 63.0.3
    Safari: 12.0.2
  npmPackages:
    gatsby: ^2.0.61 => 2.0.61
    gatsby-image: ^2.0.22 => 2.0.22
    gatsby-plugin-google-analytics: ^2.0.8 => 2.0.8
    gatsby-plugin-manifest: ^2.0.11 => 2.0.11
    gatsby-plugin-no-sourcemaps: ^2.0.1 => 2.0.1
    gatsby-plugin-nprogress: ^2.0.7 => 2.0.7
    gatsby-plugin-react-helmet: ^3.0.4 => 3.0.4
    gatsby-plugin-sass: ^2.0.5 => 2.0.5
    gatsby-plugin-sharp: ^2.0.14 => 2.0.14
    gatsby-plugin-styled-components: ^3.0.4 => 3.0.4
    gatsby-plugin-typescript: ^2.0.2 => 2.0.2
    gatsby-plugin-typography: ^2.2.2 => 2.2.2
    gatsby-plugin-webpack-bundle-analyzer: ^1.0.3 => 1.0.3
    gatsby-source-filesystem: ^2.0.10 => 2.0.10
    gatsby-transformer-sharp: ^2.1.9 => 2.1.9
    gatsby-transformer-yaml: ^2.1.6 => 2.1.6
  npmGlobalPackages:
    gatsby-cli: 2.4.5
Источник

7 ответов

Решение

Несколько шагов и примечаний, которые должны решить вашу проблему:

console.log(process.env) всегда будет печатать пустой объект

Чтобы увидеть, действительно ли это работает, вы должны напечатать переменные напрямую, например console.log(process.env.API_URL),

Убедитесь, что.env. * Находится в вашей корневой папке

Другими словами, ваша иерархия папок должна выглядеть примерно так:

.env.development
.env.production
src/
  pages/
    index.js

Вам не нужно добавлять префикс GATSBY_, если вы используете файлы.env. *

Из документов:

В дополнение к этим переменным среды проекта, определенным в файлах.env. *, Вы также можете определить ОС Env Vars. ОС Env Vars с префиксом GATSBY_ станет доступной в браузере JavaScript.

Префикс используется только в том случае, если вы используете подход ОС Env Vars (т.е. вы устанавливаете их непосредственно на своем сервере, а не в этих файлах.env).

Убить и перезапустить gatsby develop когда вы добавили.env файл (ы)

Я столкнулся с этим при воспроизведении на CodeSandbox (в CodeSandbox вы перезагружаетесь, перейдя в Панель управления сервером слева и нажав Перезапустить песочницу).

Вот рабочий пример: https://codesandbox.io/s/jj8xzn2y15

Источник

Убедитесь, что вы включили

require("dotenv").config({путь: .env.${process.env.NODE_ENV},})

в вашем файле gatsby-config.js, прежде чем вы начнете использовать переменные ENV.

Источник

Возможно, стоит отметить, что неправильно назвать файл, если вы привыкли писать .dev или .develop.

Гэтсби требует, чтобы файл был назван точно: .env.development

Источник

В Gatsby доступность переменных среды зависит от многих факторов:

  • Контекст исполнения. Вы пытаетесь достичь переменной на стороне клиента или на стороне сервера?
  • Имя переменной. Имена, начинающиеся с GATSBY_ относятся по-разному.
  • Имя файла среды. По умолчанию Гэтсби ожидает, что это будут .env.production и .env.development.
  • Использование DotEnv. Используете ли вы dotenv npm, чтобы загрузить файл env.

Вот различные способы сделать переменную среды доступной на сервере и в браузере. Выберите то, что лучше всего подходит для вашей установки.

На стороне сервера:

1. Определите переменную среды ОС.

MY_VAR='my value'; export MY_VAR // will persist in the OS environment
npm run start

ИЛИ ЖЕ

MY_VAR='my value' npm run start // will set the variable for that process only

Примечание: имя переменной не имеет значения.

2. Создайте файл env и определите там переменную.

echo MY_VAR='my value' >> .env.development

Загрузите файл в gatsby-config.js:

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

Примечание: имя файла не имеет значения. Имя переменной не имеет значения.

Сторона клиента:

1. Создайте .env.development (.env.production для среды prod) и определите там переменную.

Примечание: имя файла имеет значение. Имя переменной не имеет значения.

2. Создайте файл среды с другим именем (скажем, .env) и определим GATSBY_ префиксная переменная там.

echo GATSBY_MY_VAR='my value' >> .env

Загрузите файл в gatsby-config.js с участием dotenv.

require('dotenv').config() // .env is loaded by default, no need to specify path

Примечание: имя файла не имеет значения. Имя переменной имеет значение.

3. Определите GATSBY_ переменная среды ОС с префиксом.

GATSBY_MY_VAR='my value'; export GATSBY_MY_VAR
npm run start

ИЛИ ЖЕ

GATSBY_MY_VAR='my value' npm run start

Примечание: имя переменной имеет значение.

Источник

Вы можете добавить свой ключ env в список разрешенных в gatsby-config.js

{ 
  resolve: `gatsby-plugin-env-variables`,
    options: {
      allowList: [
        "XXXXXXXXX", 
      ]
    }
}
Источник

Проверьте официальный документ .

Гэтсби требует, чтобы мы использовали имя файла как.env.developmentи.env.productionдля разработки и производства соответственно.

И вgatsby-config.js,

      require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

Если вы используете машинописный текст (т.е.gatsby-config.ts),

      import * as dotenv from 'dotenv'
dotenv.config({ path: __dirname + `/.env.${process.env.NODE_ENV}` })
Источник

Если вы планируете использовать один .env файл (не что-то вроде .env.development а также .env.production) затем добавив это в gatsby-config.js должен сделать свое дело:

      require('dotenv').config({
  path: '.env',
})
Источник
Другие вопросы по тегам