api를 사용하여 개발을 하다보면 API_KEY, Admin_Id 등 처럼 외부로 알려지면 안되는 보안이 필요한 값들이 있다. 이러한 값들을 보안이나 유지보수를 좋게하기 위하여 .env라는 파일에 환경변수로 만들어서 변수를 꺼내와서 사용하게 된다.
이번에 만들어본 것도 API_KEY를 발급받아서 사용해야했기 때문에 환경변수로 만들어 사용하던 중 제대로 알지 못하고 계속 검색을 해서 사용했기 때문에 이번에 내가 정리를 하고자 간단하게 작성하려한다. Vite와 CRA는 환경변수 사용방법이 다르기 때문에 Vite빌드 도구를 활용한다는 가정하에 작성한다.
먼저, 최상위 루트에 .env라는 파일을 만든다. 그리고 잊지 말아야하는게 .env파일을 반드시 gitIgnore에 추가해줘야한다. 추가를 하지 않으면 깃에 그대로 .env파일이 올라가서 이거 사용해주세요~라고 홍보를 하는 꼴이니 gitIgnore에 추가해주어 git이 무시해야하는 의도적으로 추적되지 않은 파일로 지정해주자.
그다음 .env파일에 VITE_로 시작되는 변수를 만들면 된다. 예를 들어, 값이 1a2b3c4d5e6f인 API_KEY를 환경변수로 사용하려면
VITE_API_KEY=1a2b3c4d5e6f이런식으로 작성해 사용할 수 있다. 그다음, 환경변수를 불러올 때 import.meta.env.로 접근하여 값을 사용할 수 있다.
import.meta.env.VITE_API_KEY이런방법으로 값을 불러올 수 있다.
이러한 방법으로 크게 어렵지 않게 사용할 수 있었다. 하지만 배포환경에서 문제가 발생했다. 개발환경에서는 분명히 key도 잘 받아와져서 서버통신이 잘되었는데 배포환경에서는 key가 자꾸 undefined로 떠서 통신이 되지 않아 데이터를 불러오질 못하는 문제가 발생하였다. 배포는 Netlify로 하였는데, 구글에 검색해보니 Netlify에 프로젝트를 연결시키고 따로 환경변수를 저장해줘야 된다는 것이였다.
방법은
1. 프로젝트를 Netlify에 연결시켜준다.
2. Netlify 홈페이지에서 배포가 완료되어 생성된 사이트를 들어가 Site configuration에 들어간다.
3. 그다음 메뉴에 Environment variables메뉴가 있을 것이다.
4. Add a variable 버튼을 눌러 import environment variables를 선택한다.
5. 그다음 Contents of .env file 입력란에 개발환경에서 .env파일에 입력했던 환경변수를 그대로 입력해주고 Import variables 버튼을 눌러서 저장을 해주면 Netlify에서 환경변수 키값을 정상적으로 불러올 수 있었다.
그다음 꼭 Published 라벨이 붙은 최신 내역으로 들어가서 재배포를 해주어야 배포환경에서 에러없이 데이터가 잘 불러와지는 것을 볼 수 있다.
