AWS 도메인 연결과 SSL 연동 후 웹소켓 에러

Mixed Content: The page at '<URL>' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint

 

도메인과 SSL연결까지 완료하고 해당 에러가 발생 한다면 http 요청을 보내는 리소스들이 없는지 확인하라. 그것들을 다 https로 변경 해준다.

 

• 카카오 Oauth2 콜백 URL
• 네이버 Oaurh2 콜백 URL
• 구글 Oauth2 콜백 URL
• 프론트에서 백엔드에 요청하는 ur

 

nginx conf

upstream frontend {
    server frontend:3000;
}

upstream backend {
    server backend:5001;
}

server {
    listen 80;  # SSL 종료는 로드 밸런서에서 처리하므로 HTTP로만 처리

    location / {
        proxy_pass http://frontend;
    }

    location /socket.io {
        proxy_pass http://backend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /api {
        proxy_pass http://backend;
    }

    location /_next/webpack-hmr {
        proxy_pass http://frontend/_next/webpack-hmr;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    location /sockjs-node {
        proxy_pass http://frontend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
}

 

로컬 개발 환경에서 localhost의 SOCKET_URL을 http://localhost:3000 로 잘 사용 했었는데 웹소켓 ssl 통신을 위해서는 wss 프로토콜을 사용 해야한다.
wss://your-domain.com/socket.io 이런식으로 한번 바꿔보자

 

nestjs webgateway 설정

₩@WebSocketGateway({
	transports: ['websocket'],
	namespace: 'chats',
	cors: {
		origin: process.env['ENV_CLIENT_SOCKET_URL'],
		credentials: true,
	},
})

 

nextjs socketio 설정

export const useSocket = () => {
	const [isConnected, setConnected] = useState<boolean>(false);

	const [layer, setLayer] =
		useRecoilState<MessageModalAtomType>(messageModalAtom);

	const onConnect = () => {
		setConnected(true);
	};

	const onDisConnect = () => {
		setConnected(false);
	};

	useEffect(() => {
		const accessToken = getCookie(ACCESS_TOKEN_KEY as string);

		socket = io(`${SOCKET_URL}/chats`, {
			transports: ['websocket'],
			secure: process.env.NODE_ENV === 'production' ? true : false,
			withCredentials: true,
			auth: {
				authorization: accessToken,
			},
		});

		socket.on('connect', onConnect);
		socket.on('disconnect', onDisConnect);

		return () => {
			socket.off('connect', onConnect);
			socket.off('disconnect', onDisConnect);
		};
	}, [isConnected, setLayer]);

	return {
		socket,
		isConnected,
	};
};

 

SOCKET_URL을 http://localhost:3000로 잘 사용 했었는데 wss://your-domain.com/socket.io 이런식으로 바꿨었다.

 

성공 해결 했다.

해결 하는 실마리는 클라이언트에서 요청하는 SOCKET_URL을 wss:도메인으로 하고 백엔드에서 cors origin을 https://도메인으로 하면 된다.

 

 

추가로 nextjs에서 production 환경에서 sharp 를 추가 해주어야 되나보다.

Error: 'sharp' is required to be installed in standalone mode for the image optimization to function correctly. Read more at: https://nextjs.org/docs/messages/sharp-missing-in-production

 

 

npm i sharp