nginx で HTTP/2 と TLS を有効にする設定メモ

新しく VPS を借りてサイトを公開する機会があったので、nginx で HTTP/2 と TLS を有効にするまでのメモです。「HTTP/2 ってどうやるの？」という初心者向けの手順です。

なぜ HTTP/2 を使うのか

HTTP/2 は多重化・ヘッダー圧縮などに対応しており、たくさんのファイルを読み込むページほど体感速度が上がります。最近のブラウザはほぼすべて対応しているので、TLS を有効化するついでに設定するのがおすすめです。

手順

サーバーに nginx をインストール
ドメインの DNS をサーバーの IP に向ける
Let’s Encrypt で証明書を取得
設定ファイルを編集してリロード

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    http2 on;

    server_name wiki.mediakisslab.net;

    ssl_certificate     /etc/letsencrypt/live/wiki.mediakisslab.net/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/wiki.mediakisslab.net/privkey.pem;

    root /var/www/wiki;
    index index.html;
}

ハマったポイント

証明書の取得には certbot を使いましたが、最初はポート 80 を解放し忘れて取得が失敗しました。
nginx のバージョンによっては listen 443 ssl http2; の書き方になるため、nginx -v で確認してから設定すると安全です。
設定変更後は必ず nginx -t で構文チェックしてから systemctl reload nginx を行います。

まとめ

nginx -t && sudo systemctl reload nginx

この1行が通れば有効化完了です。ブラウザの開発者ツールで Protocol の項目が h2 になっているのを確認できると、設定が正しく反映された証拠になります。