토이 프로젝트로 진행하던 Subway Tour가 이런저런 일들로 개발이 딜레이 되고 있었다.
[React] SubwayTour - 1. Firebase 연동
여자친구와 데이트를 하던 중, 서울의 지하철 역을 모두 한번씩 놀러가자는 얘기가 나왔다. 가봤던 역들을 일일히 설정하기도 어렵고, 새로운 역을 정하는 것도 어렵다고 생각해 개발자의 장점
velog.io
원래 년초에 완성해서 배포까지 마무리하려고 했지만 4월이 1/3이나 지나간 지금도 구현해야 할 것들이 산더미이다.
일단은 MVP(Minimum Viable Product)라고 부를 정도는 구현이 완료되었기에 일단은 배포를 해보고자 한다.
위의 블로그 글에서는 React와 Firebase만 사용해서 서버리스한 어플리케이션을 만들었지만,
회사에서 Node.js를 사용해야 했기에 새롭게 공부도 할 겸 Next.js + Node.js(express) + MongoDB를 이용해서 새롭게 만들게 되었다.
웹 개발에 관심이 많은 사람이라면 MERN이라는 말을 많이 들어보았을 것인데, 나는 React 대신 Next.js를 사용했다!
What Is The MERN Stack? Introduction & Examples
MERN stack is a React JS library to build web applications. Learn more about the MERN stack.
www.mongodb.com
원래는 AWS의 EC2를 통해 배포를 하려고 했지만, 비용이 생각보다 많이 나가는 관계로 무료 호스팅 사이트인 koyeb를 이용하고자 한다.
The fastest way to deploy applications globally
Koyeb is a developer-friendly serverless platform to deploy apps globally. No-ops, servers, and infrastructure management.
www.koyeb.com
아예 무료는 아니고, 한달에 $5.5의 크레딧을 주는데 두 개의 nano 인스턴스를 실행할 수 있으니 프론트와 백엔드를 모두 배포할 수 있다!
회원가입 및 로그인을 하고 App을 생성해보자.
깃허브와 도커 두 가지 방식으로 배포가 가능한데, 지금은 깃허브를 통해 배포를 진행할 것이다.
깃허브를 클릭하면, GitHub App을 설치하라고 나오는데 나는 배포를 진행할 레파지토리만 선택했다.
배포할 레파지토리를 선택하면 아래와 같이 간단한 설정을 통해 배포가 가능하다.
아래 설정들은 배포 이후에도 수정이 가능하기 때문에 처음부터 잘해야 한다는 강박증을 가질 필요는 없다.
추가로 설정해야 하는 부분은 토글을 열어 세팅해 주면 된다.
먼저, 나는 yarn이 아니라 npm을 사용했기 때문에 아래와 같이 Build, Run 커맨드를 수정해 줬다.
Work Directory는 따로 설정하지 않으면 프로젝트의 루트 디렉토리가 되는데, 건드릴 필요가 없어서 놔뒀다.
Autodeploy는 설정한 레파지토리의 브랜치가 업데이트될 때마다 자동으로 deploy가 이루어질지 체크하는 옵션이다.
환경변수도 여기서 설정이 가능하며, 헬스 체크를 위한 라우터 주소도 입력해 주면 배포 설정은 끝난다.
설정 완료 후 deploy 버튼을 누르면 배포가 이루어진다.
아래는 배포 이후 트러블 슈팅 과정을 정리했다.
가장 먼저, 라이브러리 버전이 맞지 않아서인지 에러가 발생했다.
MongoDB에는 Auto Increment 기능이 없어서, mongoose-auto-increment라는 라이브러리를 설치했는데 얘가 좀 옛날 라이브러리다.
로그에도 나오듯이 npm i --force 또는 npm i --legacy-peer-deps 명령어를 통해 라이브러리를 설치해야 하는데, koyeb에는 따로 npm 명령어를 고칠 수 있는 기능이 존재하지 않는다.
해결방법은 의외로 간단했다.
프로젝트의 루트 디렉토리에 .npmrc 파일을 생성해 아래의 한 문장만 넣어주면 된다.
legacy-peer-deps=true
https://stackoverflow.com/questions/74236185/how-can-i-install-with-tag-legacy-peer-deps-on-heroku
how can I install with tag "legacy-peer-deps" on heroku
I am trying to deploy my app onto heroku, yet I receive a build erorr where it fails to install the dependencies using npm install. Is there anyway I can install with "legacy-peer-deps"? ...
stackoverflow.com
빌드 성공!
안타깝게도 빌드는 성공했지만...
인스턴스 실행에는 자꾸만 실패했다
원인부터 말하자면, package.json 내 start script를 잘못 작성했기 때문이었다.
# 기존 스크립트
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npx tsc",
"start": "node app.js",
"dev": "concurrently \"npx tsc --watch\" \"nodemon -q dist/app.js\""
}
# 수정한 스크립트
"scripts": {
...
"start": "nodemon --exec ts-node src/app.ts",
...
}
개발 환경에서는 dev 만 실행했기 때문에 start 가 잘 동작하는지 어떤지 관심이 없었다..
js로 트랜스파일링하지 않고 바로 실행하기 위해 ts-node 라이브러리도 추가로 설치해 주었다.
이제 마지막이다..!!
설정도 다 잘해줬는데 애플리케이션이 자꾸만 뻗어버렸다.
이제는 단짝 친구가 되어버린 챗GPT에게 물어보니 Killed 에러는 Out of Memory로 인해 발생한다고 한다.
배포 버튼을 누르기 전으로 돌아가보자..
나는 프론트엔드와 백엔드를 모두 koyeb에서 배포하기 위해 nano 인스턴스를 선택했는데, 이 친구는 256MB의 메모리만 가진다.
이 작은 메모리로 무거운(?) 프로그램을 돌리려고 하니까 힘들어했던 것이다.
힘이 쎈 친구를 불러와서 처리해 주자.
야호 성공~! 😄
(로그 메시지는 수정이 필요할듯하다..)
처음으로 호스팅 사이트를 통해 배포를 해보는 거라 찾아볼 것도 많았고, 문제가 발생했을 때 스스로 해결해야 하는 게 어렵기도 했지만 그리 오랜 시간이 걸리지 않고 성공적으로 배포를 마무리할 수 있어 다행이다.
아쉽게도 micro 인스턴스로 배포했기 때문에 프론트는 다른 곳에서 배포를 해야 할 것 같다..