Когда вы начинаете интегрировать сторонние сервисы в свое приложение или веб-сайт, вы можете обнаружить, что полезно иметь различные окружения, такие как среда разработки и производственная среда.
Как настроить это так, чтобы не приходилось напрямую редактировать код для изменения окружения?
Что такое переменные окружения?
Переменные окружения – это заранее определенные значения, которые обычно используются для обеспечения возможности настройки значения в вашем коде извне вашего приложения.
При локальной разработке, а иногда даже в конвейере развертывания, вы часто найдете эти переменные, хранящиеся в файле с именем .env.
Как переменные окружения могут быть полезны?
Вероятно, самый распространенный случай использования переменных окружения – это возможность устанавливать различные параметры конфигурации для разных окружений. Часто при разработке на основе сторонних сервисов вы хотите иметь версию для разработки или “песочницу” для выполнения тестовых запросов, чтобы не влиять на реальные производственные данные.
Переменные среды полезны, поскольку они позволяют изменять, какие из ваших сред используют среду стороннего сервиса, путем изменения ключа API, конечной точки или того, что сервис использует для различения сред.
Код, который вы развертываете, должен быть предсказуемым, поэтому, не изменяя никакого кода, только конфигурацию вне кода, вы можете поддерживать эту предсказуемость.
Как я могу обеспечить безопасность этих файлов?
Это, пожалуй, один из самых важных пунктов – вам нужно убедиться, что вы обращаетесь с этими файлами осторожно и не проверяете их в git-репозитории. Раскрывая эти ключи путем случайной загрузки в публичное место, интернет может легко найти эти ключи и использовать их в своих корыстных целях.
Например, ключи AWS являются ценным источником. Люди запускают ботов с единственной целью – просканировать Github на наличие ключей. Если кто-то найдет ключ AWS, он может использовать его для доступа к ресурсам, например, для проведения биткоин-операций за ваш счет. Это не для того, чтобы напугать вас, а для того, чтобы вы знали, как избежать компрометации ваших ключей.
Как же обеспечить их безопасность? Самый простой способ – добавить файл окружения, в котором хранятся эти ключи, в файл .gitignore.
Для этого просто откройте существующий файл .gitignore или создайте новый в корне репозитория и добавьте имя файла в новую строку:
# Inside .gitignore .env
Если вы хотите стать более продвинутым и сделать так, чтобы этого никогда не произошло с репозиторием, вы можете ознакомиться с такими инструментами, как git-secrets от AWS Labs или GitLeaks, для которого даже существует Github Action для упрощения интеграции с Github.
Gatsby и переменные окружения
Gatsby по умолчанию делает два файла доступными в рамках рабочего процесса переменных окружения, которые делают эти значения доступными в клиенте: .env.development и .env.production. Они соотносятся со скриптами gatsby develop и gatsby build для разработки или создания вашего сайта.
Чтобы использовать эти файлы в процессе разработки и сборки Gatsby, Gatsby требует, чтобы вы добавили к этим переменным префикс GATSBY_. Это также работает, если вы хотите, чтобы они были доступны на уровне процесса ОС.
Хотя вы можете интегрировать dotenv, если у вас более сложные потребности или вы не хотите использовать префикс GATSBY_, ваш путь наименьшего сопротивления, вероятно, заключается в том, чтобы просто следовать пути Gatsby при работе в Gatsby.
Netlify и переменные окружения
Netlify предоставляет возможность добавлять переменные окружения как часть настроек Build & deploy, которые подхватываются в процессе сборки.
К счастью, Netlify позволяет легко добавить любую переменную окружения в процесс сборки! Чтобы добавить переменную, вы можете просто перейти в раздел Environment на странице настроек Build & deploy вашего проекта и добавить переменную в раздел Environment variables.
Мы расскажем вам об этом чуть позже.
Шаг 1: Создание сайта «Hello, World»
Для нашего руководства мы создадим действительно базовый пример сайта Gatsby только для того, чтобы протестировать его.
Хотя это не совсем обычный случай использования переменных окружения, где обычно они используются для таких вещей, как ключи API и конфигурации сервисов, это даст вам отличное представление о том, как это работает.
Мы будем использовать созданный мной Gatsby Sass Starter, который даст нам отправную точку и добавит “Hello, [Environment]” в зависимости от того, где он запущен.
Чтобы начать, давайте создадим наш локальный проект с помощью Gatsby CLI. Перейдите в то место, где вы хотите сохранить этот проект, и запустите его:
gatsby new my-env-project https://github.com/colbyfayock/gatsby-starter-sass
Вы можете изменить my-env-project на любой каталог, в котором вы хотели бы создать этот проект, но после выполнения этой команды у вас будет проект в этом новом каталоге.
Чтобы начать работу, запустите yarn develop, чтобы внести изменения локально, или yarn build, чтобы скомпилировать ваш новый сайт.
Как только вы будете готовы к работе, вам нужно будет добавить этот проект на Github. Если вы не знаете, как это сделать, вы можете узнать, как добавить существующий проект на Github здесь.
Шаг 2: Создание локальной переменной окружения с помощью Gatsby
Наш следующий шаг – создать локальное окружение и добавить изменение, которое позволит нам убедиться, что оно работает.
Чтобы начать, давайте сначала создадим новый файл в корне нашего проекта под названием .env.development. Он может спросить вас, действительно ли вы хотите использовать префикс ., убедитесь, что вы ответили “да”!
Внутри этого файла добавим:
# Inside .env.development GATSBY_MY_ENVIRONMENT="Development"
Далее, чтобы не забыть это сделать, давайте добавим этот файл .env.development в .gitignore, чтобы случайно не зафиксировать его в истории git. Если у вас еще нет файла .gitignore, убедитесь, что вы создали его в корне вашего проекта.
Наконец, чтобы проверить, что это работает, давайте откроем pages/index.js и заменим содержимое нашего тега
на вариацию “Hello, world!”:
<h1>Hello, {process.env.GATSBY_MY_ENVIRONMENT}</h1>И если мы сохраним это изменение и откроем его в нашем браузере, мы должны увидеть “Hello, Development”!
Следуйте вместе с Commit!
Шаг 3: Развертывание веб-сайта в Netlify
Итак, мы создали наш сайт с помощью простой переменной окружения. Далее нам нужно развернуть сайт в Netlify. Если вы этого еще не сделали, нам нужно добавить наш сайт на Github или к другому провайдеру Git. Убедитесь, что это настроено, прежде чем продолжать.
После создания учетной записи и входа в Netlify давайте нажмем кнопку “Новый сайт из Git” на главной панели, выполним инструкции по подключению Github или другого провайдера Git к Netlify, а затем найдем свой новый репозиторий.
После выбора хранилища вам будет предложено настроить процесс сборки. К счастью, Netlify может определить, что мы используем сайт Gatsby, и предварительно заполнить его для нас. Если вы не добавили ничего особенного, сохраните базовую конфигурацию для использования gatsby build для сборки вашего проекта и public/ для вывода.
Теперь, прежде чем мы нажмем кнопку Deploy, есть одна вещь, которую мы хотим добавить, и это наша переменная окружения!
Прямо над кнопкой Развернуть сайт находится кнопка Advanced. Нажмите ее, и вы увидите новый выпадающий список с дополнительной кнопкой Новая переменная.
Нажмите кнопку New variable, добавьте нашу переменную GATSBY_MY_ENVIRONMENT в качестве новой переменной и добавьте Production в качестве значения. И, наконец, нажмите кнопку Развернуть сайт!
После этого вы сможете наблюдать за развертыванием вашего сайта, а по завершении вы увидите ваш новый сайт с надписью “Hello, Production”!
Где можно добавить или обновить дополнительные переменные в Netlify?
В нашем примере мы добавили только одну переменную во время настройки. Но Netlify позволяет вам добавлять или обновлять любые другие переменные, которые вы захотите.
Если вы захотите изменить эту переменную или добавить другие, вы можете перейти в раздел Environment в настройках Build & deploy, где вы можете редактировать и добавлять любые другие переменные в разделе Environment variables.
Оригинал: “https://www.freecodecamp.org/news/what-are-environment-variables-and-how-can-i-use-them-with-gatsby-and-netlify/”