TRPC websocket 사이드 프로젝트 도전기, 실패

Sal Jeong·2023년 5월 8일
0

지난 한달동안은 T3 stack을 사용해서 웹소켓과 레디스를 활용한 프로젝트를 만들고 deploy까지 하려고 했었다.

그런데 계속해서 deploy 단계에서 막히는 중이다.

다시한번 알고있는 사실을 정리하는 차원에서 여기 정리해봄

내가 장고로 websocket을 적용했을때 어떻게 했었느냐...

aws 인스턴스에 올렸을 때 기준으로,

https://www.geeksforgeeks.org/configuration-for-django-websocket-application-on-ubuntu-server/
을 보면서 기억을 되살려 보면

  1. 먼저 웹서버 layer에서는 nginx, 프로세스 매니저 supervisor가 필요하다.
  2. uwsgi로 python 으로 만들어진 웹 어플리케이션과 웹서버를 연결한다.(요즘에는 gunicorn이나 daphne같은게 좋다고 하더라)
  3. 어플리케이션 레벨에서는(django) django-channels로 웹소켓 서비스를 빌드한다.
  4. uwsgi에 sock파일 두가지를 등록해서 모듈을 연결하고 nginx에서도 마찬가지로 해준다.
  5. redis-server도 넣어준다.

까지를 테스트로 작업을 해두었는데.. 아쉽게도 실제 상용화는 하지 않았었다.

장고로도 했는데, next와 trpc 프로토콜로도 당연히 할수 있는 것 아닌가? 라고 생각했다.

https://github.com/trpc/examples-next-prisma-websockets-starter

그리고 trpc에서 예시는 쉽게 찾을 수 있었다.

생각보다 쉽겠는걸...? 이라고 생각했지만...

1. 첫번째 삽질 - t3 stack

https://github.com/jihyeonjeong11/t3-chat

사실 위 프로젝트는 어떤 유튜브 코드를 클론 코딩한 것이다.
왜냐하면 socket-io도 전에 써보았으니, ws 디펜던시로 처음부터 코딩해서 redis까지 붙이자! 라고 생각했었다.

로컬 상황에서 빌드까지는 문제 없었지만 docker로 빌드했을 때 ws가 동작하지 않는 문제가 발생했다.

가장 큰 실패원인은 nextjs와 prisma, websocket을 정확하게 이해하지 못했던 것에 있다.

그러니까... 장고를 기준으로 생각하면 module별로 나눠서 uwsgi에서 두개를 실행하는 것이 포인트인데.. 지금은 nextjs를 aws amplify와 같은 서버 인스턴스 하나와 prisma로 생성되는 db instance하나로 생성하기 때문에 이 부분을 정확히 어떻게 dockerize하고 deploy 하는지 확실하지 않은 것이 무제였다.

또한 처음보는 것들을 되는대로 때려넣다보니 코드가 잡탕이 되어버렸다.
pnpm
trpc
ws
docker(nextjs로는 처음이니까)

deploy는 docker image를 fly.io로 진행하려고 했지만

새롭게 나오는 버그들을 해결하다 보니 신입때 많이 느껴보았던 뭘 하는지 알 수 없는 상황이 되어버렸다.

2. t3 stack 구조가 문제인가?

https://github.com/jihyeonjeong11/trpcWebsocketchat

생각을 돌려서 t3 stack을 버리고 다시 trpc websocket starter 코드부터 시작하기로 했다.

역시 dev 와 local에서의 빌드는 크게 문제가 없었지만, 역시 docker로 빌드하는 과정에서 위의 문제를 완벽하게 해결할 수 없었다.

3. 3번째 repo는 아직...

https://www.youtube.com/watch?v=e5Cye4pIFeA&t=276s&ab_channel=Joshtriedcoding

https://github.com/joschan21/nextjs-realtime-chat/blob/master/package.json

위 유튜버의 이야기를 들어보니 trpc 웹소켓 자체가 아주 cryptic해서 어렵다는 이야기가 있더라.. 직접 해보니 그건 맞는 이야기 같고

이분은 pusher라는 서드파티를 사용해서 trpc 없이 nextjs와 wevsocket 채팅 앱을 만드는 비디오를 올려놓았다.

https://github.com/michaelongaro/Squeak

또한 t3 stack과 socket.io로 멀티플레이어 카드 게임을 만든 사람도 있는데, 솔직히 서드파티를 사용하는 것은 뭔가 분한 느낌인데, 어쨋든 시간을 내서 계속 진행해보아야 하겠다.

profile
행복하기 위해 코딩합니다. JS 합니다.

0개의 댓글