スポンサーリンク

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

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

スポンサーリンク

概要

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

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

Remote Development with Visual Studio Code
VS Code remote support for WSL, Containers, and SSH

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

Developing on Remote Machines using SSH and Visual Studio Code
Developing on Remote Machines or VMs using Visual Studio Code Remote Development and SSH

機能の概要

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

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

機能要件

ローカル環境

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

リモート環境

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

詳しくはこちらを参照

Linux Prerequisites for Visual Studio Code Remote Development
Linux Prerequisites for VS Code Remote - SSH, Remote - Containers, and Remote - WSL

Macから試したてみた

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

環境

ローカル

  • macOS Mojava 10.14

リモートサーバ

  • Ubuntu 14.04

VS Code Insider build

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

Download Visual Studio Code Insiders
For early adopters, you can get the latest release of VS Code each day with the Insiders Build. Available on Mac, Linux and Windows.

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は動かなかったのでこの辺りを参考にしました。

Ubuntuに最新のNode.jsを難なくインストールする - Qiita
この記事は ( の10日目の記事です。 --- [UbuntuにNod...

参考

Dockerで立ち上げた開発環境をVS Codeで開く! - Qiita
待望のリモート開発機能がやってきました! <blockquote class="twitter-tweet" data-lang="ja"><p lang="en&...
VSCode公式の機能で、リモートサーバにSSHして編集する【Insiders Preview】 - Qiita
(
LinuxMacUbuntu開発環境
スポンサーリンク
スポンサーリンク
スポンサーリンク
404 Motivation Not Found
タイトルとURLをコピーしました