vercel로 배포한 앱에 .env(환경 변수) 적용하기

원티드 인턴십 2번째 기업 과제를 vercel로 배포 후 배포된 사이트를 확인해봤는데 브라우저 콘솔에 에러가 떠 있었다.

API 호출 결과인 result가 undefined라고 하는 것을 보아서 검색 API가 동작하지 않는 것 같았다.

재배포를 해보아도 마찬가지였다.

Network 탭을 확인해보니 status code는 200번이었지만 도메인 URL에서 이상한 점을 발견했다.

저 URL은 배포를 한 링크의 URL이고 실제 데이터를 받아오는 URL은 .env에 추가한 주소여야 했다.

그럼 .env 파일이 적용이 안 된 건가 싶었는데 .gitignore에 있는 내용도 vercel 배포 때 적용되는 줄 알았지만 아니었다.

다음 글을 참고해서 해결했다.
=> vercel에 무료로 배포하기

vercel에서 환경 변수를 따로 등록해줘야 배포된 사이트가 제대로 동작할 수 있었다.

Settings의 Environment Variables라는 메뉴를 찾아 다음처럼 로컬 .env 파일의 API URL과 TOKEN 내용을 추가해주었다. (URL과 TOKEN 부분은 모자이크 처리)

이후 재배포를 하니 올바른 API_URL을 통해 검색 데이터를 받아왔다. 👏👏