[ERROR] WebSocket connection to ‘wss~’ failed:

원인

처음에는 밑의 hmr 에러가 문제인 줄 알았는데 더 다른 사람들과 찬찬히 보니까 웹소켓이 wss를 연결이 안되는게 문제였음.

해결 방법

https://blog.naver.com/hsmang/221837039250

• nginx default.conf에서 아래의 내용을 추가함

	#Websocket Setting
	proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";

• default.conf 의 전체 코드

  server {
      listen       80;
      listen  [::]:80;
      listen 443 ssl;
      listen [::]:443 ssl;
  
      server_name  j10a708.p.ssafy.io;
  
      # SSL setting
      ssl_certificate /etc/ssl/j10a708.p.ssafy.io/certificate.crt;
      ssl_certificate_key /etc/ssl/j10a708.p.ssafy.io/private.key;
  
      # redirect HTTP request to HTTPS request
      if ($scheme = http) {
          return 301 https://$server_name$request_uri;
      }
  
      access_log  /var/log/nginx/access.log  main;
      error_log /var/log/nginx/error.log;
  
      location /.well-known/pki-validation/ {
          alias /usr/share/nginx/html/.well-known/pki-validation/;
      }
  
      include /etc/nginx/conf.d/service-url.inc;
  
      location / {
          proxy_pass http://j10a708.p.ssafy.io:3000;
          proxy_redirect off;
          charset utf-8;
  
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
  
  	#Websocket Setting
  	proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
  
      }
  
      location /jenkins {
          resolver 1.1.1.1;
          proxy_pass $service_url;
          proxy_redirect off;
          charset utf-8;
  
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
  
      }
  
      location /api {
          proxy_pass http://j10a708.p.ssafy.io:8080;
          proxy_redirect off;
          charset utf-8;
  
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
      }
  
      #error_page  404              /404.html;
  
      # redirect server error pages to the static page /50x.html
      #
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   /usr/share/nginx/html;
      }
  }
  

• HTTP에서 WebSocket으로 연결을 업그레이드 할 때 업그레이드 및 연결 헤더를 사용함.
  • Nginx는 클라이언트의 Upgrade 요청을 Upgrade하고 Connection 헤더를 Upgrade로 명시적으로 설정하는 것임
  • https://nginxstore.com/blog/nginx/websocket-proxy-로-nginx-사용하기/
• hmr은 건들 것이 아니었음!