[Spring][WebSocket] localhost로만 연결되는 문제 해결하기(외부 도메인으로 WebSocket 연결하기)

박성열·2024년 4월 6일
2

최근 채팅 웹 어플리케이션 토이프로젝트를 시작하면서 가장 먼저 웹소캣에 대해서 공부했다. 나는 Spring을 이용해서 채팅어플을 만들 계획이었기 때문에 Spring에서 가장 많이 쓰는 STOMP를 이용해서 채팅방 데모 버전 만들기를 우선 목표로 삼았다.

참고한 STOMP Best Practice 링크


위의 예제를 따라 코딩하면서 예제를 완성 한 뒤, 정상적으로 작동을 확인하기 시작하면서 문제가 발생했다.brokerURL이 localhost:port라면 정상적으로 WebSocket이 연결되지만, 같은 localhost:port를 revers proxy한 외부 도메인 주소로 WebSocket을 연결하면 연결이 안되는 문제였다.

채팅 웹 어플리케이션을 로컬 컴퓨터에서만 사용할 것이 아니라 외부에서도 접속이 가능해야하기 때문에 이 문제는 나에게 나름 크게 다가왔다. 그래서 다른 문제보다 이 문제에 대해서 집중적으로 해결하기 위해서 노력했다.

다음은 도메인 주소로 접속이 되지 않았던 상태의 WebSocketConfig 코드이다.


package com.example.messagingstompwebsocket;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        //발행자가 "/topic"의 경로로 메세지를 주면 구독자들에게 전달
        config.setApplicationDestinationPrefixes("/app");
        // "/app" 의 경로로 메시지를 주면 가공을 해서 구독자들에게 전달
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/gs-guide-websocket");
        // 커넥션을 맺는 경로 설정.
        // 만약 WebSocket을 사용할 수 없는 브라우저라면 다른 방식을 사용하도록 설정
}

}

사실 예제와 똑같이 코딩 했기 때문에 안봐도 된다.

이 예제에서는 StompJS를 사용해서 STOMP를 구현했기 때문에 StompJS의 문제라고 거의 확신하고 그쪽으로 많이 찾아봤었다. 그리고 그 과정에서 reverse proxy를 할 때 ws가 막힐 수도 있다는 정보를 확인하고 기존에 사용하던 Caddy를 포기하고 nginx로 넘어가보려는 시도도 여럿했지만 결국 모두 실패했었다.

포기하고 웹소캣에 대해서 천천히 다시 공부하고 있을때 config 파일에 아래 코드를 registry.addEndPoint(“/gs-guide-websocket”)에 아래처럼 추가해주면 도메인이 다른 외부 서버에서도 접속 가능하다는 걸 알았다.

registry.addEndPoint(/gs-guide-websocket”).setAllowedOrigins(*);

그 후 서버를 실행해보니 외부 도메인으로도 정상적으로 웹소캣이 연결되는 결과를 확인할 수 있었다… 이 한 줄 때문에 일주일동안 우울해져있었다..


기억은 휘발성이 강하다. 그렇기 때문에 아는 즉시 정리하는 습관은 중요한 것 같다. 지금은 처음 정리를 시작해본거기도 하고, 아는 것도 많이 없기 때문에 설명과 정확도가 많이 부족하다 느껴진다. 하지만 꾸준히 작성해 나가고 수정해나가다보면 언젠가 양질의 정보를 나의 공간 안에 나만의 방식으로 정리할 수 있을거라 생각한다.

profile
백엔드 개발자 호소인

0개의 댓글