Tailscaleで開発サーバーを繋ぎ、iPadからの開発が現実味を帯びてきた

このサイトはWSL2上で開発しているのだが、しばらく前から「他のデバイスからも開発環境に触れたらいいな」という漠然とした欲求が頭の片隅にあった。先日それをようやく形にした。

なぜTailscaleか

自宅ネットワーク内だけならローカルIPで届く話だが、それだと外出先からは使えない。VPNを自前で立てるのは設定が煩雑だし、セキュリティの管理も面倒だ。

Tailscale はその問題をほぼ解決してくれる。WireGuardベースのメッシュVPNで、デバイスをアカウントに追加するだけで互いに直接通信できるようになる。NAT越えも勝手にやってくれるし、無料枠で個人用途には十分だ。hostsファイルを思いっきり書き換えてきやがるらしいが、わたしの用途ではそれほど困ることはない。

WSL2 + Tailscaleの壁：ポートフォワーディング

WSL2にTailscaleをインストール自体はすんなりいくが、問題がある。WSL2はWindowsのネットワーク上では独自のIPを持つ仮想マシンとして動いているため、Tailscaleに登録されるのはWindowsホスト側のIPであり、WSL2内で動く開発サーバー（localhost:4321 など）にはそのままアクセスできない。

解決策はポートフォワーディングだ。Windowsの netsh interface portproxy を使い、0.0.0.0:4321 → WSL2のIP:4321 という転送ルールを作る。加えてWindowsファイアウォールのインバウンドルールも開けてやる必要がある。

毎回手で叩くのは面倒なので、セットアップとクリーンアップのPowerShellスクリプトを書いてリポジトリに置いた。wsl --hostname でWSL2の現在のIPを取得し、ルールを動的に生成するようにしている。WSL2は再起動のたびにIPが変わるので、起動時に毎回実行するのが正しい運用になる。

TLSも通した

開発サーバーがHTTPだと、鬱陶しい。最近のブラウザはHTTPSじゃないと開くたびに警告を出してくる。

Tailscale Magic DNS + Let’s Encrypt（tailscale cert）でデバイス固有のドメインとTLS証明書が無料で得られるので、AstroをHTTPS対応で立ち上げる設定も追加した。

astro.config.mjs にサーバー設定を足してHTTPS対応にしたうえで、TLS証明書のパスを環境変数で渡す形にした。ローカル（HTTP）と通常開発の邪魔にならないよう、証明書が見つかった場合にのみHTTPSを有効化するようにしている。

code tunnel

Tailscaleで開発サーバーを見えるようにしたことで「どうせならエディタも外から使いたい」という欲が出てきた。

VSCodeの Remote Tunnels（code tunnel）を使うと、VS Code Serverをマシン上で起動し、vscode.dev 経由でブラウザから接続できる。Tailscaleとは独立した仕組みで、MicrosoftアカウントまたはGitHubアカウントで認証するだけだ。

こちらもWindowsのWSL環境向けにセットアップを整えて、起動スクリプトに組み込んだ。npm run dev:all で開発サーバー群を立ち上げたあと、別のターミナルで code tunnel を起動しておけば、ブラウザだけで開発が回せる状態になる。

VSCodeをブラウザから使うとなったとき、どのくらい便利でどのくらい不便なのかがわからなかったのでとりあえず環境を作ってみた形だ。いまのところ軒並み拡張機能が動く。これはいい意味で予想外だった。

実際のところ

正直に言うと、今のところWindowsのブラウザからアクセスしているだけで、まだiPadは持っていない。

しかし環境は整った。vscode.dev でこのサイトのMDXを開き、マークダウンを書いて保存する。プレビューはTailscale経由でアクセスした開発サーバーで確認する。その作業フローが、少なくとも手元の画面の中ではきちんと動いている。

「どこでもブログが書けるようになった」は少し誇張だが、「ツールとしては整った」は事実だ。あとはiPadという実機を買うかどうかだけの問題になった。
ここまで環境を整えておいて「やっぱりいらない」ならそれはそれで笑える。