VSCodeからSSHでリモートサーバ上のファイルを編集する

概要

VSCode(2019/05/05時点ではInsider版のみ)でリモートサーバ上のファイルをSSH経由で編集することができるようになりました。ざっくり言うとリモート環境としてコンテナ、WSL、リモートサーバ上での編集が可能になり、拡張機能なども動かせるようになるそうです。これをちょっとだけ試してみました。

また、初期のセットアップでハマったところがあったのでそれについても触れます。

Introducing Remote Development for @code ???️
A new set of extensions that enable you to open any folder in a container, on a remote machine, or in the Windows Subsystem for Linux (WSL) and take advantage of VS Code's full feature set. #remote

? https://t.co/ChYGQ89Y5f

— Visual Studio Code (@code) 2019年5月2日

https://code.visualstudio.com/blogs/2019/05/02/remote-development

SSHによるリモート開発について

https://code.visualstudio.com/docs/remote/ssh

機能の概要

VSCodeのSSH拡張機能を利用するメリットは、リモート環境のディレクトリ・ファイルに対してVSCodeの便利な多くの機能を提供することにあります。また、これらのアクションはリモートマシン上のファイルに対しいて実行されるので、ローカルにファイルを置く必要がありません。

リモートサーバーだけでなく、 DockerやWSLについても対応しています。

機能要件

ローカル環境

VSCodeが導入されていること。加えてOpenSSH互換のSSHクライアントがあること。 ※こちらの最小要件を参考にしてください。

リモート環境

x86_64 Debian 8以降、Ubuntu 16.04以降、CentOS / RHEL 7以降。 ARMv7l Raspbian 8+（32ビット）も実験的にサポート。

詳しくはこちらを参照

https://code.visualstudio.com/docs/remote/linux

Macから試したてみた

とりあえずMacから試してみました。

環境

ローカル

macOS Mojava 10.14

**リモートサーバ**

Ubuntu 14.04

VS Code Insider build

Insider build版については、こちらから手に入れることができます。

https://code.visualstudio.com/insiders/

SSH:Remoteのインストール

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers

remote containerを検索します。

「remote」と打てば上〜真ん中あたりに出てきます。

いこれをインストールすると、依存関係のいくつかの関連パッケージもインストールされました。

ssh_configの設定

接続するSSHの設定を行います。 macの場合であれば~/.ssh/configに記述します。 ~/.ssh/config

Host test.my-server1  # 任意のホスト名
    HostName my-server1.example.com  # host名
    User your_name  # ユーザネーム 
    Port 22  # ポート番号
    IdentityFile ~/.ssh/xxxx_key.pem  # 鍵のパス

VSCodeからの接続

左下のターミナルのようなアイコンをクリックしRemote-SSH:COnnect to hostからssh_configに設定した接続先 (上記のサンプルであればtest.my-server1) を選択して接続することができます。

接続時の設定ファイルなどはリモートの~/.vscode-remote/に置かれます。

接続成功後

接続が成功したらOpen Folderから編集したいファイルを選ぶことができます。

このようにリモートサーバのディレクトリが表示されます。

接続がうまくいかなかった時

上記の手順通りに試してもうまくいかない時がありました。

logを見ると、SSH接続後に行われるshellの実行に失敗していました。

~/.vscode-remote/bin/******/server.sh

#!/usr/bin/env sh
#
# Copyright (c) Microsoft Corporation. All rights reserved.
#

case "$1" in
        --inspect*) INSPECT="$1"; shift;;
esac

ROOT="$(dirname "$(realpath "$0")")"

"$ROOT/node" ${INSPECT:-} "$ROOT/out/remoteExtensionHostAgent.js" "$@"