(1) 백엔드 배포
여러 백엔드 배포 사이트가 있다는 건 봤지만... 우선 중요했던 건 서버가 무겁지 않기 때문에 무료 플랜으로 간단하게 올릴 수 있어야 하고! 깃허브 연동 기능이 있어야 하고! MongoDB를 연결하기 쉬워야 한다!
여러 기술 블로그들을 보니 Render와 Heroku를 많이 사용하시는 것 같았는데, Heroku는 최근 무료 플랜을 종료하였다기에 Render로 결정!
Render의 장점!
- 무료 플랜 제공!
- 깃허브 자동 배포 가능!
- Node.js, Express 같은 백엔드 프레임워크 지원!
- MongoDB Atlas와 연동이 가능하여 데이터를 저장하고 처리하는 데 적합!
(2) 프론트엔드 배포
프론트엔드 배포야 워낙에 Vercel이 유명하기에, 그리고 한 번쯤은 사용해보고 싶었기에 고민없이 바로 선택했다!
(3) 배포 순서
우선 백엔드가 배포되어야 프론트엔드에서 호출해야될 API의 URL을 명확히 알 수 있기 때문에, Render로 백엔드를 먼저 배포하고 그 URL을 프론트엔드 코드에 연결하는 방식으로 진행할 것이다!
2. Render 배포 방법
나는 프로젝트 레포지토리 암에 있는 백엔드 폴더를 배포할 것이기 때문에 루트 디렉토리를 /backend로 설정하였다!
Build Connand와 Start Command는 본인이 설정해둔 스크립트에 따라 작성하면 된다!
백엔드의 서버 작동 파일은 server.js였고, 따라서 package.json에
"scripts": {
"start": "node server.js"
}이렇게 작성해두었기 때문에 위와 같이 스타트 커맨드를 작성하였다!
밑에 보면 Environment Variables 섹션이 있는데 여기에는 작성해둔 환경변수를 넣으면 된다!
나는 MongoDB를 사용했기 때문에 MONGO_URL 환경변수를 넣어주었다!
내 프로젝트에 관련된 것만 값을 수정해주고 나머지는 기본값으로 해서 배포 시작!
3. MongoDB Atlas 설정
별다른 문제가 없다면 Deploy는 성공할 것이다!
이제 배포된 url을 통해서 API 테스트 진행할 것인데, 나는 api/characters로 들어가면 내가 데이터베이스에 저장해둔 리스트들이 나와야한다. 그치만 완전 오류가 떴고,.. Render Log를 보니 DB 연결이 실패했다고 되어있었다.
'IP 화이트리스트? 에 없는 IP가 접근하려고 한다' 라는 오류 발생!
해결 방법을 찾아보니 MongoDB Atlas에서 IP 주소 허용 설정을 해줘야하는 거였다...
MongoDB Atlas 접속해서 내 프로젝트DB의 클러스터로 들어간 다음 'Network Access' 파트로 들어가 접근 가능 IP 주소 목록에 0.0.0.0/0을 설정한다! 이렇게 되면 모든 IP에서의 접근이 가능하게 됨!
그리고 User 권한도 Read and Write to any database로 바꾸어주었다!!!
최종적으로 백엔드 서버(+MongoDB) 배포 완료!!!!
중간 로그들은 테스트 로그로 넣어둔 건데 수정을 못 해서 그대로 뜬다...
이제 배포된 URL을 통해 프론트엔드 배포를 해보자!
4. Vercel 배포 방법
우선 프론트엔드 폴더에도 .env를 생성해서 환경변수를 적어준다!
REACT_APP_API_URL로 설정하여 위에 서버 url을 작성했다.
이제 프론트 코드에서 그냥 로컬 서버로 전송하고 있었던 API URL들을 REACT_APP_API_URL로 수정해준다!
이제 Vercel로 들어가서 Github 프로젝트 레포지토리를 import 해준다!
브랜치 확인을 해주고!
루트 디렉토리를 frontend로 해준다!
프레임워크, 실행 커맨드들, 환경변수들을 작성해준다.
Deploy를 해주면 프론트엔드도 배포 환료!
이렇게 하면 Vercel에서 배포한 URL로 접속했을 시에 이렇게 로컬에서 돌리던 것처럼 뜬다!!
드디어 배포 완료!
🪄 이 별거아닌 프로젝트를 시작한 이유../
- 직접 배포를 해보는 경험을 쌓고 싶다!
- 짧은 기간으로 마무리하고 싶다!
- 간단한 도감 프로젝트지만, 포켓몬처럼 api가 제공되는 것이 아닌, 직접 제로부터 설계하고 싶었다!
- 서버 배포도 해보고 싶었다!
라는 이유로 시작하게 된 프로젝트라 사실 디자인에도 신경을 많이 쓰진 않았다.
따라서 배경 이미지도 AI 생성 이미지를 사용하였고, 배포 이외에 집중했던 부분은 캐릭터 카드 디자인이 아닐까 싶다 ㅎ0ㅎ 홀로그램 느낌을 내고 싶었고, 로열 티니핑과 기본 티니핑의 구분도 가능해야했다!
그리고 Hover 시의 디자인도 나름 신경 써봤다!!
무튼 노드 서버도 직접 설계하고 데이터베이스도 직접 설계하고! DB와 서버 연결부터 프론트엔드 연결, 배포까지 모든 걸 해본 프로젝트였다!
로컬에서 돌리는 프로젝트 기간은 약 3-4일 정도가 걸렸지만,
배포에서 시간을 꽤 소모했던 거 같다. 막상 보니 간단한 배포였지만, 데베 클러스터를 헷갈려서 며칠 때 DB 연걸 실패의 늪에 갇혀 끙끙 거렸고... Vercel 에서 브랜치 변경이 안 되어, 강제로 메인 브랜치에 머지해야되나 싶었는데 깃허브 레포에서 default 브랜치를 바꿨더니 쉽게 해결됐다
아는 건 없지만 그냥 처음부터 다 하고 싶다는 욕심 때문에 이래저래 오래 걸렸다...
그만큼 검색하여 공부한 것도 많았고 뿌듯하게 프로젝트를 마무리한 거 같다!
다음에는 좀 더 탄탄한 프로젝트를 진행해보고 싶다!
저는 Vercel에 전부 backend와 frontend 전부 다 배포시도했었는데 안돼서 우연히 글 발견해서 나눠서 올렸더니 잘 됐어요! 정말 감사드릡니다!