方針

簡単と思われる方法を探した結果、以下の構成にしました。

クライアント

2014年7月現在、Google ChromeではHTTP/2を有効にすることはできませんが、Chromeの開発版であるChrome Canaryを使えばHTTP/2を有効できます。

Mac Book ProにChrome Canaryをインストールします。CanaryはChromeの開発版でMac用のdmgパッケージが提供されているのでインストールは簡単です。

なお、クライアントはnghttp2付属のCLIクライアントを使うともっとカジュアルに確認できるのですが、今回はブラウザを使いました。

サーバ

VirtualBoxにUbuntuをインストールし、nghttp2をインストールする。

クライアントの準備

CanaryのページからMac版のバイナリをインストールしてください。既存のChromeとはインストールフォルダは別なので設定が混ざるようなことはありません(※開発版なので予期せぬ挙動が無いとは言い切れませんが...)

なお、CanaryはデフォルトではHTTP/2は無効なので、以下のようにコマンドラインから起動することでHTTP/2が有効化されます。

$ /Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --enable-spdy4

アドレスバーからchrome://net-internals/#spdyへアクセスし、Next Protocolsにh2-13が含まれていれば有効になってます。

サーバの準備

Ubuntu上でnghttp2をbuildします。手順はnghttp2 を ubuntu でビルドのとおりです。

nghttpdはHTTPモードとSSLモードの2パターンの起動モードを選択できます。本書ではSSLモードで起動させます。なおHTTPモードを選択しない理由は、Canary(38.0.2094.0 canary)ではnghttpdのHTTPモードとHTTP/2の接続を確立できなかったためです。原因は深堀りしていませんが、今後のバージョンではうまくいくかもしれません。

以下のとおりprivate keyとサーバ証明書を作成します。

# 秘密鍵(private.key)と証明書要求(server.csr)を作成
$ openssl genrsa -des3 -passout pass:x -out server.pass.key 2048
...
$ openssl rsa -passin pass:x -in server.pass.key -out server.key
writing RSA key
$ rm server.pass.key
$ openssl req -new -key server.key -out server.csr
...
Country Name (2 letter code) [AU]:US
State or Province Name (full name) [Some-State]:California
...
A challenge password []:
...

# サーバ証明書(server.crt)を作成
$ openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

サーバを以下のとおり起動します。HTTP/2のやり取りを見たいので-vオプションをつけます。

$ nghttpd -v 8080 server.key server.crt
IPv4: listen on port 8080
IPv6: listen on port 8080

最後に、MacのVirtualBox側でポートフォワードを有効にし、Mac側からアクセスできるようにしておきます。8888/tcpをサーバの8080/tcpにマップしました。

Hello, World!

nghttpdは起動するとカレントディレクトリを公開しますので、サーバのカレントディレクトリにindex.htmlを置きます。

<html>
<body>Hello, World!</body>
</html>

Chrome Canaryでhttps://localhost:8888/index.htmlにアクセスしHello, World!が表示されれば成功です!

HTTP/2のバイナリフレーミングを確認する

Hello, Worldを表示させた次は、HTTP/2のプロトコルの中心であるバイナリフレーミングを覗き見てみましょう。

一番簡単なのは、chrome://net-internals#SPDYを参照するやり方で、現在のセッションのプロトコルバージョン始め、HTTP/2のフレームのやり取りも様々確認できます。Protocol Negotiatedがh2-13になってれば成功してます。

パケットレベルで見たい人はWireshark使いましょう。ただ少し大変で、HTTP/2のバイナリを解釈してくれるには開発版をbuildする必要があります。詳細はWiresharkをubuntuでbuildするにまとめました。

応用編

次なるアクションとしては、

HTTP/1.1 vs HTTP/2のリクエスト多重化 を確認するために、index.htmlに<img>タグや<link>タグでjs,cssなどを沢山埋め込み、Chromeのdeveloper consoleのリソース取得のtimelineを見てみるとか。HTTP/1.1では1FQDNあたり6同時接続制限がありましたが、HTTP/2の多重化により解決してるか確認する
サーバプッシュを試してみる
RailsをHTTP/2でproxyしてみる

などが面白そうです。

まとめ

HTTP/2プロトコル上でHello, Worldをブラウザに表示しました。

タイトルに最速と打ちましたが、実のところHello, Worldまでの道のりはまだまだ長かったです。今後RFCが公開され各種ツールの開発が進めばrpm等のバイナリパッケージを使って導入が簡単になっていくとおもいます。

[最速] HTTP/2 で Hello World! するまでの手順

方針

クライアントの準備

サーバの準備

Hello, World!

HTTP/2のバイナリフレーミングを確認する

応用編

まとめ

参考