Visual Studio CodeのRemote-SSH機能で、リモートのコードを触る方法

　2019年6月6日に、Visual Studio Code（VS Code）のMay 2019 (version 1.35)【安定版】がリリースされ、リモート開発（プレビュー版）拡張が利用できるようになりました。これはどういう機能かというと、サーバー上のファイルを、あたかもローカルにあるファイルのように編集できる機能です。

図01　Visual Studio Code リモート開発の実行イメージ

　利用ケースを挙げるなら、例えば「機械学習でGPU付きのUbuntuサーバーやクラウド環境を利用したい。でもその開発・実装は、普段使いのWindows上のVS Codeで行いたい」といった場合に便利です。機械学習ではJupyter Notebookでも、リモート上のファイルの編集はできるので開発には困らないのですが、VS Codeを使ってコードを書きたいという場合に、この機能が役立ちそうです。

　わたし自身は、JetBotのコードとかもVS Codeで触れたらいいなぁと思って試したのですが、JetBotの基盤であるJetson Nanoの「Linux aarch64」には、このリモート開発機能が対応していなかったです（参考：Remote SSH: Support Linux aarch64 · Issue #60 · microsoft/vscode-remote-release）。残念...。

　とりあえず、Ubuntu 18.04のコンピューターにリモート接続してみました。まだ、世の中にある手順の情報などが洗練されていないようなので、わたしが実行した手順と注意ポイントを、このブログエントリでは紹介します。接続にはSSHを使うので、リモート側にSSHサーバーのインストールが必要です（その手順は割愛）。

（1）Remote Development拡張をインストール

　まずは、作業したいローカル環境（筆者の場合はWindows）上のVS Codeに、Remote Development拡張をインストールします。

• Remote Development - Visual Studio Marketplace

図02　Remote Development拡張のインストール（Webページから）

　上記リンク先から、もしくは次のようにVS Code上からインストールできます。

図03　Remote Development拡張のインストール（VS Codeページから）

　インストールが完了したら、SSH接続先のホストを構成ファイルで指定します。

（2）SSH構成ファイルで接続先ホストの指定

　Windowsであれば［F1］キーを押すか、左下の［管理］（歯車）タブ－［コマンド パレット］から、コマンドパレットを出して、「remote-ssh」などと入力。リストに出る［Remote-SSH: connect to Host...］、［Cofigure SSH Hosts...］、［~/.ssh/config］の順にクリックしていきます（※「~/.ssh/config」以外にSSH構成ファイルを置くこともできますが、ここでは典型的な場合として説明）。

図04　SSH構成ファイルを開く手順

　これにより、SSH構成ファイルが開かれるので、Host（管理用の名前）、HostName（ホスト名）、User（ユーザー名）、IdentityFile（公開鍵認証で使う秘密鍵のファイル）を指定します。

図05　SSH構成ファイルの設定内容

　私の場合は以下のように入力しました。

Host [email protected]
    HostName dapc86-ubuntu.d-advantage.com
    User masa-i
    IdentityFile ~/.ssh/id_rsa

　ここでは公開鍵の設定が済んでいる前提で手順を書きましたが、すんでいない場合の手順を（3）で示しておきます。ちなみにパスワード認証も可能でしたが、推奨は公開鍵認証のようです。

（3）SSHの公開鍵認証について

SSHクライアントのインストール

　まずはローカルOSに、SSHクライアントをインストールします。PuTTY for Windowsを使おうとしたらサポートされていなかったです。Windows 10であればWindows OpenSSH Clientを下記リンク先を参考にインストールしてください。

• Windows の OpenSSH のインストール | Microsoft Docs

　OpenSSHのインストール状況を確認するため、Windows 10の［スタート］メニューを右クリックして、［アプリと機能］－［オプション機能の管理］を開いたところ、自分の場合はインストール済みでした。

図06　OpenSSHのインストール状況の確認

　SSHクライアントがインストールできたら、公開鍵（id_rsa.pub）＆秘密鍵（id_rsa）を生成します。

SSHの公開鍵（id_rsa.pub）＆秘密鍵（id_rsa）の生成

　PowerShell（管理者モード）を使って生成する手順を紹介します。

　まずは［スタート］メニューを右クリックメニューから［Windows PowerShell（管理者）］を実行します（※設定によってはここが［コマンド プロンプト］になっていますが、PowerShellを何とかして開いてください...）。

　あとは、順番にコマンドを打ち込んでいきます。次の画像のようになりますが、その下に、わたしが打った内容を参考までに載せておきます。

