Lycolog

生のHTTPメッセージを見たい時に使える方法。devtoolsではフォーマットされたログしか見れないが、生のテキストを見たい時に使える。具体的には以下の画像のような奴だ。

よく忘れるのでメモとして残しておく

確認環境

やり方

chrome://net-internals/にアクセスするとログ収集ができるので、ログを集めたらイベントビューワで見ればよい。なおイベントビューワは外部サイトなので注意。

以前はブラウザ内で完結していて、リアルタイムに見れたはずだが、何故かできなくなっていた。

Edgeの場合はedge://net-internals/でもアクセスできるが、特にこだわりがなければ汎用性の高いchrome://net-internals/でよいと思う。

バーチャルホストを利用することで1IPに対し複数のドメインを紐付けることが出来るが、hostsに書かないとアクセスが出来ないという面倒な問題が発生する。今回はこれを回避するためにhostsの記述無しでバーチャルホストにアクセスする方法を書いておく。

やり方としては単純で、HTTPリクエストのHostヘッダーにバーチャルホストのドメイン名を指定すると、そのバーチャルホストへのリクエストを投げることが出来る。

一例：curl http://127.0.0.1/ -H 'Host: example.com'

IPv6のOCNバーチャルコネクト環境ではwell-known portsが利用出来ずWebサーバーを公開するのに支障がありますが、今回はそれを乗り越えるための手法を紹介します。

自宅サーバーにhttps://service.example.com/のようにポート指定なしのサブドメインでアクセスできるようにするのがゴールです。

構成

自宅サーバーの手前にCDNを挟み、CDNを経由して接続させるようにします。要するに手前にリバプロを生やしておくわけです。

前提

• Google Domainsを利用している
• ルートドメインを保有している
• AWSのアカウントがある
  • ない場合はこっから作りましょう

前準備

DNS レコードに次のドメインを作っておく

自宅サーバーを公開可能な状態にする

叩き台程度ならserveを使うのが手っ取り早いですが、Node.jsでサーバー立てるのもありだと思います。今回は叩きなのでHTTPにしていますが本番運用するときはHTTPSにしましょう。

以下サンプル

const http = require('http');

const port = 12345;

const server = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello world!');
    console.log(req.headers.host, req.socket.remoteAddress);
});

server.listen(port, () => {
    console.log(`Running at http://localhost:${port}`);
});

手順

1. CloudFrontを開く
2. 「ディストリビューションを作成」
3. 「オリジンドメイン」にcdn.example.comを設定
4. 「プロトコル」を選ぶ
5. cdn.example.comの「ポート」を設定する
6. 設定までスクロール
7. 「代替ドメイン名 (CNAME) - オプション」で「項目を追加」しservice.example.comを入力
8. 「カスタムSSL証明書 - オプション」で「証明書をリクエスト」
9. 「パブリック証明書をリクエスト」
10. 「完全修飾ドメイン名」にservice.example.comを入力し「リクエスト」
11. 「証明書を表示」
12. DNSレコードに「CNAME名」で「CNAME値」を追加
13. 「保留中の検証」が終わるのを待つ
14. 「カスタムSSL証明書 - オプション」で作成した「ACM証明書」を選択
15. 「ディストリビューションを作成」
16. service.example.comのDNSレコードをCNAMEにし、データを「ディストリビューションドメイン名」に変更
17. https://service.example.com/にアクセスできればOK

参考資料

• 代替ドメイン名 (CNAME) を追加することによるカスタム URL の使用 (docs.aws.amazon.com)

トラブルシュート

ディストリビューションを削除したい

1. ディストリビューションの一覧で消したいのにチェック入れて無効化
2. しばらく待つ
3. 消したいのにチェック入れて削除

参考：ディストリビューションを削除する (docs.aws.amazon.com)

後書き

副次的効果ですがCDN挟んでキャッシュされてるお陰で連続アクセスしてもサーバーまでリクエスト来ないので感動しました。

CloudFrontには他にも様々な機能があるみたいなので活用できれば便利そうです。

🚀 やりたいこと

• ApexドメインのDNSレコードで次の振り分けを行いたい
  • AレコードをGitHub Pagesへ
  • MXレコードをさくらのレンタルサーバーにあるメールボックスへ

⚗️ ハマったところ

以下のようにMXレコードをIPで指定するとメールが受信できないケースがありました具体的にはさくらのメールボックスやGMailから投げると届くのですが、WantedlyやMeetyからの自動配信メールが届かない状態でした原因はDNSレコードの状態がRFC 1035に準拠しない事と思われます

🛠️ 解決方法

Aレコードにメール用のサブドメインを追加し、これにIPを設定し、MXレコードからはそのドメインを参照することで上手くいくようになりますサブドメインはmail.である必要はなく、別になんでもいいみたいですWebサーバーとメールサーバーが同じならApexドメインでも行けるっぽい

📖 参考情報

• ウェブとメールを別々のサーバで運営したい？・・・それ、ゾーン設定で出来ます！ | さくらのナレッジ
  • IPで指定すると上手く行かない的なことが書いてあります
  • ググってたら偶々公式が引っかかったのですが、公式にこういう情報があるとありがてぇですね
• RFC 1035
  • MXレコードには16bit整数で表現される優先度とドメイン名を定義する事、優先度は低い程優先されるということが書かれています

GitHub Pagesにドメインを紐付ける

# ルートドメイン, cnameだとメールが届かなくなるのでaliasを使う
alias @ example-user.github.io.
# サブドメイン
cname sub example-user.github.io.

メールサーバーは分けたい

メールサーバーがさくらインターネットの場合はこんな感じで行ける

mx xxx.xxx.xxx.xxx. 10
txt xxx.xxx.xxx.xxx. v=spf1 a:wwwXXXX.sakura.ne.jp mx ~all
a mail xxx.xxx.xxx.xxx

Let’s EncryptのDNS-01チャレンジの設定方法

• サブドメインのケースで書いてる
• ワイルドカード証明書の設定も確かできたはずだが、今ん所使える環境がないので書いてない
• @lycolia/value-domain-dns-cert-registerで自動更新できる

  a sub xxx.xxx.xxx.xxx
  txt _acme-challenge.sub XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX