vercel 배포한 환경에서 .env 사용하기

좌: 환경변수 설정 전 api가 설정이 안되어있다!! / 우: 환경변수 설정 후 api가 맞게 설정되었다!!

vercel에서 env 파일 내용을 못 불러온다고?

개인 플로그 프로젝트를 진행 중 vercel로 배포를 하게 되었다.

개발환경과 배포환경의 base URL이 달라서 각각 적용해주기 위해 env를 나누어서 저장해둔 상태로 배포환경을 열어보니.. 아무것도 없다ㅜㅜ 생각해보니 저번 cicd를 github action으로 진행할 때에도 env에서 필요했던 내용은 secret key로 저장을 하던가 export를 통해 env 키값을 가져왔었던게 떠올랐다. 그래서 확인을 해보니 역시나 env 내용을 못 가져오고 있었다.

그래서 확인을 해보니 github action 처럼 vercel에도 환경변수를 지정하는 곳이 있었다!!

 

vercel에서 환경변수 저장하기

vercel 홈페이지로 이동 후 환경변수를 설정할 프로젝트를 클릭 후 settings 탭에 들어간다. 홈페이지에서 바로 settings 탭에 들어가서 설정하면.. 적용이 안된다.. 나도 알고싶진 않았지만.. 이거때문에 많이 헤맸다. 반드시 프로젝트 페이지에 들어가서 settings 탭에 들어가서 설정해야한다.

 

그리고 key와 value의 값에 각각 저장 후 save 버튼을 클릭하면 값들이 저장이 된다.

add another 버튼을 클릭하면 여러개의 키값들을 정의할 수 있다.

 

그렇게 키와 값을 저장하면 아래와 같이 등록된 것을 확인할 수 있다!

 

 

환경변수 설정된걸 확인하려면??

이 부분이 가장 중요하다!! 환경변수를 설정했다고 바로 설정한 환경변수가 적용되지 않는다. 기존에 local에서도 env 파일을 수정하거나 생성하면 터미널을 껐다 켜듯이 vercel에서도 그런 조작이 필요하다. vercel 에서는 재배포를 해줘야만 업데이트된 환경변수를 적용할 수 있다. 

 

글을 마무리하며

api가 local과 배포환경에서 달라지면서 생긴 이슈였는데 결국... local과 배포환경에서 같은 api를 사용하게 되었다..하하.. 많은 것을 공부했다고 긍정적으로 생각하기로 했다!