환경 변수는 연결 주소만 공개

Next.js와 WebSocket 경계

브라우저에서 접속해야 하는 Socket.IO 서버 주소만 NEXT_PUBLIC_SOCKET_SERVER_URL로 노출하고, 인증 토큰과 서버 비밀 값은 클라이언트 번들에 넣지 않습니다.

1. 프로젝트 루트

.env.local에 개발 주소 기록

NEXT_PUBLIC_SOCKET_SERVER_URL=
http://localhost:4100

브라우저에 보여도 되는 값만 NEXT_PUBLIC_ 접두사를 붙입니다.

2. Next.js 빌드 경계

공개 변수만 클라이언트 번들로 인라인

비밀 값과 분리 접두사가 없는 환경 변수는 서버 코드에서만 읽는 값으로 둡니다.

클라이언트가 런타임에 임의의 서버 환경 변수를 읽는 구조가 아닙니다.

3. 클라이언트 컴포넌트

socket.io-client가 주소로 연결

const url =
  process.env.NEXT_PUBLIC_SOCKET_SERVER_URL;

io(url);

채팅 화면은 하드코딩된 포트 대신 배포 환경의 주소를 사용합니다.

4. 실시간 런타임

Socket.IO 서버가 영구 연결 유지

Next.js 앱과 분리 Node 서버, Cloud Run, VM, 관리형 실시간 서비스 중 하나로 운영합니다.

Vercel Functions를 WebSocket 서버로 쓰는 구조는 피합니다.