HTTP/3対応をカスタムドメインのWebアプリに無償でする方法

やったこと

Cloudflareを使ってドメインを持っているWebアプリをHTTP/3対応した。

CloudflareといえばRustでQuicheを開発している。

実際のHTTP/3での通信の様子

以下のProtocolを見るとわかるようにHTTP/3に対応している。

https://gyazo.com/4198333998d6859c2c1ab23a97109a88

やりかた

以下の画面で自分の持っているドメインを入力する。

https://gyazo.com/4a94eb102c26f9c6bb56a77331ca5b81

自分のドメインを管理しているサイトのネームサーバーを以下のように書き換える。

以下の画面はドメインを管理しているGoogle Domainの様子。

自分の管理しているドメインのサービスによって多少画面は違うはず。

（この手順もCloudflareが教えてくれる）

https://gyazo.com/ffc49a8c364a9e1841442783101ab2b1

DNSSECを設定する。

Cloudflare側で以下のような情報が得られる。

（多分マスク不要なんだろうけど詳細がまだよくわかってないので安全に倒れるようにマスクしている）

https://gyazo.com/59e15dcc8e612e0c5f3e7bd756bbe965

上記の情報を自分のドメインを管理しているサービスに登録する。

以下はGoogle Domainでの設定。

https://gyazo.com/c61a1c4152493c81e727bbb5a7698d7f

多少待つ。

ここまで設定がうまく行けば以下のメールが届く。

https://gyazo.com/4b0e4f0f28479890630bc87245195905

あとはNetworkのところでHTTP/3をONにすればOK。

https://gyazo.com/8be83ab7f2faa13b8c7d1aed0a61938b

しばらくnslookupしても名前解決されない時間があったが、多少待てば解決された。

確認法

ブラウザのネットワークタブでHTTP/3で通信できていることが確認できる。

Firefoxでabout:configでHTTP/3を有効にして確認している。

https://gyazo.com/a742907ab229888b49f09637e92b89fd

Chromeだと確認できなかったので、Geekflare HTTP/3 Testing Toolで確認すればどんなブラウザからでも確認できる。

https://gyazo.com/b882eb70168c335bab04f0e19617dc0b

おまけ

使用感とかちょっと様子を見ていきたい。

戻すの簡単そうだから。

Cloudflareが良さそうだったらプロダクションデプロイもNetlifyに戻すかも。