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

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

2019-05-065 min read

目次

  1. 概要
  2. sshによるリモート開発について
  3. macから試したてみた
  4. vs-code-insider-build
  5. sshremoteのインストール
  6. ssh_configの設定
  7. vscodeからの接続
  8. 接続成功後
  9. 接続がうまくいかなかった時
  10. 参考

概要

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

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

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" "$@"

リモート環境に realpath と node がなかったのでインストールしました。

sudo apt install realpath

aptでインストールしたnodejsは動かなかったのでこの辺りを参考にしました。

https://qiita.com/seibe/items/36cef7df85fe2cefa3ea

参考

https://qiita.com/yoskeoka/items/01c52c069123e0298660

https://qiita.com/suzuki_sh/items/245b9817536eba808842

Tags
javascript(109)
linux(54)
node.js(53)
amazon%20aws(47)
typescript(44)
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0(36)
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86(30)
html5(29)
php(24)
centos(24)
python(22)
%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0(21)
mac(21)
mysql(20)
canvas(19)
opencv(17)
%E9%9B%91%E8%AB%87(16)
docker(16)
wordpress(15)
atcoder(14)
apache(12)
%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92(12)
%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9(12)
amazon%20s3(12)
red%20hat(12)
prisma(12)
ubuntu(11)
github(10)
git(10)
vue.js(10)
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF(10)
mariadb(10)
react(9)
aws%20cdk(9)
css3(8)
%E5%8F%AF%E8%A6%96%E5%8C%96(8)
%E5%B0%8F%E3%83%8D%E3%82%BF(8)
nestjs(8)
amazon%20lightsail(7)
next.js(7)
%E3%83%96%E3%83%AD%E3%82%B0(6)
cms(6)
oracle(6)
perl(6)
gitlab(6)
iam(5)
amazon%20ec2(5)
%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93(5)
aws%20amplify(5)
curl(4)
Author
githubzennqiita
ただの備忘録です。

※外部送信に関する公表事項