Nginx 최신버전 설치법 http2 push 성능 테스트 오류

Nginx http2 push 성능 테스트 결과

Nginx는 1.13.9 버전부터 http2_push와 http2_push_preload라는 새로운 기능을 추가했다.

간단하게 설명하자면 특정 로케이션에서 페이지 혹은 포함된 경로를 로딩할때

css js image 등 파일들을 미리 로드해놨다가 같이 밀어주는 기능이다.

말그대로 클라이언트에서 요청하지 않아도 밀어넣는(push) 획기적인 방식이다.

아래는 Nginx에서 테스트한 결과.

출처: https://www.nginx.com/blog/nginx-1-13-9-http2-server-push/#http2_push

http2를 사용하기 위해선 ssl을 사용해야하고 nginx 1.13.9 버전 이상을 사용해야 한다. 

일반 환경에선 테스트가 어려우며,

따로 Remi 저장소를 지정해서 직접 설치해야한다.

vi /etc/yum.repos.d/nginx.repo

[nginx] name=nginx repo baseurl=http://nginx.org/packages/mainline/centos/7/$basearch/ gpgcheck=0 enabled=1

저장 후 

$ sudo yum update nginx

systemctl reload nginx

또는

systemctl restart nginx

module "/usr/lib64/nginx/modules/ngx_http_geoip_module.so" versio n 1012002 instead of 1015009

최신버전 설치 후 다시 시작할 때 위 어쩌구 저쩌구 에러가 발생하면, nginx-mod들도 최신버전으로 재설치해야한다.

$ sudo yum remove nginx-mod* $ sudo yum install nginx-module-* $ search nginx-module //모듈을 다 설치하기 싫으면 수동으로 검색해서 삭제 $ sudo systemctl restart nginx

적용 방법을 소개하자면 3가지 방식이 있다.

(푸쉬할 파일은 호스트 절대경로로 입력)

1. 수동으로 미리 푸쉬할 파일 세팅

server {
    # Ensure that HTTP/2 is enabled for the server        
    listen 443 ssl http2;

    ssl_certificate ssl/certificate.pem;
    ssl_certificate_key ssl/key.pem;

    root /var/www/html;

    # whenever a client requests demo.html, also push
    # /style.css, /image1.jpg and /image2.jpg
    location = /demo.html {
http2_push /style.css;
http2_push /image1.jpg;
http2_push /image2.jpg;
    }
}

2. 그냥 스트림을 올릴 때 자동으로 세팅해줌

server {
    # Ensure that HTTP/2 is enabled for the server        
    listen 443 ssl http2;

    ssl_certificate ssl/certificate.pem;
    ssl_certificate_key ssl/key.pem;

    root /var/www/html;

    # Intercept Link header and initiate requested Pushes
    location = /myapp {
        proxy_pass http://upstream;
        http2_push_preload on;
    }
}

3. 처음 방문한 사람에게만 선택적으로 푸쉬(쿠키를 저장해서)

server {
    listen 443 ssl http2 default_server;

    ssl_certificate ssl/certificate.pem;
    ssl_certificate_key ssl/key.pem;

    root /var/www/html;
    http2_push_preload on;

    location = /demo.html {
        add_header Set-Cookie "session=1";
        add_header Link $resources;
    }
}

map $http_cookie $resources {
    "~*session=1" "";
    default "</style.css>; as=style; rel=preload, </image1.jpg>; as=image; rel=preload, </image2.jpg>; as=image; rel=preload";
}

위 세 방법 중 하나로 설정 후 nginx를 재시작 하고 테스트 웹에서 f12 콘솔을 열고 disable cache 체크 후

확인해보면 아래와ㅏ 같이 식별자에 Push가 붙어서 로딩이 된다.

출처 : nginx

그런데 위 결과와 내가 테스트한 환경의 결과는 조금 달랐다.

테스트 한 스펙 nginx 15 + https + gzip on + centos7 + 크롬에서

XE, 그누보드, 그냥 이미지랑 문서만 있는 PHP(쿼리 5회)

서버위치는 조금씩 다름. (국내는 아니지만 왠만한 국내 호스팅보다 실스펙이 좋음)

#돔 로딩 시간 : CSS, JS, 이미지 등을 제외하고 로딩되는 순수 문서의 로딩 시간

캐시를 오프한 상태로 각 100회 씩 실험함

1. XE

1-1. Gzip on 상태에서 순수하게 로딩한 결과-> 돔 로딩 시간 200~400ms

1-2. Gzip on 상태에서 PC 모바일 동일하게 불러오는 요소만을 http2_Push로 땡겨옴 -> 돔 로딩 시간 600~1000ms

2-1. Gzip off 상태에서 순수하게 로딩한 결과 -> 돔 로딩 시간 300~700ms

2-2. Gzip off PC 모바일 동일하게 불러오는 요소만을 http2_Push로 땡겨옴 -> 돔 로딩 시간 500~700ms

2. 그누보드

1-1. Gzip on 상태에서 순수하게 로딩한 결과-> 돔 로딩 시간 100~200ms

1-2. Gzip on 상태에서 PC 모바일 동일하게 불러오는 요소만을 http2_Push로 땡겨옴 -> 돔 로딩 시간 200~500ms

2-1. Gzip off 상태에서 순수하게 로딩한 결과 -> 돔 로딩 시간 150~300ms

2-2. Gzip off PC 모바일 동일하게 불러오는 요소만을 http2_Push로 땡겨옴 -> 돔 로딩 시간 300~500ms

3. 이미지랑 문서만 있는 PHP(쿼리 5회)

이건 테스트를 몇번을 해봐도 그냥 순수하게 gzip on보다 두배 이상 속도 차이가 나서 왜 필요한지 도무지 잘 모르겠다.

내가 내린 결론 :

푸쉬 기능을 사용하면 http2 원 목적에 맞게 동시에 여러 파일을 클라이언트로 쏘는 간지나는 형태로 전송할 수 있지만, PHP를 활용해야 하는 환경에서는 (특히 gzip이나 php 캐쉬를 쓰는 환경) 추천하지 않는다.

다만 php를 활용하지 않거나 순수 html 등으로 작성된 코딩(이미지, css, js만 html문서만 있는 환경)에서는

나쁘지 않은 것 같다.

(직접 테스트를 하진 않았지만, nginx에서는 php 프록시를 적용한 사용법을 설명하지 않고 단순히 html과 이미지의 전송속도 등만 설명했기에 php환경을 배제했음을 유추해본다.)

다만 다중 푸쉬 로딩으로 가장 중요한 돔이 느리게 로딩되면 사용자가 이탈할 확률이 높다. 이 부분을 특히 유념하여 적용후 위 테스트 방법대로 테스트를 해보길 바란다. 

한줄 결론 : 괜히 nginx 버전 높은거 깔았다 ㅠㅠ

Nginx 속도를 튜닝하고 싶은 사람이 참고해야할 Nginx 캐쉬 설정 방법