1-2년 정도 전부터 HTTP/2 프로토콜에 대한 얘기가 자주 나왔었던 것 같다.
나도 우연하게 HTTP/2 프로토콜 에 대해서 접하게 되 해당 내용을 간단하게 정리를 한다.
처음 접했을 때는 서버와 소스코드를 둘 다 적용을 해야 http/2 사용이 가능한지 궁금해서 내용을 찾아봤다.
HTTP/2 프로토콜에 대해선 자세하게 정리 되 있는 글들이 있어서 해당 글을 링크 걸고 간략하게만 정리한다.
나만 모르고 있던 - HTTP/2 : http://www.popit.kr/%EB%82%98%EB%A7%8C-%EB%AA%A8%EB%A5%B4%EA%B3%A0-%EC%9E%88%EB%8D%98-http2/
# HTTP/2 목적
지연 시간을 줄이는 것.
- 전체적 요청 응답 다중화 지원
- HTTP 헤더 필드 효율 적 압축을 통한 오버헤드 최소화
- 요청 우선 순위 지정 및 서버 푸시 지원
# HTTP/2 역사
Google에서 2009년에 SPDY(스피디) 라는 실험 프로토콜을 발표함.
HTTP Working Group(HTTP-WG)에서 SPDY에 자극 받아 새로운 HTTP/2 프로토컬을 만들고 표준이 되기 위해 움직임. (초기 출발점으로 SPDY 사양이 채택됨)
SPDY와 HTTP/2 가 양존하며 같이 발전해오다가, Google에서 공식적으로 SPDY 지원 중단 일정을 발표함.
# HTTP/2 속도개선
HTTP/1.1 프로토콜의 경우 브라우저에서 Connection 회수를 도메인 당 6-8건 정도로 제한을 둠. (참고 : https://code.i-harness.com/ko/q/2321284)
HTTP/2 프로토콜의 경우 도메인 당 1개의 Connection 만 연결하기 때문에 브라우저에서 제한을 걸지 않음.
새로운 형태의 바이너리 프레이밍 계층을 만들어서 헤더 사이즈를 효율적으로 압축하고 줄였음. (오버헤드가 적어지기 때문에 비용이 적게 발생)
리소스간의 우선순위를 설정할 수 있게 함.
서버 푸시를 통해 클라이언트가 HTML 을 분석 후 요청을 하지 않아도 리소스를 서버가 판단하여 전달할 수 있음.
# HTTP/2 속도 데모 사이트
# HTTP/2 적용 확인 방법
1. 크롬 확장 플러그인을 통한 확인
해당 플러그인을 설치하면 우측에 번개모양 표시가 있고 해당 번개모양의 색상으로 적용여부를 알 수 있음.
파란색 : HTTP/2 , 초록색 : SPDY , 회색 : 미적용
2. 개발자 도구를 통한 확인
F12 개발자도구에서 프로토콜을 통해서 확인 가능.
여기서부터는 테스트 서버 구축에 대한 설명
작성자는 보통 ASP.NET 개발을 진행하여 IIS 서버가 익숙해서 IIS에서 테스트 서버 구축이 가능한지 검색을 해보았으나, IIS 10 부터 지원한다고 되 있다.
실제 적용한다고 봤을 때 대부분의 서버는 IIS 8.5 가 설치 되 있기 때문에 현실적이지 못하다고 판단하고 IIS로 테스트 진행을 빠르게 포기했다.
대신 Node JS 를 통해 간단하게 서버구축 후 테스트 가능할 것 같아 Node JS를 통해 구축한 내용 정리한다.
참고1) 지원 브라우저 목록 : https://caniuse.com/#feat=http2
# Node JS 설치
NodeJS 사이트 : https://nodejs.org/en/
NodeJS 사이트에 접속하여 설치 파일 받아서 설치 진행. (그냥 다음 다음 다음 누름 설치 됨)
이미 검색을 통해 많은 설치방법을 찾을 수 있음.
# Node JS 서버 작업할 폴더를 생성
D:\node2 폴더를 만들고 해당 폴더로 지정할 예정
# Plugin 설치
플러그인 설치는 cmd 명령어로 설치
1. express 플러그인 설치 (npm install express)
2. fs 플러그인 설치 (npm install fs)
3. spdy 플러그인 설치 (npm install spdy)
# 사설 인증서 생성 (Feat. OpenSSL)
빌드를 해서 쓸 수 있지만 귀찮으니까 Binary 파일을 직접 다운 받음
다운 받은 파일을 C:\OpenSSL 에 압축을 품.
명령어 실행 (openssl req -x509 -newkey rsa:4096 -keyout self.key -out self.crt –nodes)
Self.crt (인증서) 파일과 self.key (Key) 파일) 이 생성 됨.
해당 파일을 아까 생성한 폴더(d:\node2)로 복사
# html 파일 생성 – index.html
위에서 언급한 demo 사이트의 일부 소스를 발췌하여 테스트
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
</head>
<body>
<DIV id="IMGLoad">
<DIV class="imgGroup">
<DIV class="imgInner">
<DIV class="imgRow">
<IMG width="32" height="48" src="static/tile_0.png"> <IMG width="32" height="48" src="static/tile_1.png"> <IMG width="32" height="48" src="static/tile_2.png"> <IMG width="32" height="48" src="static/tile_3.png"> <IMG width="32" height="48" src="static/tile_4.png"> <IMG width="32" height="48" src="static/tile_5.png"> <IMG width="32" height="48" src="static/tile_6.png"> <IMG width="32" height="48" src="static/tile_7.png"> <IMG width="32" height="48" src="static/tile_8.png"> <IMG width="32" height="48" src="static/tile_9.png"> <IMG width="32" height="48" src="static/tile_10.png"> <IMG width="32" height="48" src="static/tile_11.png"> <IMG width="32" height="48" src="static/tile_12.png"> <IMG width="32" height="48" src="static/tile_13.png"> <IMG width="32" height="48" src="static/tile_14.png"> <IMG width="32" height="48" src="static/tile_15.png"> <IMG width="32" height="48" src="static/tile_16.png"> <IMG width="32" height="48" src="static/tile_17.png"> <IMG width="32" height="48" src="static/tile_18.png">
</DIV>
<DIV class="imgRow">
<IMG width="32" height="48" src="static/tile_19.png"> <IMG width="32" height="48" src="static/tile_20.png"> <IMG width="32" height="48" src="static/tile_21.png"> <IMG width="32" height="48" src="static/tile_22.png"> <IMG width="32" height="48" src="static/tile_23.png"> <IMG width="32" height="48" src="static/tile_24.png"> <IMG width="32" height="48" src="static/tile_25.png"> <IMG width="32" height="48" src="static/tile_26.png"> <IMG width="32" height="48" src="static/tile_27.png"> <IMG width="32" height="48" src="static/tile_28.png"> <IMG width="32" height="48" src="static/tile_29.png"> <IMG width="32" height="48" src="static/tile_30.png"> <IMG width="32" height="48" src="static/tile_31.png"> <IMG width="32" height="48" src="static/tile_32.png"> <IMG width="32" height="48" src="static/tile_33.png"> <IMG width="32" height="48" src="static/tile_34.png"> <IMG width="32" height="48" src="static/tile_35.png"> <IMG width="32" height="48" src="static/tile_36.png"> <IMG width="32" height="48" src="static/tile_37.png">
</DIV>
<DIV class="imgRow">
<IMG width="32" height="48" src="static/tile_38.png"> <IMG width="32" height="48" src="static/tile_39.png"> <IMG width="32" height="48" src="static/tile_40.png"> <IMG width="32" height="48" src="static/tile_41.png"> <IMG width="32" height="48" src="static/tile_42.png"> <IMG width="32" height="48" src="static/tile_43.png"> <IMG width="32" height="48" src="static/tile_44.png"> <IMG width="32" height="48" src="static/tile_45.png"> <IMG width="32" height="48" src="static/tile_46.png"> <IMG width="32" height="48" src="static/tile_47.png"> <IMG width="32" height="48" src="static/tile_48.png"> <IMG width="32" height="48" src="static/tile_49.png"> <IMG width="32" height="48" src="static/tile_50.png"> <IMG width="32" height="48" src="static/tile_51.png"> <IMG width="32" height="48" src="static/tile_52.png"> <IMG width="32" height="48" src="static/tile_53.png"> <IMG width="32" height="48" src="static/tile_54.png"> <IMG width="32" height="48" src="static/tile_55.png"> <IMG width="32" height="48" src="static/tile_56.png">
</DIV>
</DIV>
</DIV>
</DIV>
</body>
</html>
서버 js 파일 생성 #1 (view 코드) – app.js
var express = require('express');
var fs = require('fs');
var app = express();
app.use('/static', express.static('public'));
app.get('/', function (req, res) {
console.log("Index Page Call");
fs.readFile('index.html', function(error, data) {
res.writeHead (200, { 'Content-Type' : 'text/html' });
res.end(data);
});
});
module.exports = app;
서버 js 파일 생성 #2 (http/2 설정 및 서버 open 코드) – app2
var fs = require('fs');
var spdy = require('spdy');
var app = require('./app');
var options = {
key: fs.readFileSync('self.key'),
cert: fs.readFileSync('self.crt')
//protocols: [ 'h2', 'spdy/3.1', ..., 'http/1.1' ] //HTTP2부터 HTTP1.1 까지 다양합니다.
};
spdy.createServer(options, app).listen(8080);
서버 js 파일 생성 #2 (http 설정 및 서버 open 코드) – app3
var express = require('express');
var fs = require('fs');
var app = express();
app.use('/static', express.static('public'));
app.get('/', function (req, res) {
console.log("Index Page Call");
fs.readFile('index.html', function(error, data) {
res.writeHead (200, { 'Content-Type' : 'text/html' });
res.end(data);
});
});
app.listen(3000, function() {
console.log('server start.');
});
# http2 테스트 서버 호출 (node app2)
댓글 없음:
댓글 쓰기