以下省略!

タイダルウ(ry ほぼ毎日1記事執筆運動実施中。 ※記事に広告(アフィリエイト)リンクを掲載している場合があります。

nginxでHTTP/2 Pushを使ってみるテスト

https://rita.xyz/blog/irasutoya/mark_osu-w200-fs8-zf.pngnginxでHTTP/2 Push機能を使ってみるテストをしてみた。

ここでは特定ディレクトリへのアクセスに対してLinkヘッダーを付与し、それを利用してHTTP/2 Pushする。
予めhttp2_push_preloadをonにする必要がある。
Linkヘッダーを入れる際は<>でプッシュしたいファイルのパスを囲み、パスの後の;rel=preloadを忘れないようにする。

server {
	listen 443 ssl http2;
	listen [::]:443 ssl http2;
        #〜略〜
        http2_push_preload on;
        #〜略〜
        location /push_test/ {
             add_header "Link" "</push_test/test.js>;rel=preload";
        }
}

以上の設定を施したのがhttps://rdl.gudako.net/push_test/である。 (※公開終了しました)

nghttp*1で見てみる。PUSH_PROMISE frameがあり、HTMLと同時にJSファイルがPushされていることが確認できる。
ChromeのDeveloper Tools(Networkタブ)でも確認可能。

$ nghttp -v https://rdl.gudako.net/push_test/
[  0.293] Connected
The negotiated protocol: h2
(略)
[  0.393] send HEADERS frame <length=44, flags=0x25, stream_id=13>
          ; END_STREAM | END_HEADERS | PRIORITY
          (padlen=0, dep_stream_id=11, weight=16, exclusive=0)
          ; Open new stream
          :method: GET
          :path: /push_test/
          :scheme: https
          :authority: rdl.gudako.net
          accept: */*
          accept-encoding: gzip, deflate
          user-agent: nghttp2/1.30.0
[  0.438] recv SETTINGS frame <length=0, flags=0x01, stream_id=0>
          ; ACK
          (niv=0)
[  0.438] recv (stream_id=13) :method: GET
[  0.438] recv (stream_id=13) :path: /push_test/test.js
[  0.438] recv (stream_id=13) :scheme: https
[  0.438] recv (stream_id=13) :authority: rdl.gudako.net
[  0.438] recv (stream_id=13) accept-encoding: gzip, deflate
[  0.438] recv (stream_id=13) user-agent: nghttp2/1.30.0
[  0.438] recv PUSH_PROMISE frame <length=55, flags=0x04, stream_id=13>
          ; END_HEADERS
          (padlen=0, promised_stream_id=2)
[  0.438] recv (stream_id=13) :status: 200
[  0.438] recv (stream_id=13) server: nginx
[  0.438] recv (stream_id=13) date: Mon, 18 Jun 2018 20:06:57 GMT
[  0.438] recv (stream_id=13) content-type: text/html
[  0.438] recv (stream_id=13) last-modified: Sun, 17 Jun 2018 20:54:16 GMT
[  0.438] recv (stream_id=13) vary: Accept-Encoding
[  0.438] recv (stream_id=13) etag: W/"5b26ca78-cc"
[  0.438] recv (stream_id=13) link: </push_test/test.js>;rel=preload
[  0.438] recv (stream_id=13) content-encoding: gzip
[  0.438] recv HEADERS frame <length=143, flags=0x04, stream_id=13>
          ; END_HEADERS
          (padlen=0)
          ; First response header
<html>
<head><title>HTTP/2 Push test</title></head>
<body>
<h1>HTTP/2 Push test</h1>
<button name="test" onclick="javascript:hello_world();">test</button>

<script src="test.js"></script>
</body></html>

[  0.438] recv DATA frame <length=156, flags=0x01, stream_id=13>
          ; END_STREAM
[  0.438] recv (stream_id=2) :status: 200
[  0.438] recv (stream_id=2) server: nginx
[  0.438] recv (stream_id=2) date: Mon, 18 Jun 2018 20:06:57 GMT
[  0.438] recv (stream_id=2) content-type: application/javascript
[  0.438] recv (stream_id=2) last-modified: Sun, 17 Jun 2018 20:50:23 GMT
[  0.438] recv (stream_id=2) vary: Accept-Encoding
[  0.438] recv (stream_id=2) etag: W/"5b26c98f-3b7"
[  0.438] recv (stream_id=2) link: </push_test/test.js>;rel=preload
[  0.438] recv (stream_id=2) content-encoding: gzip
[  0.438] recv HEADERS frame <length=153, flags=0x04, stream_id=2>
          ; END_HEADERS
          (padlen=0)
          ; First push response header
//This is the HTTP/2 Push test.
/*
Dummy strings:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nulla justo, ultricies quis feugiat sit amet, ornare at metus. Integer placerat risus vel ipsum suscipit suscipit eget vitae ex. Aenean dignissim malesuada suscipit. Donec at bibendum orci. Maecenas neque massa, interdum eget hendrerit id, dignissim eu nibh. Nulla maximus velit ultrices velit volutpat tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra arcu libero, in accumsan mauris elementum vitae. Maecenas viverra purus nisi, nec pellentesque sem pretium quis.

Quisque iaculis euismod diam, eu eleifend est condimentum sed. Duis tempus, neque vel tristique pulvinar, velit orci viverra augue, gravida iaculis diam odio vitae nunc. Etiam nisl sem, lobortis feugiat turpis sit amet, placerat pulvinar diam. Nullam vulputate, augue posuere.

*/

function hello_world() {
	alert("Hello world!!");
}

[  0.439] recv DATA frame <length=541, flags=0x01, stream_id=2>
          ; END_STREAM
[  0.439] send GOAWAY frame <length=8, flags=0x00, stream_id=0>
          (last_stream_id=2, error_code=NO_ERROR(0x00), opaque_data(0)=[])

*1:Ubuntu 18.04ではsudo apt install nghttp2-clientでインストール可能