GatsbyJS + Netlify에서 환경 변수를 사용하는 데 어려움

내 포트폴리오 사이트를 GatsbyJS에서 만들고 Netlify에서 호스팅하고 있습니다.
제목대로 환경 변수로 헤매는 이야기와 그 해결책을 씁니다.

이 기사를 요약하면

Gatsby로 만든 사이트를 Netlify 등에서 호스팅한다면 환경 변수의 이름은 모두 GATSBY_부터 시작하는 것이 편하다.

주제에 들어가기 전에

잃어버린 이야기 전에 Gatsby와 Netlify 각각의 환경 변수를 설정하는 방법에 대해 씁니다.
이미 알고 계신 분은이 섹션을 건너 뛰십시오

Gatsby의 환경 변수

공식 문서는 이쪽

Gatsby는 기본적으로 .env.development와 .env.production의 두 가지 환경 변수를 지원합니다.

다음 코드를 작성하면 process.env.ENVIRONMENT_VARIABLES 형식으로 환경 변수를 호출할 수 있습니다.

gatsby-config.js

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

gatsby develop를 때리면 .env.developmentgatsby build 또는 gatsby serve를 두드리면 .env.production를 읽습니다.

Netlify 환경 변수

team > 대상 사이트 > Site settings > Build & deploy > Environment > Environment variables >
편집 변수

로 이동하면 Netlify에서 환경 변수를 설정할 수 있습니다.

다음은 스쿠쇼












Key 및 Value 각각에 임의의 값을 넣고 Save하면 다음 배포에서 활성화됩니다.

무엇을 잃었습니까?

드디어 본제입니다..env.* 파일을 리포지토리에 업로드하는 것은 좋지 않습니다.

그래서 하고 싶었던 것은 다음과 같습니다.

.env.development와 .env.production, 모두 로컬에만 놓고 개발시에만 사용

Netlify에 환경 변수를 저장하고 프로덕션 빌드에 사용

하지만 보통의 방식으로 Netlify로 저장한 환경 변수가 빌드시에 사용되는 일은 없었습니다.

해결책

.env.*의 변수와 Netlify에 저장된 변수는 모두 GATSBY_부터 시작합니다.

이었다.
.env.development 와 .env.production 이외의 장소에 보존되어 있는 환경 변수라도, ​​GATSBY_ 접두사를 가지고 있으면 사용할 수 있는 것 같습니다.

덤

여기까지 여러가지 썼습니다만, 제 사이트는 개발 환경에서도 프로덕션 환경에서도 사용하는 변수의 내용은 함께입니다.

따라서 gatsby-config.js의 설명을 다음과 같이 변경하고,

gatsby-config.js

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

.env.development와 .env.production를 .env에 통합하고,
.env의 모든 변수에 GATSBY_ 접두사를 부여하면,

.env

- ENV_VAR = XXXXX
+ GATSBY_ENV_VAR = XXXXX

같은 값을 두 개의 파일에 기재할 필요가 없어져 조금 쉬워졌습니다.
죄송합니다.