セキュリティ向け：VSCodeのRemote Tunnelsを使用した際の、サーバー側の状況を説明した状況
この記事では、Windows上でVScodeの使い方と、操作される端末側の状況を解説します。
- 下準備: サーバー（操作される）側の端末にVSCodeをインストールします。
- サーバー側端末の設定: サーバー側端末とインターネット上のVSCodeにトンネル接続します。
- 操作側端末の設定: 操作側端末からVSCodeに接続します。
- 操作状況: 操作側端末からサーバー側端末を操作した状況を記載します。
- その他: 参考になる点を記載します。
概要図
今から実施する設定は、下の図のような形になります。
この設定によって、サーバー側をリモートでコードを入力することができます。
1.下準備
下記のURLからインストールする端末のOSに合わせて、VScodeをインストールします。
VScodeインストール後に、「C:\Users\ユーザ名」内にフォルダ「.vscode」が作成されます。
2.サーバー側端末の設定
Vscodeをインストールしていると、コマンド「code」が使用できます。
コマンド「code -h」でコマンドオプションが確認できます。
コマンド「vscode tunnel 」を入力すると、最終行にURLとcode「****-****」が表示されます。
サーバー側はこの状態のままにして、操作する側の端末で下記のURLにアクセスします。
3.操作側端末の設定
Webブラウザから、先ほどのサーバー側で表示されたURLを入力します。
そうすると、下記のとおり、Githubのログインフォームが表示されるため、事前に登録したGithubアカウントを入力して「sign in」します。
ログイン成功すると、「Device Activation」 が表示されるので、「Continue」をクリック
（黒塗り部分は、Githubでログインしたユーザ名が記載されています。）
「Device Activation」では、URLと一緒に表示されたcode「****-****」を入力します。
「Authorize Visual-Studio-Code」をクリック
クリック後は、「Congratulations, you’re all set!」と表示されます。
上記表示後、サーバ側端末のコマンドプロンプトでは、新たにURLが追記されます。
また、下記の「Windows 資格情報」の「汎用資格情報」に
「vscode-cli-0.vscode-cli」が追記されます。
新たに追記されたURLにアクセスすると、ブラウザ上でVSCodeが表示されます。
しばらく経つと、「Github」、「Microsoft Account」の選択肢がでます。
今回は、「Github」を選択します。
下図のとおり「拡張機能’Remote – Tunnels’がGithubを使用してサインインしようとしています。」
があるため、「許可」を選択します。
上記「許可」を選択後、サーバ側端末のPC名「desktop-rii7upd」に接続している状況となります。
その接続後、サーバ側端末の「C:\Users\ユーザ名」内に「.vscode-server」フォルダが作成されます。
接続が完了すると、左下にサーバ側端末のPC名「desktop-rii7upd」が表示されます。
ブラウザ上のVSCodeの左下を拡大した状況
サーバ側端末では、接続が完了した状況が表示されます。
４.操作状況
操作側端末のブラウザ「VSCode」でコマンド入力すると、サーバ側端末の状態が表示されていることが、判明します。
操作側端末のブラウザ「VSCode」でaaa.txtを作成すると、サーバ側端末の「C:\Users\ユーザ名」内にaaa.txtが作成されていることが、判明します。
