Переменные среды доступны только во время разработки, как заставить это работать после развертывания сайта?(Проект GatsbyJS) - PullRequest
Новая
       11

Переменные среды доступны только во время разработки, как заставить это работать после развертывания сайта?(Проект GatsbyJS)

0 голосов
/ 06 июня 2019

Я закончил создание простого сайта резюме / портфолио с использованием GatsbyJS в разработке.

Я использую три переменные среды (env var) для хранения своих ссылок в социальных сетях (электронная почта / мобильный / linkedin), так как я буду отображать их в своем интерфейсе React.

Я храню все мои env var (s) внутри .env.development файла в корне.

Я использую пакет env-cmd для доступа к env var (s).

В моем файле package.json я изменил сценарий develop следующим образом: 

"develop": "env-cmd -f .env.development gatsby develop",

^ После этого я могу получить доступ к переменным окружения в моем интерфейсе.

например. 

<div>{process.env.EMAIL}</div>

Я использую Netlify для развертывания, и я пытался поместить env vars в Netlify после его сборки, но он не работал.

Так что я думаю, что проблема в том, что env vars доступны только во время разработки, поэтому мой вопрос: как мне убедиться, что они доступны после развертывания сайта (в работе)?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 06 июня 2019

Итак, после прочтения документации снова: https://www.gatsbyjs.org/docs/environment-variables/

Я просто добавил префикс всех моих env var к GATSBY_ в моем .env файле, так же, как REACT_ в create-реагировать-приложение.Я не использовал файлы .env.development и .env.production, просто файл .env.

Затем в Netlify я ввел тот же env var, и он работал!

ЯНе уверен, что это оптимальное решение, поэтому, если есть лучший способ сделать это, пожалуйста, поделитесь!

0 голосов
/ 06 июня 2019

Ваши переменные доступны при сборке / компиляции.Чтобы использовать их на клиенте, вы должны создать .env.production (я использовал dotenv) при сборке, вы можете поместить его, например, поверх gatsby-config.js

Пример: 

const fs = require('fs')

const VARS = [
  'TEST'
]

function createProdEnv () {
  var content = ''

  VARS.map(varName => {
    content += varName + '=' + process.env[varName] + '\n'
  })

  fs.writeFileSync('./.env.production', content)
}

module.exports = createProdEnv

И звоните по этому номеру gatsby-config.js

createProdEnv()
...