h2oでHTTP/2を使って同時リクエスト数を上げて表示高速化を試してみる

最近流行りのHTTP/2を、これまた最近流行りのWebサーバh2oで試してみることにしました。目的としては、HTTP/2で同時リクエスト数をぐーんと上げてWebページの表示速度高速化です。HTTP/2については、下記スライドが非常にわかりやすいです。

• HTTP/2の現状とこれから

前提

• CentOS 6.6
• h2o v1.4.2
• Perl v5.22

h2oをビルドするために必要なパッケージ

$ sudo yum install -y gcc gcc-c++ curl curl-devel openssl-devel zlib-devel libarchive libarchive-devel expat expat-devel perl-core
$ wget http://www.cmake.org/files/v3.0/cmake-3.0.2.tar.gz
$ tar -xvf cmake-3.0.2.tar.gz
$ cd cmake-3.0.2
$ ./bootstrap --prefix=/usr --system-libs --mandir=/share/man --docdir=/share/doc/cmake-3.0.2
$ make
$ sudo make install
$ wget http://pyyaml.org/download/libyaml/yaml-0.1.5.tar.gz
$ tar -xvf yaml-0.1.5.tar.gz
$ cd yaml-0.1.5
$ ./configure
$ make
$ sudo make install

h2oをインストール

$ git clone https://github.com/h2o/h2o.git
$ cd h2o
$ git submodule update --init --recursive
$ cmake .
$ make h2o
$ sudo make install

Perlを5.20以上へ

Perlがv5.20以上じゃないとIPv6対応してないお、って怒られるのでソースから最新のPerlを入れてみます。

$ wget http://www.cpan.org/src/5.0/perl-5.22.0.tar.gz
$ tar zxvf perl-5.22.0.tar.gz
$ cd perl-5.22.0
$ ./configure.gnu
$ make
$ sudo make install
$ /usr/local/bin/perl -v

This is perl 5, version 22, subversion 0 (v5.22.0) built for x86_64-linux

Copyright 1987-2015, Larry Wall

Perl may be copied only under the terms of either the Artistic License or the
GNU General Public License, which may be found in the Perl 5 source kit.

Complete documentation for Perl, including FAQ lists, should be found on
this system using "man perl" or "perldoc perl".  If you have access to the
Internet, point your browser at http://www.perl.org/, the Perl Home Page.

$ sudo ln -s /usr/local/bin/perl /usr/bin/perl

h2oの設定

あとは、h2oの設定をしてあげます。YAML形式で非常に簡単にかけます。慣れればnginxよりも簡単そうに見える。

/usr/local/etc/h2o/h2o.conf

pid-file: /var/run/h2o.pid
error-log: /var/log/h2o/error.log
http2-reprioritize-blocking-assets: ON
max-connections: 1024
num-threads: 1

listen: 80
listen:
  port: 443
  ssl:
    certificate-file: /etc/httpd/conf/ssl/example.com.join.crt
    key-file: /etc/httpd/conf/ssl/example.com.key

hosts:
  "local.example.com:80":
    paths:
      /:
        file.dir: /vagrant/example.com/htdocs
    access-log: 
      path: "|/usr/sbin/rotatelogs /var/log/h2o/access_log-%Y-%m-%d 3600"
      format: "%h %l %u %t \"%r\" %s %b \"%{Referer}i\" \"%{User-agent}i\""
  "local.example.com:443":
    listen:
      port: 443
      ssl:
        certificate-file: /etc/httpd/conf/ssl/example.com.join.crt
        key-file: /etc/httpd/conf/ssl/example.com.key
    paths:
      /:
        file.dir: /vagrant/example.com/htdocs
    access-log: 
      path: "|/usr/sbin/rotatelogs /var/log/h2o/access_log-%Y-%m-%d 3600"
      format: "%h %l %u %t \"%r\" %s %b \"%{Referer}i\" \"%{User-agent}i\""

h2oの起動と停止

$ sudo /usr/local/bin/h2o -m daemon -c /usr/local/etc/h2o/h2o.conf
$ sudo kill -TERM `cat /var/run/h2o.pid`

HTTP/1.1とHTTP/2の比較

Chromeのリクエスト一覧を見てみる。

HTTP/1.1

HTTP/2

実際に、どれくらいの表示速度が高速化されたかというと、HTTP/1.1で表示完了までに3秒弱かかっていたのが、2秒ほどにまで縮まりました。実際に、どれくらいの効果があるかはもっと検証したほうが良さそう。

HTTP/2対応ブラウザ

Wikipediaによると、下記ブラウザが対応済み。

• Google Chrome (30は設定が必要）
• Mozilla Firefox (34から標準で有効)
• Internet Explorer 11 on Windows 10
• Microsoft Edge
• Opera