2025 年の最後の JAZUG での LT で喋った、Azure Cloud Shell (以下、Cloud Shell)を VSCode.dev で開くデモについて改めて*1。

まずは実際の動作をご覧あれ。
youtu.be

やっていることはシンプル。

vscode tunnel コマンドでリモートトンネルを作る
- 動画では Micorosoft のアカウントを使用
作ったリモートトンネルを、 insiders.vscode.dev *2で開く
- リモートトンネルを作った時のアカウントでログインする
- URL フォーマット: https://insiders.vscode.dev/tunnel/${TUNNEL_NAME}/PATH/TO/WORKSPACE
- https://insiders.vscode.dev を開いてから、リモートトンネルの拡張機能から指定してもOK

その後は、CloudShell 内を Visual Studio Code 的なユーザーインターフェースで操作できる。

GitHub Codespaces と似てるけど、GitHub Codespaces と違って環境は固定。
とはいえ、ある程度のツールはそろっているので、そこまで困らない気はする。

あとGitHub Codespacesは特定のリポジトリから起動するけど、こっちはリポジトリとの関連は無し。
ローカルからファイルをアップロードして、それを編集した後に、、例えば Azure のリソースを作ったり変更したり、という使い方ができるので、利用シーンで使い分けはできるはず。

補足

以前はCloud Shell 内でも code コマンドを使えばテキストエディターを起動することもできたけど、このコマンドがクラシック UI 限定に。

もちろん vi 、 nano とといったエディターが CloudShell には入っているけど、Cloud Shell 内でのファイル編集が億劫に感じてしまい、Cloud Shell 自体を敬遠しがちになってた。

そんな中、たまたま Cloud Shell に Visual Studio Code の CLI を発見。
リモートトンネル機能を試してみたら動いた。

特に Web ブラウザー限定という訳でもなく、GitHub Codespaces 同様、ローカルPC上の Visual Studio Code (Insider 含む) からリモートトンネルに接続すれば問題なく開ける。
なので、自分のような、ファイルを閉じようと ctrl + w でウィンドウごと閉じがちな人には、Visual Studio Code から接続する方が重宝しそう。

超重要な補足

Cloud Shell の動作上、既定のタイムアウトは 20 分間。
20分間、リモートトンネルを作っている Cloud Shell の操作*3がないと、Web ブラウザーと Cloud Shell との間の Web Socket が切断され*4、その後 Web Socket 接続が失った Cloud Shell のインスタンスは削除される。

リモートトンネルは Cloud Shell のインスタンスから作っているので、Cloud Shell のインスタンスが削除されればリモートトンネルも切断されてしまう。

つまり、リモートトンネルを維持するためには、クライアントが Web ブラウザーだろうが VSCode だろうが、vscode tunnel コマンドを実行している Cloud Shell のインスタンスを維持しないといけなく、その為にはCloud Shell 側のウィンドウまたはタブを定期的に操作しないといけない。