Caddy で簡単構築！code-server の HTTPS 環境セットアップ
2025.03.22はじめに
code-server の Web View 機能（画像表示）は、セキュアなコンテキスト（HTTPS）でしか動作しません。ドメイン名を設定せず、IP アドレスにアクセスする環境ではこの機能が使えませんでした。本記事ではドメイン設定と証明書設定すると Web View が機能するのか検証しました。
前提知識
code-server とは、ブラウザ上で VS Code を利用できるオープンソースのツールです。以前の記事で基本的なセットアップ方法を紹介しました。
なぜ Web View 機能が動作しないのか
code-server の公式ドキュメントによると、Web View 機能は Service Worker に依存しています。Service Worker はセキュアなコンテキスト（HTTPS）でのみ利用可能です。そのため、パブリック IP アドレス直にアクセスする環境では機能しません。
"Why do web views not work?"
Web views rely on service workers, and service workers are only available in a secure context, so most likely the answer is that you are using an insecure context (for example an IP address).引用元: code-server FAQ
検証してみた
以下の手順でドメイン設定と証明書を設定し動作確認をしました。
- Route 53 でドメインを設定
- セキュリティグループで必要なポートを開放
- Caddy を利用してリバースプロキシの設定（TLS 終端のため）
- code-server の設定を調整
code-server のドキュメントではリバースプロキシとして Caddy が紹介されています。初めて目にした Web サーバーだったのですが、Let's Encrypt の証明書取得が非常に簡単そうだったので興味本位で試してみました。
前提
Ubuntu 24.04 の EC2 に code-server をインストールした環境を前提とします。また、ドメインは取得済みとします。
1. Route 53でドメイン設定
まず、Route 53 でドメインを設定します。今回はcode.ohmura.example.comというドメインを使用しました。EC2 にアタッチした EIP のパブリック IP アドレスを A レコードとして登録しています。
2. セキュリティグループの設定
次に、EC2 インスタンスのセキュリティグループで、HTTP と、HTTPS アクセスを許可します。HTTP（80 番ポート）は Let's Encrypt の認証のために空けておく必要があるはずなので事前に空けておきました。
3. Caddyのインストールと設定
TLS 終端のために Caddy を使用します。Caddy は自動的に Let's Encrypt から証明書を取得してくれる便利な Web サーバーとのことなのでリバースプロキシとして採用してみます。
まず、Caddy をインストールします。
sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https curl
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
sudo apt update
sudo apt install caddy
次に、Caddy の設定ファイルを編集します。code-server は50443ポートでリッスンすることにします。Caddy の設定はたった 3 行しかないのですが、本当に Let's Encrypt 証明書を発行し、設定までやってくれるのでしょうか、不安です。
code.ohmura.example.com {
reverse_proxy http://localhost:50443
}
設定ファイルを変更したら、Caddy サービスを再起動します。
sudo systemctl restart caddy
4. code-serverの設定
最後にユーザーの code-server の設定ファイルを編集します。ローカルホストの特定ポートでリッスンするように設定し、証明書の設定は Caddy に任せるためcert: falseとします。
bind-addr: localhost:50443
auth: password
password: ovfwxDf6OJqUjE4jxV7n7LojP0JOeYpM
cert: false
設定ファイルを変更したら、code-server サービスを再起動します。
sudo systemctl restart code-server@guest-1
動作確認
設定が完了したら、ブラウザからhttps://code.ohmura.example.comにアクセスしてみましょう。画像ファイルをアップロードして開いてみたところ、問題なく画像を開けるようになりました。Web View 機能が正常に動作していることが確認できます。
設定が完了したら、ブラウザからhttps://code.ohmura.example.comにアクセスします。画像ファイルをアップロードして開いてみると、問題なく表示されました。Web View 機能が正常に動作していることが確認できます。
証明書も有効化されています。
Let's Encrypt の証明書が正しく設定されていました。
まとめ
code-server の Web View 機能を使うには、ドメイン設定と証明書設定が必要です。今回は Route 53 と Caddy を使ってドメイン設定と、Let's Encrypt の証明書の設定を簡単に実現しました。この設定により、ブラウザ上で画像ファイルの閲覧が可能になりました。
おわりに
code-server の Web View の動作検証するついでに、せっかくなら使ったことない Caddy を試してみました。同じリバースプロキシ用途なら Nginx の方が情報も多いですけど、Caddy は設定がシンプルで良かったです。1 ユーザーしか利用しない code-server の様に少人数で利用する環境なら非常に手軽で良いプロダクトのように思いました。
