next.js와 mongodb로 개인 프로젝트를 진행하던 중 임시로 배포를 해봤다. 이전 react 프로젝트를 netlify로 배포했었고, netlify에서 next.js 배포도 지원하기 때문에 금방 할 줄 알고 netlify로 먼저 배포했었다. 사담인데 vercel이 훨씬 배포가 쉬웠다...next.js 개발한 곳에서 vercel도 개발했으니 어찌보면 당연하긴 한데 이 쪽도 push시 자동 배포가 안 되어서 원인을 찾느라 고생 꽤나 했다 (따로 레포지토리를 연결하고 브렌치 지정해주니 정상 작동).
직면한 문제
문제는 netlify 배포에 성공하고 나니 페이지는 불러오지만 db에서 데이터를 가져오지 못하는 것이었다. console을 확인해도 network를 확인해도 에러에 대한 명확한 원인이 없어 이걸 어떻게 해야 하나 싶었다. 개발 환경이랑 build 후 npm run start에서는 문제 없이 작동하는데 netlify와 vercel등에 배포한 경우에만 데이터가 불러와지지 않았다.
한참을 구글링 하던 중 어떤 분이 vercel로 배포한 후 에러가 떴는데 vercel의 log 기능으로 에러를 잡았다는 글을 작성하신걸 보았다. netlify도 실시간 log 기능이 있는지 모르겠는데 일단 나는 찾지 못 했고 에러도 해결하지 못 해 결국 log확인을 위해 vercel로 다시 배포했다.
vercel log에서 만났던 오류들...
next.js 환경변수에 대한 공부를 다시 해보기도 하고, 파일들의 위치를 재구성해보기도 하고, 접속 가능한 ip주소를 다시 설정해보기도 하고... 그 사이에 너무 많은 시도가 있었고, 동선이 복잡해 오류가 변경된 모든 상관관계를 파악할 수 없어 여기엔 만났던 오류메시지만 따로 모아놓는다. 아래 오류들을 한 번에 만난건 아니고, 무언가 시도할 때 마다 에러가 계속 바뀌었다.
1. warning: useNewUrlParser is a deprecated option
경고메지지라 배포 문제와 큰 상관은 없지만, 함께 발견한 경고메시지이니 기록해둔다. useNewUrlParser는 db연결시 사용하는 옵션인데 사용이 안 된다 하니 useUnifiedTopology로 바꿨고, 이 쪽도 경고가 나서 결국 옵션을 없앴다.
2. MongoServerError: bad auth: Authentication failed
서버 인증 오류. db 연결이 실패했다는 뜻이다. api의 문제가 아니라 db부터가 연결이 안 된 것. 이것을 알게 된 것 만으로도 큰 수확이라 생각한다.
3. Error: querySrvENOTFOUND
Error:querySrv ENOTFOUND
mongodb 드라이버가 호스트 이름을 IP 주소로 확인할 수 없고 mongodb 연결 URL의 형식이 올바르지 않거나 DNS 구성 방식에 문제가 있는 경우 발생한다고 한다 - chat gpt
4. TypeError: Cannot read properties of undefined (reading 'startsWith')
TypeError: Cannot read properties of undefined (reading 'startsWith')
문자열이 제대로 구성되어있지 않거나 누락되어있는 경우 발생한다고 한다 - chat gpt
5. MongoParseError: Invalid scheme, expected connection string to start with "mongodb://" or "mongodb+srv://"
mongodb 연결 주소가 mongodb:// 또는 monogodb:srv://로 시작해야 한다는 에러. 하지만 내 경우엔 monogodb:srv://로 잘 시작하고 있었고 주소의 다른 부분이 문제였다.
원인
위 내용들은 사실 잘 보면 전부 아래 원인들을 가리키고 있다. 나 또한 local에서는 개발환경이든 배포환경이든 정상 동작하고, 배포 사이트에 배포한 것만 정상 작동하지 않는다는 부분에서 환경변수가 문제가 있다는 점은 알고 있었다. 다만 next.js와 mongodb를 처음 다루다보니 너무 많은 경우의수를 고민했고, 제대로 알지 못한 부분도 있어서 해결하는데 무려 36시간을 쓰는 기염을 토해버렸다.
1. 잘못된 db 연결 주소
한참을 이것저것 시도하던 중 db연결 주소를 다시 확인했는데, 주소가 application 연결용 주소가 아닌 VS Code 연결용 주소로 되어있었다... 주소의 parameter가 빠진 것이다. local에서 정상작동하니 주소가 잘못되었을줄은 생각도 못 했다. 주소를 가져올 때 확인을 잘 하자. 하지만 이 때 까지만 해도 주소를 바꿔도 데이터가 불러와지지 않았다.
2. 잘못된 환경변수 대시보드 설정
.env파일에서 db연결 주소를 변수화 할 때 코드로 인식하는 부분이 있어 따옴표를 사용해 문자열로 만들었는데, 배포 사이트 대시보드에서 환경변수를 설정할 때에는 따옴표를 빼주어야 했고, 이걸 몰랐다. 코드화 되지 않도록 대시보드의 value에도 따옴표를 그대로 넣었고, 그게 맞다고 생각하고 있었는데 설마설마 하며 따옴포를 빼고 재배포 한 후 36시간만에 데이터가 불와지는 광경을 봤을 때의 기분이란...
고생한 후기
에러 해결에 이렇게 오랜 시간을 사용한 건 처음이라 심적 고통이 길었다. 게다가 하나에 꽂히면 끝장을 봐야 하는 성격이라 잠도 못 자고 새벽 6시쯤에야 겨우 선잠에 들었다가 눈 뜨자마자 다시 코드를 봤다. 스트레스를 받으니까 콩팥있는 부근도 찌릿하게 아파와서 몸도 마음도 뇌도? 고생을 많이 했다. 해결하고보니 별 것 아닌 것들이지만 고민하며 이것저것 시도해보고 공부했으니 원인의 크고 작음이야 중요하지 않다고 생각한다. 개발 공부를 계속 하는 이상 앞으로 이것보다 고생할 일도 많을텐데.
'ToyProject > InventoryManagement' 카테고리의 다른 글
| 풀지 못 한 문제(실시간 시계) (0) | 2023.10.20 |
|---|