2025年12月4日木曜日

VSCode で Remote tunnel する

VSCode で Remote tunnel する

概要

操作するファイルがリモートサーバにある場合に vscode.dev という中継サーバを介してローカルで起動している VSCode で編集することができます

環境

  • Ubuntu 24.04
    • code 1.106.3
  • Windows 11
    • VSCode 1.106.3

リモートサーバ側でトンネル作成

  • curl -Lk 'https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64' --output vscode_cli.tar.gz
  • tar -xf vscode_cli.tar.gz

これで code というバイナリが入手できます
あとはホームディレクトリに起動して code を起動します

  • cd
  • ./code tunnel

Github Account か Microsoft Account を選択する必要があるので Github Account を選択します

起動すると例のごとくhttps://github.com/login/device にアクセスしてトークンを取得して ./code tunnel に入力してあげます

これでトンネル用の URL が発行されるのでこれをブラウザに入力してもいいのですがそれだと code-server と変わらないので VSCode からアクセスしてみます

VSCode の Remote - Tunnels 拡張をインストールする

  • 左メニューの拡張を選択
  • Remote tunnel を入力して検索
  • 「Remote - Tunnels」拡張をインストール
  • 左メニューに Remote - Tunnels 拡張のアイコンが追加されるので選択
  • さきほど ./code tunnel で起動したサーバが一覧にあるのでそれを選択
  • 初回はブラウザで OAuth の認証が発生するので ./code tunnel と同じ Github Account でログインします
  • 接続に成功すると VSCode が再起動しサーバ上のファイルが操作できるようになります

その他

  • ローカルモードに切り替える場合は切断する必要があるので左下の接続先サーバを選択し「Close Remote Connection」を選択します
  • ./code tunnel 時にはトークンのみですが VSCode 側でトンネルと VSCode を紐づける場合にはブラウザの OAuth が必要になるので VSCode が起動する環境にブラウザがありかつそのブラウザから該当の Github Account でログインできる必要があるので注意しましょう

最後に

普通はこんな使い方しないのでどうしてもローカルで開発できない場合などに使うんだと思います

もしくは Powershell などを使いたくない場合なども使うのかなと思います

参考サイト

0 件のコメント:

コメントを投稿