いっしきまさひこBLOG

AI・機械学習関連、Web制作関連、プログラミング関連、旅行記録などなど。一色政彦。

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

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

f:id:misshiki:20190615201409p:plain
図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拡張をインストールします。

f:id:misshiki:20190615201428p:plain
図02 Remote Development拡張のインストール(Webページから)

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

f:id:misshiki:20190615201444p:plain
図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構成ファイルを置くこともできますが、ここでは典型的な場合として説明)。

f:id:misshiki:20190615201503p:plain
図04 SSH構成ファイルを開く手順

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

f:id:misshiki:20190615201517p:plain
図05 SSH構成ファイルの設定内容

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

Host masa-i@dapc86-ubuntu.d-advantage.com
    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を下記リンク先を参考にインストールしてください。

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

f:id:misshiki:20190615201531p:plain
図06 OpenSSHのインストール状況の確認

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

SSHの公開鍵(id_rsa.pub)&秘密鍵(id_rsa)の生成

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

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

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

f:id:misshiki:20190615201545p:plain
図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(管理者モード)を使いました。

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

 以下のコマンドは、以降で使うパスなどの文字列を作っているだけです。masa-i@dapc86-ubuntu.d-advantage.comは、<ユーザー名>@<ホスト名>で各自のものを入力してください。

$UserAtRemoteHost = "masa-i@dapc86-ubuntu.d-advantage.com"
$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"

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

f:id:misshiki:20190615201603p:plain
図08 SSHの鍵をアップロードしているところ

 念のため、実際に接続できるようになったかを、次のコマンドでチェックしてみてください(※masa-i@dapc86-ubuntu.d-advantage.comは、<ユーザー名>@<ホスト名>で各自のものを)。ログインできたら、exitなどと打ってログアウトしたら完了です。

ssh -i ~/.ssh/id_rsa masa-i@dapc86-ubuntu.d-advantage.com

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

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

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

f:id:misshiki:20190615201617p:plain
図09 [Remote.SSH: Show Login Terminal]の有効化

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

(5)Visual Studio Codeによるリモート開発

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

f:id:misshiki:20190615201632p:plain
図10 SSH接続したいリモートホストを選択しているところ

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

f:id:misshiki:20190615201702p:plain
図11 鍵のパスフレーズを入力しているところ

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

f:id:misshiki:20190615201713p:plain
図12 リモートコンピューター上のフォルダーを開いているところ

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

f:id:misshiki:20190615201723p:plain
図13 リモートファイルをローカルファイルのように編集しているところ

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

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

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