LoginSignup
16
6

More than 1 year has passed since last update.

Visual Studio Codeのリモートトンネルを試してみた

Last updated at Posted at 2022-12-17

アイスタイル Advent Calendar 2022 18日目の記事です。

みなさんこんにちは!

ブラックフライデーでAlexaを買ったら机に2個、耳に1個Alexaがいる生活になった中村です。
これこれを買いました。Alexa良いですね~家の家電と連携しているとかなり便利です。)

アイスタイルではアットコスメショッピングの開発等を担当しています。

VSCodeのリモートトンネルとは

先日のVSCode1.74のアップデートにて個人的にリモート開発環境を構築するのが趣味(?)な私としては気になる記述がありました

それが「Remote Tunnels」です。

こちらがリモートトンネル機能の記事なのですが、翻訳したものを抜粋すると

Visual Studio Code Remote - Tunnels 拡張を使用すると、デスクトップ PC や仮想マシン (VM) などのリモートマシンに安全なトンネルを介して接続することができます。SSHを必要とせず、VS Codeクライアントからどこでもそのマシンに接続することができます。
トンネルは、あるネットワークから別のネットワークにデータを安全に転送します。
拡張機能がリモートマシンで直接コマンドや他の拡張機能を実行するので、ソースコードがVS Codeクライアントのマシンにある必要性を排除することができます。

ほうほう...ちょっとこれは試してみたいと思い、試してみることにしました。

テスト環境

今回は「サーバー上にあるコードを急に修正しないといけなくなったが、出先で手元にはipadやSumsung DeXしかない!」みたいな状況を想定して、下記環境を作成してみました。

ホスト用VPS:Ubuntu22.04 (VSCodeのインストールと編集対象のコードを設置)
クライアント:Chromeブラウザ

(UbuntuへのVSCodeへのインストールはこちらの記事を参考にさせていただきました。ありがとうございます!)

さっそく立ち上げてみる

下記コマンドで起動します。

$ code tunnel

スクリーンショット 2022-12-15 003041.png

お...「--accept-server-license-terms」を一緒に入れてもう一回実行してと言われました...
こういう形で規約に同意するパターンもあるんですね...

ということでもう一度

$ code tunnel --accept-server-license-terms

スクリーンショット 2022-12-15 003109.png

(白塗りにの部分には8桁の認証コードが出てます)
githubと連携を許可するため、記載のURLを開きます。

スクリーンショット 2022-12-15 003124.png

ここに先程の8桁のコードを入力し暫く待つと...

スクリーンショット 2022-12-15 003204.png

起動したようです!!このリンクをブラウザに入力します。

ブラウザ版VScodeが開くので、設定を同期すると...

スクリーンショット 2022-12-15 005410.png

今までローカルで開発していたのと遜色ない環境が整いました!
ここで編集して、コミットしてプッシュしたり...一通りの動作は問題なく動きました。

まとめ

リモートトンネルをバックグラウンドで起動しておくか、SSHをできるようにしておけばいつでもコーディングや編集ができる環境になりました...(すごい)
オンライン上に開発サーバーある場合や、ちょっとした設定ファイルの変更等もVimでやっていたものが「ちょっとリモートトンネルで編集するか」といった時代が来るかもしれないですね。

リモートトンネルは個人での使用を想定しており、複数人で同時使用するというのは想定していないようですが、色々な使い方が思い浮かぶ面白い機能でした。

16
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
6