일요일이었지만 강의실이 열려서 금요일에 못했던 거 하려 갔었다.

건물이 조금 칙칙해서 혼자면 무서울 거 같았었는데 한 분 있어서 다행이었다.

금요일에 막혔던 부분인 Vue로 빌드한게 제대로 적용이 안되던건 잔존 파일들 때문이었던거 같다.

그 후 스트리밍 서버 못 다한 설정들을 하고

영상이 재생되나 테스트해봤다.

 

문제 1️⃣ Vue Video 태그에서 요청 자체가 나가지 않음

하지만 m3u8을 달라는 요청 자체가 안가고 있었다.

이 부분은 전에 포스팅 했던 HLS 관련 문제였다.

크롬 기반 웨일을 사용했는데 이 경우는 <video> 태그만으로 HLS 스트리밍이 지원 안됐던 것이다.

추가로 hls.js 라이브러리를 로딩 해야 했었다.

 

전에 포스팅 했던 거에서 크롬은 바로 될 거라고 했는데 수정해야하겠다.

 

해결 방법

  • Vue 프로젝트에 hls.js 추가
  • hls.js를 이용하여 .m3u8 파일을 동적으로 연결

그래서 요청은 제대로 갔다. 

 

문제 2️⃣ 404 에러 발생

요청이 가기 시작했지만 404 에러 였다.

404: 클라가 요청한게 서버에 없을 경우 발생하는 오류

달라고 했는데 거기에는 없다는 것

 

원인

  • Nginx 스트리밍 서버의 alias 설정 경로가 잘못되어 있었음
  • /movie/ 요청이 /mnt/nfs/movie/로 매핑되지 않고 /mnt/nfs/로 잘못 매핑되어 있었음

결과

하지만 역시 안됨

 

문제 3️⃣ Web 서버 → Stream 서버 proxy_pass 오류

cat /var/log/nginx/error.log

connect() to 192.168.1.105:8082 failed (13: Permission denied) while connecting to upstream

 

로그 확인 결과 퍼미션 디나이드 즉 허가 되지 않음

하지만 curl로 web서버나 스트리밍 서버는 m3u8을 잘 응답하고 있었음

뭔가 방화벽 같은 곳에서 막고 있는 듯한 느낌

1. 방화벽

2. SELinux

원인

  • SELinux 정책이 프록시 연결을 막고 있었음
sudo setsebool -P httpd_can_network_connect on
sudo systemctl reload nginx

최종 상태

  • /stream/movie/101/playlist.m3u8 요청이 정상적으로 스트리밍 서버까지 전달
  • .ts 파일들도 순차적으로 요청됨
  • Video Player가 정상적으로 영상 재생

그래도 비디오 카드 클릭하면 영상은 잘 나옴

이제 백엔드만 연결하고 CDN 서버 만들고 연결해야한다.

+ 지금 마운트한 파일서버는 테스트용으로 내쪽에 있는 서버지만

실제로는 내부망에 있는 파일서버와 마운트하는 걸로 바꿔야한다.

 

좀 무섭지만 영상이 재생되는 모오습

+ Recent posts