서버에 wss연결을 해보자 ( Nginx, Https, wss)

스터디 프로젝트 프론트클라이언트 모두에 Https가 적용되어 있기에 웹소캣 또한 wss로 통신을 한다.

 

그렇기에 우선 로컬에서 wss를 임시로 적용하여 테스트를 해보자.

백엔드(Spring Boot)는 여기를 참고하여 적용하였고,

프론트(React)는 여기를 참고하여 적용했다.

우리가 인증한 방식은 웹 상에서 널리 사용되는 공식 CA가 아닌 서드파티 CA이기에 (즉, 해당 인증기관의 공개키를 브라우저가 알 방법이 없기에) 이렇게 주의를 요한다고 뜨긴 하지만,, 그래도 https는 잘 적용이 되었다.

애초에 웹소캣으로 http연결이 업그레이드될 때 https라면 wss로 연결하기에 당연히 잘 적용이 되었다.

 

하지만 현재 ec2로 배포중인 서버는 nginx를 웹서버로 사용하고 있다.

그리고 우리 웹서버는 리버스 프록시를 사용하고 있다.

무슨말인가 싶겠지만, 아래 그림을 보면

이렇게 웹소캣을 처음 연결할 때 백엔드 서버로 Upgrade해달라는 요청을 헤더에 담아 보내게 된다.

 

그런데, 리버스 프록시를 사용하는 nginx를 이용한다면 백엔드 서버로 해당 헤더가 쭉 전달되지 않게된다.

그렇기에 Nginx에 웹소켓 엔드포인트로 오는 경우에 대해서 프록시 설정을 할 때, 해당 헤더를 추가해서 넘겨줘야 한다!

또, 웹소캣은 연결을 긴 시간동안 지속하기에 Reverse Proxy입장에서 이게 유휴상태가 아니라고 생각하게 해줘야 한다.

 

이제 Nginx에 설정을 해보자.

/etc/nginx/sites-available에 있는 설정파일 (뭐 다른곳에 놔두거나 다른 방식으로 리버스 프록시 설정을 했다면 해당 파일)을 vi로 열어

    location /api/ws{	//웹소캣 엔드포인트
	        proxy_pass 웹소캣서버주소;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "Upgrade";
                proxy_set_header Host $host;
        }

이걸 추가해주자

/api/ws가 현재 백엔드서버의 웹소캣 엔드포인트고, proxy_pass가 서버의 주소다.

이렇게 추가하게 되면 우리가 웹소켓 연결 요청을 보낼 때 Nginx가 이걸 가로채어 확인 후 웹소캣 서버의 주소로 Upgrade및 Connection정보를 추가하여 보내주게 된다. 그렇게 되면 클라이언트와 백엔드 서버간의 웹소캣 연결이 이루어지게 되는 것이다.

 

설정을 마쳤으니 해당 설정파일을 Nginx에 반영해주고 연결을 확인해보면

아주 편안하게 연결이 되는 모습을 확인할 수 있다.

 

 

리버스프록시에 관한 설명은 아래 글에 자세히 설명되어 있다.

https://losskatsu.github.io/it-infra/reverse-proxy/#3-%EB%A6%AC%EB%B2%84%EC%8A%A4-%ED%94%84%EB%A1%9D%EC%8B%9Creverse-proxy-%EC%84%9C%EB%B2%84%EB%9E%80

[Infra] 리버스 프록시(reverse proxy) 서버 개념

 

참고

https://dev-gorany.tistory.com/330

https://unix.stackexchange.com/questions/687282/how-to-resolve-40-too-many-levels-of-symbolic-links-on-ubuntu-10-04-aws-ec2-i

https://hyeon9mak.github.io/nginx-web-socket-proxy-configuration/