自宅サーバーをClaude Codeで引っ越し その10：諦めていたHTTPS化

前回まででサーバーとしては安定して動くようになりました。最後に残っていたのが、サイトのHTTPS化です。今回の移行作業の中では一番の山場でした。

諦めていた思い込み

ここまでの記事に出てきたとおり、Takesa’s Homepageは公開当初からポート8080番を使って公開していました。契約しているプロバイダがポート80番をブロックしているため、自宅サーバーでホームページを運用しようとすると、別ポートを指定するしかありませんでした。
また最近では、ブラウザ側のセキュリティ対策がどんどん厳しくなって、HTTPのままだと色々警告が出て、訪問者に不安を抱かせる状態となってしまうため、HTTPS化も対応したいとは思っていましたが、知識が足りないのでそもそも何をしなければならないのか分かっていませんでした。

Claude Codeに相談したところ、ポート80番がブロックされた状態では、Let’s Encryptによる証明書の取得が行えない。という回答で、代替手段が割とハードルの高い内容だったので諦めていました。

ポート443が塞がっているのか確かめる

ポート80番がブロックされていることは既知だったので、ポート443も同様にブロックされているだろうと思っていましたが、Claude Codeが その確認をしたほうが良いということで手順を教えてくれました。
新しくサーバーを立てるのではなく、ルーターの設定で「外部からの443番を、内部の8080番（既存のnginx）へ転送する」ようにしておき、外から https:// でアクセスしてみるというものです。

ブラウザに出るエラーの種類で、次のように判断できるようです。

• ERR_SSL_PROTOCOL_ERROR … HTTPSではない応答が返ってきた＝届いている
• ERR_CONNECTION_TIMED_OUT … そもそも届いていない＝ブロックされている

注意点として、この確認は必ず自宅のネットワークの外から行う必要があります。家の中から自分のドメインにアクセスすると、ルーターが折り返して成功してしまい、判定になりません。
今回はガレージにあるPCへリモート接続して、そこから操作して試しました。

結果は、ポート80番はブロックされていますが、ポート443番は開いていました。
この事実が判明したことによりHTTPS化が実現できそうだという結論に至りました。

証明書をどう取るか

無料の証明書（Let’s Encrypt）を取得するには、「自分がそのドメインの持ち主である」ことを証明する必要があります。その方法がいくつかあり、Claude Codeが今回の環境で使えるものを整理してくれました。

• 80番を使う方法 … 80番がブロックされているのでNG
• DNSに専用の記録を追加する方法 … 使っているDynDNS Proでは必要な種類の記録が追加できなかったためNG
• 443番を使う方法 … ブロックされていないことが判明したので、これを採用

証明書の取得には acme.sh というツールを使いました。
いきなり本番で取りに行くと、失敗を繰り返したときに一時的に取得できなくなる制限があるそうで、まずはテスト用のサーバーで確認してから本番、という手順が提案されました。

証明書の期限は約3か月で、自動更新の仕組みの構築も行われています。
この更新の際にnginxを一瞬止めて一時的にネットワークを切り替える必要があるため、その前後で自動的に停止・起動する仕組みの構築も行われています。

ついでにサブドメインへ

WordPressは8081番で公開するように設定を行いましたが、どうせHTTPS化するならURLも整理したいところです。DynDNS Proの設定でワイルドカード（*.takesa.dyndns.org）を有効にすると、好きなサブドメインが使えるようになると教えてもらい、このブログを blog.takesa.dyndns.org というドメインにしました。
証明書は、ホームページ用とブログ用をまとめて1枚で取得しています。

WordPress側のURL引っ越し

WordPressは、記事の中にも画像などのURLをそのまま保存しています。
そのため、サイトのアドレスが変わるときは、データベースの中身をまとめて書き換える必要があります。

Claude Codeに作業手順を示してもらいながら、バックアップを取り、WordPress専用のコマンド（WP-CLI）でURL置換を行いました。
この時いきなり置換を実行するのではなく、まず「何件変わるか」を確認するモードで試してから置換実行、という事故が起きにくい手順が示されました。

混在コンテンツの解消

HTTPSのページの中に、http:// のままの画像などが混ざっていると、ブラウザがそれをブロックしてしまいます。調べてもらうと、静的サイトの中に古いアドレスが書かれたファイルが48個見つかりました。
アクセスカウンターの画像などが、この制限に引っかかっていました。

ここも一括置換で対応しましたが、2つほど気をつける点がありました。

• ファイル名に空白が含まれていると、置換のコマンドが失敗する
• ソフトの配布（ClickOnce）で使っているファイルの一部は、電子署名がされているため書き換えてはいけない（書き換えると署名が壊れてインストールできなくなる）

後者は、自分では気づかないまま壊していた可能性が高い箇所です。置換の対象から外す判断まで含めてやってくれたので助かりました。

古いURLからの転送

最後に、これまでのURL（8080番と8081番）でアクセスしてきた人が、新しいURLへ自動的に移動するようにnginxで設定しました。検索結果や他のサイトからのリンクは、しばらく古いURLのままになるはずなので、これは必須です。

server {
    listen 8080;
    server_name takesa.dyndns.org;
    return 301 https://$host$request_uri;
}

ようやく鍵マーク

こうして、ホームページもブログも、ポート番号のない普通のHTTPSのURLで公開できるようになりました。ブラウザのアドレス欄に鍵マークが出て、警告も出ません。
何年も無理だと思っていたことが、実際に確認してみたら実現できてしまいました。