[웹챗] nest 소켓 서버 헤로쿠 배포 & 프론트 깃페이지 배포

벡엔드

개인 heroku

heroku를 통한 배포가 처음은 아니었지만(지금은 무기한 보류 중인 블로그 벡엔드를 node로 만들어서 배포했었다.) nest.js + socket.io로 배포하는 건 처음인 데다가 오래전 일이다 보니 잘 생각이 안 나서 조금 헤맸다. nest.js 자체의 특징인 ts기반의 배포 전 빌드 우선이라는 특징 때문에 기존 제네레이터로 만든 구성의 세팅으로는 바로 배포가 안된다.

그래서 npm 명령어 스크립트에 아래 2줄을 추가 해줄 필요가 있다.

    "prestart:prod": "rimraf dist && npm run build",
    "web": "npm run start:prod",

 

 

web이라는 명령어로 start:prod명령어를 실행하는 것과 그전에 파일들을 최신화하는 것이다. 이후 실행되는 start:prod의 경우 dist/main을 노드 서버로 실행하는 명령어다. 추가로 헤로쿠 설정에서 config를 추가해줄 필요가 있는데 컴파일하는 과정에서 환경변수나 npm config에 대한 부분을 설정하는 config다.

배포하는 앱의 setting

헤로쿠에서 지원 해주는 로그를 통해서 에러 부분을 잘살피고 구글링을 통해서 해결했고 어쨌든 성공적으로 배포를 끝마쳤다. 벡엔드 쪽을 수정하지 않는 이상 앞으로 해당 서버를 통해서 간단히 테스트를 할 예정이다.

more을 통해서 view logs를 확인 가능하다.

프론트엔드

프론트 같은 경우 채팅관련 설정 하는 부분과 채팅 컴포넌트 부분을 따로 분리해냈고, 전체적인 테스트코드를 점검하여서 기존에 오류가 나지 않던 타입추론 부분과, 여러 비동기 에러들을 어느 정도 파악해서 잡아냈다. 이 과정에서 많은걸 느꼈는데 유지보수 되지 않는 테스트코드가 오히려 개발에 방해가 된다는 것 과 비동기 테스트는 작성하기 어렵다는 것, 또 TDD를 한다고 해놓고 실제로 테스트 코드를 작성 안한 부분들이 많다는 것(소켓 테스트에 정신이 팔려서 컴포넌트 구성에 대해서 테스트를 안했다.) 등을 얻었다. 테스트 주도 개발등의 방법론에 대해서는 아직 조금 더 숙련이 필요할 것같다.

그후 기본적인 README를 수정하고, 깃페이지 배포를 준비해서 배포했다. 그 내용물은 아래의 링크로 확인 가능하다.

 

웹챗 채팅

https://yoonjonglyu.github.io/webChat/

webChat-demo

프론트엔드 Repo

https://github.com/yoonjonglyu/webChat

GitHub - yoonjonglyu/webChat: 간단한 채팅 웹

벡엔드 Repo

https://github.com/yoonjonglyu/webChat-server

GitHub - yoonjonglyu/webChat-server: webchat, socket.io, nest.js, 채팅서버