Zenn
🍣

Amazon Linux 2023とNginxで初めるHTTP/3

2024/05/16に公開
AWS
EC2
TLS
HTTP3
QUIC
tech

はじめに

みなさんはHTTP/3をご存知でしょうか？
まだ馴染みのない方も多いかと思いますが、この機会をきっかけに馴染み深くなっていただけたら幸いです。
HTTP/3についてはCloudflareさんのHTTP/3とは？にわかりやすくまとまっています。
同様に、HTTP/2, HTTP/1.1についてもCloudflareさんのHTTP/2対HTTP/1.1：Webパフォーマンスにどのように影響するのか？にわかりやすくまとまっています。

今回はHTTP/3がNginxのStableに2024/04/23に取り込まれたため（現状はexperimental）、Amazon Linux 2023 + NginxでHTTP/3にて通信をしてみようと思います。
nginx-http3-support

前提

  • 有効なドメインを保有しており、Aレコードを追加できること
    • 本手順においてはRoute53にて取得したドメインを利用

手順

大まかな流れとしては以下です。

  1. EC2作成
  2. Nginxインストール && 起動
  3. Aレコード登録
  4. Let’s Encryptによる証明書発行
  5. Nginx設定追加
  6. HTTP/3通信確認
  7. お掃除

それでは早速やっていきましょう！

1. EC2作成

EC2インスタンスの概要は以下です。Key pairについては今回は使用しないので適当なものを作成&指定すればOKです。
Internet GWもしくはNAT GW経由でインターネットに接続可能なサブネットにインスタンスを作成してください。

  • Software Image (AMI)
    • Amazon Linux 2023 AMI 2023.4.20240513.0 arm64 HVM kernel-6.1
    • ami-0150f593c7575c020
  • Virtual server type (instance type)
    • t4g.small
      • t4g.smallは2024年12月31日まで実質無料キャンペーン中！ AWS公式リンク
  • Firewall (security group)
    • New security group（設定については後述）
  • Auto-assign public IP Info
    • Enable
  • IAM instance profile

Public IPは後ほどAレコード登録に利用するので、控えておいてください。
ec2-1

IAM RoleはAWSマネージドポリシーのAmazonSSMManagedInstanceCoreが付与されたものを指定してください。
セキュリティーグループは以下設定としてください。特記事項としてHTTP/3はUDP/443の待受も必要となる点です。
ec2-2

2. Nginxインストール && 起動

EC2が起動したら、SSM Session ManagerでEC2に接続しましょう。

  1. 対象インスタンスを右クリック --> Connectを押下。
    ec2-3

  2. Connectを押下。
    ec2-4

  3. root昇格

sudo su -
  1. Nginxリポジトリ設定
cat <<EOF > /etc/yum.repos.d/nginx.repo
[nginx-stable]
name=nginx stable repo
baseurl=https://nginx.org/packages/amzn/2023/aarch64/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true
priority=9
EOF
  1. Nginxインストール
yum install -y --disablerepo=* --enablerepo=nginx-stable nginx

ここまでの参考スクショ。大切なところはNginxのバージョンが1.26.0以上であるところです。
ec2-5

  1. Nginx起動
systemctl enable nginx && systemctl start nginx
  1. Nginxデフォルトページアクセス

EC2作成時に控えたPublic IPをブラウザにコピペしてNginxのデフォルトページにアクセスできることを確認する。
ec2-6

3. Aレコード登録

次に、EC2作成時に控えたPublic IPをもとにAレコードを追加します。
今回は私が保有しているtsumita7.netドメインのパブリックホストゾーンにhttp3.tsumita7.netというAレコードを追加します。

  1. Route53にアクセスし、Create recordを押下
    ec2-7

  2. Record nameにhttp3, ValueにEC2作成時に控えたPublic IPを入力し、Create recordsを押下。
    ec2-8

Aレコードが無事に作成されると、以下のように表示されます。
ec2-9

4. Let’s Encryptによる証明書発行

次は、Let’s Encryptで証明書を発行します。

  1. 証明書を発行するためのcertbotインストール
## 必要ツールインストール
dnf -y install python3 augeas-libs

# venv作成, pipからcertbotをインストール
python3 -m venv /opt/certbot/ &&
/opt/certbot/bin/pip install --upgrade pip &&
/opt/certbot/bin/pip install certbot certbot-nginx &&
ln -s /opt/certbot/bin/certbot /usr/bin/certbot

参考スクショ
ec2-10
ec2-11
ec2-12

  1. 証明書取得
# 証明書取得
certbot certonly --nginx -d <Aレコードに登録したFQDN>

緊急の更新やセキュリティの通知などを受領するメールアドレスを入力し、規約に同意することで証明書が発行されます。

ec2-13

5. Nginx設定追加

次にNginxにHTTP/3周りの設定変更します。

  1. Nginx設定追加

<Aレコードに登録したFQDN>の部分は置き換えてください。
※以下設定ファイルはHTTP/3を確認するための最小設定です、実際に利用する際にはセキュリティを考慮した設定を公式ドキュメントなどを参考に必ず行ってください。

cat <<EOF > /etc/nginx/conf.d/http3.conf
server {
    # for better compatibility it's recommended
    # to use the same port for quic and https
    listen 443 quic reuseport;
    listen 443 ssl;

    http2 on;

    ssl_protocols       TLSv1.3;

    ssl_certificate     /etc/letsencrypt/live/<Aレコードに登録したFQDN>/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/<Aレコードに登録したFQDN>/privkey.pem;

    add_header Alt-Svc 'h3=":443"; ma=86400';

    location / {
        # required for browsers to direct them to quic port
        root   /usr/share/nginx/html;
        index  index.html;
    }
}
EOF
  1. Nginx設定確認 && 設定反映
# Nginx設定確認
nginx -t

# 設定反映
systemctl restart nginx

参考スクショ
ec2-14

6. HTTP/3通信確認

ブラウザ(Chrome)で https://<Aレコードに登録したFQDN> にアクセスしてください。
ぱっと見何も変わっていないように見えますが、既にHTTP/3で通信をしています。

http3-1

HTTP/3で通信をしていることを確認するために、F12を押下して開発者ツールを開いてください。
その後、Networkタブを押下 --> name, Statusなどのカラムの上で右クリック --> Protocolを押下してください。
http3-2

Protocolカラムが追加され、h3(HTTP/3)で通信していることが確認できます。
http3-3

試しにQiitaのトップページを見てみると、http/1.1, h2(HTTP/2), h3(HTTP/3)など複数のProtocolで通信しているのが確認できるかと思います。
http3-4

7. お掃除

今回作成した以下リソースは不要になったタイミングで削除してください。

  • EC2
  • IAM
  • セキュリティグループ
  • Aレコード

終わりに

今回はEC2の上にNginxを導入し、証明書を取得した上でHTTP/3通信をさせてみました。
CDN（Contents Delivery Network）を噛ませることでHTTP/3対応ができるため、今回の様に自分でHTTP/3対応をすることは少ないかもしれませんが、実際に手を動かしてみることで理解が深まるかと思います。
興味がある方がいればぜひ手を動かしていただけると幸いです。

本記事が誰かの助けとなれば幸いです。
ここまで読んでくださりありがとうございます。

Discussion