Next.js를 이용해 웹 애플리케이션을 배포하고 다른 PC에서 WebSocket(ws)을 통해 신호를 처리하려고 할 때 반영되지 않는 이슈는 CORS 설정과 HTTPS 요구사항 또는 네트워크 설정의 문제일 가능성이 큼.
주요 원인 및 상황 분석
1.
CORS 설정 문제
•
WebSocket도 기본적으로 CORS 규칙을 따르지 않지만, 브라우저에서 WebSocket 연결을 초기화할 때 CORS 정책이 간접적으로 영향을 줄 수 있음.
•
예를 들어, 다른 PC에서 Next.js 서버에 연결하려고 할 때:
◦
ws:// 요청이 브라우저 보안 정책에 의해 차단될 수 있음.
◦
서버가 Access-Control-Allow-Origin 헤더를 제공하지 않으면 연결이 실패할 가능성 존재.
•
특히, 브라우저에서 WebSocket을 사용할 때 프론트엔드와 WebSocket 서버의 출처(origin)가 다르면 문제가 발생.
2.
HTTPS 미설정
•
HTTPS 환경이 아닌 경우:
◦
브라우저가 보안 콘텐츠 정책(Mixed Content Policy) 때문에 wss:// 연결을 차단할 수 있음.
◦
HTTPS 페이지에서는 wss://(secure WebSocket)만 허용되며, ws:// 연결은 차단됨.
•
다른 PC에서 신호를 받으려면 HTTPS가 반드시 설정되어야 하고, WebSocket도 wss://로 작동해야 함.
3.
방화벽 또는 네트워크 설정
•
서버가 다른 PC와 통신하려면:
◦
WebSocket 연결을 허용하는 포트가 열려 있어야 함.
◦
서버와 클라이언트가 동일한 네트워크에 있지 않으면, 공용 IP를 통해 연결해야 하며, 포트 포워딩이 필요할 수 있음.
•
WebSocket 서버가 LAN 내부에서만 작동하도록 설정된 경우 다른 PC에서 접근 불가.
4.
Next.js 서버의 WebSocket 핸들링 문제
•
Next.js는 기본적으로 HTTP 요청을 처리하며, WebSocket 처리를 위해 별도의 설정이 필요.
•
Next.js 서버에서 WebSocket을 직접 처리하지 않거나, WebSocket 프로토콜(ws)을 명시적으로 지원하지 않는 경우 연결 실패 가능.
해결 방법
1.
CORS 설정 확인 및 적용
•
WebSocket 서버에서 CORS 정책을 명시적으로 설정.
•
예: ws 라이브러리를 사용하는 경우:
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws, req) => {
console.log('Client connected');
ws.on('message', (message) => {
console.log(`Received: ${message}`);
});
});
JavaScript
복사
•
Next.js API 라우트에서 CORS 처리:
import Cors from 'cors';
import initMiddleware from 'lib/init-middleware';
const cors = initMiddleware(
Cors({
origin: '*', // 모든 도메인 허용 (보안상 특정 도메인으로 제한 권장)
methods: ['GET', 'POST', 'OPTIONS']
})
);
export default async (req, res) => {
await cors(req, res);
res.json({ message: 'CORS 설정 완료' });
};
JavaScript
복사
2.
HTTPS 및 WSS 설정
•
HTTPS 설정을 위해 Reverse Proxy(Nginx, Traefik 등) 또는 Next.js의 next.config.js에서 HTTPS를 활성화:
◦
Nginx 예제:
server {
listen 443 ssl;
server_name your-domain.com;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;
location /ws/ {
proxy_pass http://localhost:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
Plain Text
복사
3.
WebSocket 서버 및 클라이언트 코드 검토
•
서버가 WebSocket 프로토콜(ws:// 또는 wss://)을 올바르게 처리하는지 확인.
•
클라이언트 연결 코드:
const socket = new WebSocket('wss://your-domain.com/ws');
socket.onopen = () => console.log('Connected to WebSocket');
socket.onmessage = (event) => console.log('Message:', event.data);
JavaScript
복사
4.
방화벽 및 네트워크 확인
•
방화벽이 WebSocket 포트를 허용하도록 설정.
•
로컬 네트워크가 아닌 경우 공용 IP와 포트 포워딩 설정 필요.
결론
이 이슈는 CORS 정책 부족, HTTPS가 아닌 HTTP로 연결 시도, 또는 네트워크 방화벽/포트 문제 중 하나일 가능성이 높음.
위의 해결 방법을 적용하여 문제를 점진적으로 해결할 수 있을 것.
추가적으로 사용 중인 WebSocket 서버와 클라이언트 환경(코드, 네트워크 구조)을 공유하면 더 구체적인 해결 방법을 제공 가능.
안녕하세요
•
한국전자기술연구원 김영광입니다.
•
관련 기술 문의와 R&D 공동 연구 사업 관련 문의는 “glory@keti.re.kr”로 연락 부탁드립니다.
Hello
•
I'm Yeonggwang Kim from the Korea Electronics Research Institute.
•
For technical and business inquiries, please contact me at “glory@keti.re.kr”
