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

2019-05-06
linuxubuntusshnode.jsmacvisual%20studio%20code
    

目次

概要

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

    

関連記事

[Mac]ipコマンドの導入[iproute2mac]
iproute2macについて 導入 homebrewで導入 直接インストール 確認 サポートコマンド を導入して、macOSでipコマンドを導入した際のメモ iproute2macについて brona/iproute2mac: CLI wrapper for…

AutotoolsでconfigureやMakefileの作成
はじめに Autotools 環境 準備 ツール類のインストール ソースコードの作成 configure.ac と Makefile.am configure Makeの生成 その他 makeオプション autoreconf について Perlの場合 リンク はじめに C…

RPMパッケージ作成 Dockerを利用して
はじめに RPMパッケージ step1.環境構築からRPMパッケージングまで 事前準備 ワークスペースの作成 プログラム配置 specファイル rpmbuild インストール リンク はじめに Dockerを利用してRPM開発環境を用意し、実際にRPM…

RPMのspecファイルで利用するマクロ・変数
はじめに マクロ一覧 基本情報系 Body項目 コメント 参考文献 はじめに RPM(Fedora/CentOS系)を作成する際に利用するspecファイルで利用できるマクロについて調べた際のメモです。 マクロ一覧 基本情報系 パッケージの名前を定義します。これはspec…

CentOS8/RHEL8でのRPM管理における検討事項
初めに 前提 rpm rpm yum dnf コマンド リポジトリ リポジトリとライフサイクル AppStream Compatibility Level について AppStreamのサポート期間 Yum v3 -> Yum v4 リンク 初めに CentOS8/RHEL…

homebrewでnodejsインストール&任意のバージョン利用
初めに homebrewインストール nodejsの検索 インストール nodejsの利用 初めに homebrewでサクッとnodejsのインストールを行なった際のメモです。 環境はMacを対象としていますが、Linux…

tracerouteコマンドでネットワークの経路を洗い出す
tracerouteの用途 tracerouteの原理 IPヘッダのTTL コマンドを実行してみる 参考文献 tracerouteコマンドでネットワークの経路を洗い出した際の操作をメモしました。 環境はmacで実施しています。 また、traceroute…

Node.js で作成した REST API を Docker化
Node.jsでREST APIを作成 コンテナ化 コンテナ化定義 コンテナ化作業 参考 Node.js で作成した REST API を Docker化した際のメモです。 Node.jsでREST APIを作成 まずはNode.js…

AWS Amplify で コンテナベースのデプロイを行い REST API を構築
検証した環境 やってみる 初期準備 パイプラインを確認 終了処理 参考 AWS Amplify で コンテナベースのデプロイを行い REST API を構築した際のメモです。 検証した環境 amplify 5.1.…

Pythonでソケット通信を実装しメッセージの送受信を行う
ソース server.py client.py 動かしてみる 参考 Pythonでソケット通信を実現する方法です。 ソース server.py サーバ側のソースです。 client.py…

最新の投稿

[Mac]ipコマンドの導入[iproute2mac]
iproute2macについて 導入 homebrewで導入 直接インストール 確認 サポートコマンド を導入して、macOSでipコマンドを導入した際のメモ iproute2macについて brona/iproute2mac: CLI wrapper for…

AutotoolsでconfigureやMakefileの作成
はじめに Autotools 環境 準備 ツール類のインストール ソースコードの作成 configure.ac と Makefile.am configure Makeの生成 その他 makeオプション autoreconf について Perlの場合 リンク はじめに C…

RPMパッケージ作成 Dockerを利用して
はじめに RPMパッケージ step1.環境構築からRPMパッケージングまで 事前準備 ワークスペースの作成 プログラム配置 specファイル rpmbuild インストール リンク はじめに Dockerを利用してRPM開発環境を用意し、実際にRPM…

RPMのspecファイルで利用するマクロ・変数
はじめに マクロ一覧 基本情報系 Body項目 コメント 参考文献 はじめに RPM(Fedora/CentOS系)を作成する際に利用するspecファイルで利用できるマクロについて調べた際のメモです。 マクロ一覧 基本情報系 パッケージの名前を定義します。これはspec…

CentOS8/RHEL8でのRPM管理における検討事項
初めに 前提 rpm rpm yum dnf コマンド リポジトリ リポジトリとライフサイクル AppStream Compatibility Level について AppStreamのサポート期間 Yum v3 -> Yum v4 リンク 初めに CentOS8/RHEL…

homebrewでnodejsインストール&任意のバージョン利用
初めに homebrewインストール nodejsの検索 インストール nodejsの利用 初めに homebrewでサクッとnodejsのインストールを行なった際のメモです。 環境はMacを対象としていますが、Linux…

tracerouteコマンドでネットワークの経路を洗い出す
tracerouteの用途 tracerouteの原理 IPヘッダのTTL コマンドを実行してみる 参考文献 tracerouteコマンドでネットワークの経路を洗い出した際の操作をメモしました。 環境はmacで実施しています。 また、traceroute…

[Vue]フロントエンド機能のみでダウンロードを実装する[JS]
実装 ポイント ソース デモ 参考サイト フロントエンドのみ(=サーバサイドがダウンロードさせない) でダウンロードを行う機能を実装した時のメモです。 Vueを利用して実装していますが、ここで記載しているコードはVueに依存した機能ではなく、ピュアなJSのAPI…

Node.js で作成した REST API を Docker化
Node.jsでREST APIを作成 コンテナ化 コンテナ化定義 コンテナ化作業 参考 Node.js で作成した REST API を Docker化した際のメモです。 Node.jsでREST APIを作成 まずはNode.js…

JavaScriptで優先度付きキューを実装する
優先度付きキューについて ソース 参考 JavaScriptで優先度付きキュー (プライオリティキュー) を実装する 優先度付きキューについて 具体的には次のような機能があります。 キューに対して要素を優先度付きで追加 (push…

Tags

Dates

s-yoshiki
s-yoshiki
githubtwitterqiita
ただの備忘録です。
JS/TS/node.js/PHP/AWS/OpenCV/CentOS
※このブログの内容は個人の見解であり、所属する組織等の見解ではありません。
© 2022   404 motivation not found