図07　SSHの鍵を生成しているところ

　ディレクトリを移動。

PS C:\WINDOWS\system32> cd ~\.ssh

　SSHの鍵を生成。鍵を保存するファイルはデフォルトの「~/.ssh/id_rsa」のままで。上書き（Overwrite）と出た場合はすでにあるので、注意してください（※上書きすると他に影響が出ます）。パスフレーズ（passphrase）は空にせずに何か入力した方がいいです。

ssh-keygen -t rsa -b 4096

　鍵ができたら、公開鍵（id_rsa.pub）をリモート接続先にアップロードします。

リモートコンピューターへのSSH公開鍵（id_rsa.pub）のアップロード

　この作業も引き続き、PowerShell（管理者モード）を使いました。

　上記のとおりに鍵を生成した場合は、以下のコマンドを順番に打ち込んでいきます。

　以下のコマンドは、以降で使うパスなどの文字列を作っているだけです。[email protected]は、＜ユーザー名＞＠＜ホスト名＞で各自のものを入力してください。

$UserAtRemoteHost = "[email protected]"

$LocalSourcePublicKey = $env:UserProfile + "\.ssh\id_rsa.pub"

$RemoteTargetPublicKey = $UserAtRemoteHost + ":~/tmp.pub"

　下記のコマンドで、公開鍵をアップロードしています。途中でリモートコンピューターにログインするためのパスワードが聞かれるので、各自のものを入力してください。

scp $LocalSourcePublicKey $RemoteTargetPublicKey

　次のコマンドは、リモートコンピューター上で、アップロードした公開鍵を有効にしています。

ssh $UserAtRemoteHost "mkdir -p ~/.ssh && chmod 700 ~/.ssh && cat ~/tmp.pub >> ~/.ssh/authorized_keys && chmod 600 ~/.ssh/authorized_keys && rm -f ~/tmp.pub"

　以上の手順で、わたしが打った内容を参考までに載せておきます。

図08　SSHの鍵をアップロードしているところ

　念のため、実際に接続できるようになったかを、次のコマンドでチェックしてみてください（※[email protected]は、＜ユーザー名＞＠＜ホスト名＞で各自のものを）。ログインできたら、exitなどと打ってログアウトしたら完了です。

ssh -i ~/.ssh/id_rsa [email protected]

　以上で準備は終わりのはずなんですけど、何度かやってみて、「ログインターミナルの表示」を設定した方がトラブルが少なかったので、（4）を説明しておきます。

（4）「ログインターミナルの表示」の設定

　メニューバーの［ファイル］－［基本設定］－［設定］から［設定］ページを開き、［設定の検索］欄に「remote ssh」と入力。左側のツリーから［拡張機能］－［Remote - SSH］を選択して、右側の設定内容にある［Remote.SSH: Show Login Terminal］にチェックを入れてください。

図09　［Remote.SSH: Show Login Terminal］の有効化

　これで準備万端です。実際に、リモートファイルを開いてみましょう。

（5）Visual Studio Codeによるリモート開発

　（2）と同じ手順でコマンドパレットを開き、［Remote-SSH: connect to Host...］をクリックします。今度は、（2）のSSH構成ファイルで設定したHost管理名（この記事の場合は「 [email protected]」）が表示されますので、これをクリックしてください。

図10　SSH接続したいリモートホストを選択しているところ

　すると途中で、［ターミナル］ウィンドウが立ち上がり（※（4）の設定をしないと立ち上がらない）、鍵のパスフレーズの入力が求められますので、各自のものを入力してください。パスフレーズが聞かれるのがこれ一回かと思いきや、何度も聞かれます（今後、改善してくれると信じています...）。

図11　鍵のパスフレーズを入力しているところ

　接続に成功すると、別ウィンドウでVS Codeがもう一つ立ち上がり、［フォルダーを開く］ボタンからリモートコンピューター上を簡単に探索できます。

図12　リモートコンピューター上のフォルダーを開いているところ

　あとは、リモートコンピューター上のフォルダー内のファイルが、あたかもローカルファイルのように編集できます。

図13　リモートファイルをローカルファイルのように編集しているところ

　ちなみに、この状態で拡張機能をインストールしようとすると、当然ながら、ローカル環境ではなくリモートコンピューター上にインストールされます。

図14　リモートコンピューター上にmarkdownlint拡張をインストールしようとしているところ

　以上です。一度つながれば快適です。