🤔 Deploying using heroku on react, koa, mongoDB Error catch

기존에 프로젝트를 배포할 때 클라이언트측만 배포했었기 때문에 주로 netlify로 쉽게 배포하였다.

그러나 이번에 백엔드와 연동한 프로젝트를 배포하려니 나름 과정이 까다로웠다.

heroku라는 클라우드 플랫폼에서 배포를 하였는데 어느 에러 하나 때문에 수일동안 애를 먹었다.
(2틀정도 이것을 해결하려 고군분투했다ㅜ.)

에러의 상황은 다음과 같았다.

배포를 하기전에는 API 요청이 잘 되었는데 배포를 한뒤에는 API 요청이 안되는 상황이었다.

무엇이 문제인지 몰라 하나씩 뜯어봤다.

• axios instance의 baseURL을 node.env(development or production)에 따라 선택적으로 바꿔주기

• cors npm에 적용하기

등등 여러가지 경우들을 적용해보았지만 에러가 해결되지 않았다.

열심히 구글링을 하다 어떤 아티클을 보고 뭐가 잘못됬던건지 깨달았다.

문제는 바로 몽고디비 URI였다.

기존에는 local mongodb uri에 연결되있었다.(mongodb://localhost:27017/blog)

이렇게 설정해놨을 때 로컬에서는 데이터베이스가 조회가 되지만 배포를 하여 해당 도메인으로 접근하면 로컬 데이터베이스여서 접근하지 못하는 것이 문제였다.

따라서 이를 해결할 수 있는 방법은 mongoDB Atlas(online database service)를 이용하면 되는 것이다.

가입하여 cluster을 생성하고 기타 설정을 하여 URI를 얻어 해당 URI를 몽고 URI에 입력해주니 문제가 해결되었다.

아무래도 백엔드 프로젝트를 처음하여 여러가지 모르는 상황이 많으니 이를 해결하는데 오랜 시간이 걸렸던 것 같다.

그래도 고군분투하여 잘 해결해서 통쾌?하고 다음에 해당 사항에 유의하도록 해야겠다.

Reference

https://coursework.vschool.io/deploying-mern-app-to-heroku/