最近、mac上のDevContainer上でHTMLを配信するHTTPサーバーを構築しました。配信しているHTMLはAndroidからブラウザでHTTPSでアクセスしたいのですが、真面目に環境構築するとなると手間がかかります。特に、開発用途のHTTPサーバーなので、特定のユーザーのみアクセスできれば良い状況です。
このような状況では、以前 ngrok を使ったことがありました。
Django + google-authで、Google Cloud SchedulerからのHTTPリクエストのみ受け付けるAPIエンドポイントを作成する - メモ的な思考的な
他の方法がないかを調べたところ、Cloudflare Tunnelがありました。
Cloudflare Tunnel · Cloudflare One docs
ただ、「開発用途で特定のユーザーに対してのみHTTPSを公開する」にはCloudflare Tunnelはやや大がかりと感じました。
そこでさらに別の方法がないかを調べたところ、次の2つがありました。
- npmパッケージの
localtunnel - Tailscale
そこで今回は localtunnel と Tailscale の両方を試してみたことから、メモを残します。
目次
環境
DevContainer上でHTMLを配信するHTTPサーバーとして、今回はPythonの標準ライブラリを使います。
http.server --- HTTP サーバー — Python 3.13.11 ドキュメント
DevContainerにて次のコマンドを実行し、DevContainerの hello ディレクトリをHTTPサーバーのポート 5180 で公開しています。
$ python -m http.server --directory hello 5180
helloディレクトリには次のindex.htmlだけがあります。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>Hello</title> </head> <body> <p>Hello, world!</p> </body> </html>
ベースとなる devcontainer.json は次の通りです。PythonはDevContainer Featureの ghcr.io/devcontainers/features/python でインストールします。現時点ではPython 3.13.5がインストールされました。
Package features/python
{ "name": "local-to-android-example", "image": "mcr.microsoft.com/devcontainers/typescript-node:24-trixie", "features": { "ghcr.io/devcontainers/features/python:1.8.0": {} } }
localtunnelでの公開
localtunnel は開発用途のトンネリングツールで、ローカルで動いている HTTP サーバーを外部からアクセス可能な HTTPS URL にするものです。
localtunnel はお手軽な反面、最新のバージョン 2.0.2 が公開されてから4年くらい経過しているのがやや気がかりです。ただ、現時点では問題なく使えます。
https://www.npmjs.com/package/localtunnel?activeTab=versions
トンネリングは npx localtunnel --port <任意のポート> で行えます。インストールしなくても使えてお手軽です。
localtunnel/localtunnel: expose yourself
今回はDevContainer上でHTTPサーバーが起動しているため、 localtunnel もDevContainer上のターミナルで実行します。実行すると、次のようにドメイン loca.lt のURLが表示されます。
$ npx localtunnel --port 5180 Need to install the following packages: localtunnel@2.0.2 Ok to proceed? (y) your url is: https://***.loca.lt
アクセスすると「You are about to visit」ページが表示されます。アクセスしたい先のページはトンネル用のパスワードが設定されているため、 To get your tunnel password, の記載に従いパスワードを入力します。
すると、AndroidからHTTPSで接続でき、DevContainer上で配信しているHTMLが表示されました。良さそうです。
Tailscaleでの公開
Tailscaleアカウントの準備
TailscaleはWireGuardベースのVPNを構築し、設定したデバイス同士が暗号化された経路で直接通信できるようにするサービスです。
個人利用であればTailscaleのfreeプランで十分ですので、 Get started for freeボタンよりユーザー登録をします。
https://tailscale.com/pricing
続いて、公式ドキュメントに従い、mac用のTailscaleアプリをダウンロードし、ログインします。
Install Tailscale on macOS · Tailscale Docs
macへインストールする方法としては3つあるようでした。今回はrecommendedなStandard variantからmac用のインストーラーをダウンロードしました。
また、Androidからも接続するため、Androidアプリをインストールし、こちらもログインします。
Install Tailscale on Android · Tailscale Docs
macとAndroid、2つのデバイスからログインすると、Machinesタブに両方のデバイスが表示されます。
Add a device · Tailscale Docs
なお、Tailscaleで管理するデバイス名のデフォルトはマシン名になります。ただ、HTTPSでマシン間を接続する場合、デバイス名が使われ、かつ、TLS証明書にも掲載されるようです。
Machine names in the public ledger | Enabling HTTPS · Tailscale Docs
そのため、もし外部公開しては困るようなデバイス名になっている場合は、以下の手順に従って変更しておくのがよいでしょう。
Renaming a machine | Machine names · Tailscale Docs
DevContainerでのポートフォワード設定
今回、TailScale CLIはmac上で動作させるため、DevContainer上で公開しているポートをホストへポートフォワードします。そこで、 devcontainer.jsonに設定を追加します。
Dev Container metadata reference
今回はDevContainerのHTTPサーバーが公開しているポート 5180 を、ホストのポート 5180 へとポートフォワードするよう設定します。
"forwardPorts": [5180],
Tailscale CLIの実行
今回、Tailscaleのリバースプロキシ機能を使い、DevContainerからポートフォワードしたHTTPサーバーへTailscale経由でアクセスできるようにします。
Use HTTPS and HTTP servers | tailscale serve command · Tailscale Docs
具体的には次の経路での公開となります。
[DevContainer] | | (port forward 5180) v [mac] | | (tailscale serve --https=5190) v [Tailscale tailnet] | | (WireGuard VPN) v [Android (Tailscaleログイン済み)]
まずは、公式ドキュメントに従い、Tailscale CLIを使えるように設定します。
Using the Tailscale CLI | Tailscale CLI · Tailscale Docs
続いて、CLIを使ってリバースプロキシを起動します。以下の例では、ホストの5180ポートをTailscaleの5190ポートでHTTPS接続できるようにします。
% tailscale serve --https=5190 5180
なお、tailscale serve 時にTailscaleのHTTPSを有効化していない場合、Start using Serve画面が表示されます。同じ画面でTailscale Funnelの有効化もできますが、今回はTailscaleのネットワーク内でのみ接続可能としたいため、チェックはオフにしておきます。
Get started with Serve | Tailscale Serve · Tailscale Docs
リバースプロキシを起動すると、アクセス用のURLが表示されます。今回、自分のTailscaleのネットワーク内だけでHTTPSアクセスできるようにしたため、 Available within your tailnet: という表示があります。
% tailscale serve --https=5190 5180 Available within your tailnet: https://***.***.ts.net:5190/ |-- proxy http://127.0.0.1:5180 Press Ctrl+C to exit.
最後に、AndroidのブラウザでCLIが表示したURLへアクセスします。すると、DevContainerのHTTPサーバーの内容が表示されました。こちらも良さそうです。
