[졸업 논문] #1. node.js 동영상 스트리밍 서버, HTTP1.1/2.0

계획

 

☻  ~ 9/19 일까지 수행해야할 내용

1. node.js 서버 구축

2. node.js 동영상 스트리밍 서버 구축

3. 동영상(1080p, 720p, 480p)준비 →  https://blog.naver.com/yms099/220683890931

4. 동영상 아무거나 h1, h2, h3 모두 크롬 브라우저에서 원하는 정보를 볼 수 있게끔

    ✲ 페이지 로드시간

    ✲ TTFB

    ✲ Queing & Stalled

5. 서론 및 이론적 배경

 

 

---

 

Node.js 공부하기 및 실험 환경 사전 준비 하기

 

 

node.js 는 이벤트 기반 비동기 방식의 ServerFramework → 즉 node.js의 핵심은 "Event"라 할 수 있다. 

https://javafa.gitbooks.io/nodejs_server_basic/content/chapter7.html

 

1. node.js 서버 구축 하기 튜토리얼

https://javafa.gitbooks.io/nodejs_server_basic/content/

 

2. Streaming Service 튜토리얼

https://javafa.gitbooks.io/nodejs_server_basic/content/chapter11.html

 

✏️
node.js 의 강점이랄 수 있는 대용량 streaming 처리.
node.js 는 이벤트 Loop 기반의 비동 처리를 지원하기 때문에,
대용량 파일을 구간별로 작게 나누어서 처리 하는 작업에 강점을 가지고 있다.

 

 

❓ fs.readFile( ) 을 이용해서 동영상 서비스를 스트리밍 할 때, 발생할 수 있는 문제점

: 서버에서 파일을 다 읽은 후에 파일읽기가 완료가 되면 클라이언트로 한번에 전송하는데, 이로 인해 클라이언트의 대기가 길어진다.용량이 커질수록 클라이언트의 대기시간도 길어질 뿐더러 요청이 많아질수록 서버의 효율이 떨어지는 문제점이 발생.
이런 단점을 보완하기 위해 데이터를 전체를 다 읽거나 쓰지 않아도 중간에 처리할 수 있도록 해주는 것이 stream 입니다. 현재 인터넷에서 서비스 되고 있거나 오픈소스로 지원하는 streaming 라이브러리가 많이 있지만 node.js 는 아주 적은량의 코딩만으로 이런 streaming 서비스를 쉽게 구현할 수 있다. 

 

 

 

3. 해상도별 동영상 준비 하는 방법

 360p, 1080p 같은 영상으로 해상도만 다르게 준비

https://www.resize-video.com/ko/

위 사이트에서 무료로 같은 영상을 해상도를 다르게 준비할 수 있었다. 

 

480p[853 × 480] → 14.7MB 

720p [1280 × 720] → 24.6MB

1080p[1920 × 1080] → 48.3MB

영상 규격을 통해 해상도 확인

 

 

 

4.  측정해야 하는 부분 준비 및 테스트   [ 1. 페이지 로드시간 2. TTFB 3. Queing&Installed ] 

http1.1 동영상 스트리밍

 

 

 

 

 4-1. HTTP1.1 (720p 영상 test)

- 페이지 로드시간 / 데이터 전송량 / TTFB/ Queing & Stalled 세가지를 아래 처럼 확인 할 수 있다. 

 

 

 

 

 

 

4-2. HTTP2 

http2 구축 : npm(Node Package Manager)을 통해 'spdy' 모듈을 통해 HTTP/2 서버를 구동한다.

https://github.com/spdy-http2/node-spdy

GitHub - spdy-http2/node-spdy: SPDY server on Node.js

 

 

  1. npm 이란?  

    : Node Package Manager의 약자로, Node.js로 만들어진 pakage(module)을 관리해주는 툴이자,  Node.js로 만들어       진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램이다.  예전에는 npm을 따로 설치해야 했지만 지금은 node.js         를 설치하면 빌트인되어 있다고 한다.

 

 

 2. ssl (Secure Sockets Layer)

    : http1.1 에서는 ssl 이 선택 사항이지만, http2 는 https 처럼 ssl이 필수적이다. 그러므로 ssl 을 위해 인증서를 발급 받        아야 한다. 아래 첨부 사진을 참고한다. (Mac 환경이다.)

crt 인증서 발급하기

발급 잘 되었는지 확인하기

 

    이제, http2_server.js 파일과http2_index.html 파일을 작성한다. 

   

    아래 서버 파일을 실행하고 브라우저로 확인하면 아래 사진과 같다.

    HTTP2를 웹 브라우저에서 확인하기 위해선 url scheme를 https로 하면 된다.

또한, NET::ERR_CERT_INVALID 에러가 나서 브라우저 확인을 처음에 못 할 수 있는데,
해당 빈화면에 대고 "thisisunsafe"를 입력하면 우회접속이 가능하다. 

 

(왼) 테스트 서버 (오) h2 프로토콜로 잘 동작하는 것 확인 가능

 

spdy모듈이 h2 프로토콜 역할을 잘 하는 것을 확인 했으니,

이제, 동영상 스트리밍 서버로 js 파일을 바꾸고 마지막으로 테스트를 해보면 h2 프로토콜관련 사전 준비도 끝이난다.

https://localhost:9007/html/http2_index.html

 

 

(왼) 브라우저 동작 잘 되는 것 확인  (오) data count 로 확인

   

 

↓ 필요할 분이 있을 수 있으니 작성한 Js 코드 첨부 .

http2_server.js

 

 

 

 

 

🔜 HTTP3 

- 3모듈, 사용, 3 서버 구축

- 구글에서 제공하는 오픈소스 서버 소프트웨어인 proto-quic을 빌드하였다. 이에 사용된 QUIC 프로토콜은 QUIC-Version-39

 

http://slides.com/trivikram/nodejs-quic-http3-seattlejs#/17/0/1

https://www.yld.io/blog/quic-k-http-3/

https://www.nearform.com/blog/a-quic-update-for-node-js/

https://musclebear.tistory.com/51

https://github.com/google/proto-quic

 

 

참고

많은 사용자들이 비디오를 시청하는 환경인 모바일에서 콘텐츠 로드를 시뮬레이션하기 위하여 LTE 네트워크 평균속도에 가까운 3,200Kbps로 대역폭을 제한하여 실험한다.

 

 

---

 

HTTP/3: Node.js can do QUIC | Trivikram Kamat | CascadiaJS 2019

https://www.youtube.com/watch?v=Kqgv4Xs8yDI 

 

---

참고

node.js express를 이용한 http2 테스트해보기 - 큰돌

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=jhc9639&logNo=221210720356

 

[JavaScript] npm이란? -Aldev

https://m.blog.naver.com/magnking/220961896609

 

보안 서버 SSL 이란?

https://www.comodossl.co.kr/certificate/What-is-SSL.aspx

 

Apache : CSR 생성 및 SSL 인증서 적용

https://www.comodossl.co.kr/certificate/ssl-installation-guides/Apache-csr-crt.aspx

 

NET::ERR_CERT_INVALID 우회 접속하기

https://velog.io/@jereint20/bypass-sslerrorpage

 

국가 코드 참고

https://www.iban.com/country-codes

 

[Openssl] 인증서 키 생성  - 현무랑 니니

https://dreamlog.tistory.com/375