[TIL] env 환경변수 설정

오늘 발생한 이슈는 local 환경에서 정상 호출, 하지만 개발계에서 계속 비정상적인 API주소가 매핑되며 405 에러를 return 했다.

문제의 원인은 개발계 빌드파일을 관리하는 vercel에 환경변수 세팅이 누락되어 발생했고, 환경변수 세팅을 별도로 세팅해줘야 하는 이유는 .env 파일이 gitignore 리스트에 포함되어 있어서 vercel은 환경변수를 찾지 못한 것이었다. 따라서, 환경변수를 추가한 뒤 Redeploy를 실행시켜 이슈를 해결했다.

하지만, 처음에는 middleware가 endpoint를 제대로 찾지 못해 token 발행이 비정상 작동하는 것으로 의심하고 삽질을 잠깐(?)동안 하다가, 클라이언트 -> 미들웨어 과정에서 발생하는 것 같다는 선임의 피드백을 통해 Network tab을 통해 Request URL이 잘못된 것을 추적할 수 있었다.

클라이언트에서 오더버튼 클릭 시, 즉 서버에 call할 때 환경변수가 매핑되어야 할 위치에 undefined이 프린팅 되는 것이었고

 const orderUrl = `${process.env.NEXT_PUBLIC_MIDDLEWARE_URL}/on-orders/${branchKey}`

local 환경에는 존재했던 env 환경변수가 개발계에는 동일하게 매핑이 되지 않았던 것을 확인했다.

해결은 간단했지만 의심가는 코드를 바로 찾지 못한 게 아쉬웠고,
유저의 액션이 발생했을 때의 흐름을 단계적으로 생각하지 않았던 접근이 원인을 바로 알아낼 수 없었던 트리거였다고 생각한다.

삽질을 줄이기 위해선
1) 액션 발생 후 로직의 흐름을 단계적으로 파악해보고
2) 더 많은 버그를 만나며 경험을 쌓는 수밖에 없을 것 같다.