m3u8 트러블 슈팅

 

 

HTTP 환경에서는 http://nginx-rtmp:8080/hls 경로로 라이브 방송 스트림(m3u8 파일)을 수신하고 잘 재생되었습니다.
HTTPS 환경에서는 해당 m3u8 파일이 로드되지 않아서 영상 재생이 불가능했습니다.
원인 분석
HTTPS 요청은 기본적으로 80번 또는 443번 포트로 들어옵니다.
nginx가 http://nginx-rtmp:8080/hls로 프록시해줘야 하지만, 8080 포트가 아닌 80번 포트로 요청이 가면서 스트림을 찾지 못하는 문제가 발생한 것입니다.

해결 방법

 

 

 

erver {
        listen 80;

        # 일반 HTTP 요청 처리 (React 또는 다른 클라이언트 애플리케이션)
        location / {
            proxy_pass http://app:3000; # React 등 클라이언트 애플리케이션 백엔드
            proxy_http_version 1.1;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }


          location /hls {
            proxy_pass http://nginx-rtmp:8080/hls; # nginx-rtmp의 HLS 제공 경로
            proxy_http_version 1.1;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            add_header Cache-Control no-cache;
            add_header Access-Control-Allow-Origin *;
        }

        # WebSocket 요청 처리
        location /socket.io/ {
            proxy_pass http://app:3001; # WebSocket 서버 (Node.js + Socket.IO)
            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;
        }
    }

 

 

 

nginx의 nginx.conf 파일에 80번 포트로 들어오는 요청 중 /hls로 시작하는 요청을 http://nginx-rtmp:8080/hls로 프록시 패스(proxy_pass) 하도록 설정했습니다.
이 설정 덕분에 80번 포트로 온 요청을 8080 포트로 전달할 수 있어 m3u8 스트림이 정상적으로 로드되었습니다