Tailscaleとcode-serverを使ってスマホから開発環境にアクセスする
はじめに
こんにちは、T4D4です。先日、天下のGoogleサマから無料で使えるCLI型のAIツールであるgemini-cliが出たことで万年金欠貧乏大学生の僕でも☨Vibe Coding☨ってヤツをやれるようになったので試行錯誤しています。
そこで、最近の若者はスマホから開発環境にsshしてスマホでVibe Codingしているらしいので流行りに便乗してみようと思い自分の環境でやってみたのでこの記事を書きました。
結局何をしたの？
今回は、Tailscaleとcode-serverを利用して、手元のスマートフォンのブラウザからデスクトップで動かしているWSL上のLinuxにアクセスできるようにします。
最終的には以下のツイートのようにスマホのブラウザでVS Codeの画面を開けるようになります。
（スマホってわかりやすいように縦画面のままスクショを撮っていますが縦のままだと非常に使いにくいです）
今回、こちらのTailscale公式ドキュメントを滅茶苦茶参考にさせていただきました。
環境・事前準備
- アクセス先サーバー: Kali-Linux（WSL2上で最近触っているので。正直なんでも良い）
- リモートデバイス: スマートフォン（ブラウザからアクセスするので機種の縛りはない筈）
- Tailscaleアカウント
構築手順
1. Tailscaleのインストール
まずは、アクセス先となるWSL環境にTailscaleをインストールします。
Tailscaleについては前に便利だし個人なら無料なのでとおススメされてから使っている分散型のVPNで小難しい設定無しに色々とやれるので大変お世話になっています。詳細は以前読んでわかりやすかったこちらの記事に譲ります。
公式サイトのダウンロードページから、ご自身の環境に合った手順でインストールを進めてください。
インストールして起動した後、tailscale upを実行することでブラウザを介して自分のアカウントにログインできます。（※起動時にsystemd周りでエラーが出た場合は後でsystemdを有効化するのでその後にtailscale upを実行してください）
2. code-serverのインストール
次に、ブラウザ上でVS Codeを動かすためのcode-serverをインストールします。
多様なOSやパッケージマネージャーに対応しているのでお好みの方法でインストールしてください。
3. WSLでSystemdを有効化する
参考にした公式のドキュメント通りに進めようとして、sudo systemctl enable --now code-server@$USERを実行した時に以下のようなエラーが発生します。
➜ ~ sudo systemctl enable --now code-server@$USER
--now cannot be used when systemd is not running or in conjunction with --root=/--global, refusing.
コレはAIに投げたところ、システム起動時にそのサービス（今回はcode-server）を自動的に開始するよう設定するenableと、そのサービスを即座に開始する --nowの組み合わせが悪いみたいです。
enableの設定はされたが起動はしていないらしいので、今度はsudo systemctl start code-server@$USERを実行することで起動しようとしました。しかし、今度は以下のようなエラーが出ました。
➜ ~ sudo systemctl start code-server@$USER
System has not been booted with systemd as init system (PID 1). Can't operate.
Failed to connect to system scope bus via local transport: Host is down
エラー文によると、そもそものPID1のプロセスがsystemdじゃない（=systemdが起動していない状態らしい）のでそれが原因のようです。そこでps -p 1 -o comm=で確認したところ、initと表示されました。どうやらWSLはsystemdに対応しているとは聞いていましたが、僕の環境が古いのかsystemdは明示的に使うようにしないといけないようです。
これを解決するために、以下の方法でSystemdを有効化しました。
まず、wsl --versionでwslのバージョンを確認し、古い場合はアップデートします。
その後、wsl上で/etc/wsl.confを作成し、以下の設定を書き込みます。
[boot]
systemd=true
ファイルを保存したら、PowerShellを開きwsl --shutdownでWSLを完全に停止させます。
再度WSLを起動し、ps -p 1 -o comm=でsystemdと表示されれば有効化は成功です。
Systemdが有効になったことで、tailscaledやcode-serverをsystemctlで管理できるようになります。
sudo systemctl enable tailscaled
sudo systemctl enable --now code-server@$USER
4. code-serverをTailscale経由で公開する
デフォルトのcode-serverは127.0.0.1（ローカルホスト）しかリッスンしないため、外部のデバイスからアクセスできません。
そこで、Tailscaleのネットワークからのみアクセスできるように設定を変更します。
また、参考にしたドキュメントでは、デフォルトの設定ではアクセス時にパスワードでの認証を要求するようになっています。
ですが、tailscale経由でしかアクセス出来ないように設定するので、tailscaleのログインにSSOを使用している場合パスワードでの認証はなくても十分との判断でパスワードでの認証を無効化しています。
まずはtailscale ip -4コマンドで、お使いの環境のTailscale IPアドレス（100.x.y.zのような形式）を調べます。
次に、~/.config/code-server/config.yamlを以下のように編集します。
bind-addr: <ここにTailscaleのIPアドレス>:8080
auth: none
cert: false
<ここにTailscaleのIPアドレス>の部分は、先ほど調べたIPに書き換えてください。
auth: noneに設定することで、code-server自体のパスワード認証を無効化しています。
設定を変更したら、忘れずにサービスを再起動します。
sudo systemctl restart code-server@$USER
5. スマホからアクセス！
以上で設定は完了です。なので後は手元のスマートフォンにTailscaleアプリをインストールし、同じアカウントでログインします。
その後、スマートフォンのブラウザで http://<TailscaleのIPアドレス>:8080 を開きます。
無事にVS Codeの画面が表示されれば、すべての手順は完了です！
まとめ
Tailscaleとcode-serverを組み合わせることで、非常に簡単にセキュアなリモート開発環境を構築できました。
WSL環境特有のSystemdの有効化で少し手間取りましたが、一度設定してしまえば非常に快適です。
これで、外出先からでも気軽に開発が進められるようになりました。
おまけ
せっかく設定したのでスマホ...では画面が狭いのでiPadで開いてgeminiを軽く1時間ぐらい使ってみました。ベッドで横になりながら指示を出せるのは楽でしたが、外付けのキーボードがないと操作性に難があり正直厳しい体験でした...
一番キツかったのは、指示を出した後にこの操作を実行して良いですか？と返ってきた後、承認は画面上のキーボードのエンターキーで対応できるのですが、対応を切り替える操作（キーボードの上下のキー使うヤツ）と暴走を始めた時に中断すること（escキー）がタッチだけでは出来なさそうなコトですね...
なので開発環境用のサーバーを用意して家で動かして外出先でノパソからアクセスみたいな運用が良さそうな気がします。
Discussion