[Next.js] socket.io를 vercel에 배포하면서 생긴 문제점 해결 과정

🙀 첫 번째 문제점

👉문제 내용

socket.io를 배포하면서 생긴 문제점과 그 해결과정에 대해서 얘기해보려고 합니다.

일단 저는 socket.io를 채팅 기능을 구현하기 위해서 사용하고 있었습니다.

Next.js만으로 socket.io 채팅을 구현을 했는데 ...

로컬에서 개발할 때는 실행이 잘됐지만 vercel로 배포를 해보니 오류가 발생했습니다.

 

👉문제 원인

vercel에서는 websocket 연결을 유지할 수 없기 때문입니다.

 

✨해결 방법

따라서 Node.js로 간단하게 socket 서버를 따로 만들어준 후 AWS의 EC2로 배포했습니다.

아래 코드처럼 http서버를 이용해서 socketio 서버를 생성했습니다.

// index.ts

import express, { Express } from "express";
import { createServer } from "http";
import { Server } from "socket.io";
import cors from "cors";

const app: Express = express();
app.use(cors());
const httpServer = createServer(app);
const io = new Server(httpServer, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
    credentials: true
  }
});

...

---

🙀 두 번째 문제점

👉문제 내용

첫 번째 문제는 해결됐지만 두 번째 문제가 생겼습니다.

위에 코드처럼 local일 때는 프론트 서버도 http고 socket 서버도 http이기 때문에 문제가 발생하지 않았습니다.

하지만 배포를 하고보니 ssl 인증 관련 오류가 발생했습니다.

 

👉문제 원인

프론트 서버가 https가 되었기 때문에 https와 http 간 통신이 되어버려서 불가능해졌습니다.

https가 http보다 보안적으로 좋기 때문에 https에서 http로 요청을 하는 것이 불가능합니다.

결론적으로 https끼리 통신하도록 만들어야하기 때문에 ssl 인증서를 추가해라 이 얘깁니다.

 

✨해결 방법

이를 해결하기 위해 생각한 방식은 http로 요청이 들어왔을 때 https로 리다이렉션 해주기였습니다.

1. nginx 이용하기  👉 실패ㅠㅠ nginx를 이용해서 리다이렉션 되도록 설정했는데 동작이 안됐습니다..

2. AWS의 로드 밸런서 이용하기 👉 성공!!!

 

모든 과정을 여기에 다 적기에는 포스팅이 너무 길어질 것 같아서 로드 밸런서 생성은 따로 포스팅했습니다.

AWS의 Application Load balancer 생성하기 (HTTP -> HTTPS)

[AWS] Application Load balancer 생성하기 (HTTP -> HTTPS)

---

✨결론
1. nodejs 로 socketio 코드 작성후 ec2로 배포했는데 에러 발생 
2. 에러의 원인은 socket은 http를 사용하는데 front의 vercel에서는 https를 사용하기 때문
3. 따라서 socket 주소를 https를 거쳐가도록 로드밸런싱 설정
4. 문제 해결 두둥!

 

+) 추가 (딱히 별 내용 없음)

이걸 해결한 다음에 생각해보니깐 리다이렉션을 하지 않고 socket 서버를 생성할 때 https 서버를 이용했다면 더 간단하지 않았을까 하는 생각이 드네욥... 결국 ssl 인증서를 추가해야하는 것은 똑같지만여..

이번에는 로드밸런서를 이용해보았지만 다음에 socket을 쓸 일이 있다면 nginx 또는 https 서버를 이용하는 방식으로 구현해보고 싶습니다! 다양한 방법을 알아놓으면 좋으니깐요.. nginx를 삽질하면서 nginx에 대해서 좀 더 공부해보고 싶어졌습니다..!