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

2019-05-06
linuxubuntusshnode.jsmac%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83vscode
    

目次

概要

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

    
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

関連記事

ファイルの1行目を表示 Linuxコマンド head
head コマンド例 headコマンドでファイルの 1行目もしくは指定した行数だけ表示する方法。 head 利用できるオプション コマンド例 の 1行目だけを表示 の 5行目までを表示 カレントディレクトリ以下の全てのtxtファイルの1行目を表示

Amazon S3 と ローカルファイルのチェックサムの比較
s3apiでEtagを取得 検証 マルチアップロード時の注意点 Amazon S3 の Etagを使ってファイルの整合性チェックをする。 s3apiでEtagを取得 S3 APIを利用するとEtagを取得します。この値はmd5のハッシュ値になります。 検証 MD…

WordPressやめます Gatsbyに移行しました
これまでのWordPress運用 なぜWordPressを捨てるのか? なぜGatsbyを利用するのか? gatsbyについて WordPressから記事の救出 移行対象記事の抽出 記事の置換 Gatsbyテーマの作成 Gatsby…

Ansible で Docker に LAMP環境を構築するハンズオンを作った
リポジトリ リポジトリ構成 Docker構成 Ansible role の構成 プロビジョニングの実施 ansibleでdocker上にApache MariaDB PHP…

JavaScriptでbig-integerでできること
定数 メソッド abs add, plus and bitLength compare compareTo compareAmb divide, over divmod equals, eq greater, gt greaterOrEquals, geq…

Macでも利用できるDBクライアント MySQL PostgreSQL Oracle など
デスクトップ系ツール TablePlus DBeaver MySQL Workbench Sequel pro Webアプリケーション phpMyAdmin Adminer 参考 Macで利用できるDB (MySQL PostgreSQL Oracle…

DockerでMySQL5.1.73を利用する。docker-composeから起動
Dockerのインストールから実行まで docker-compose から起動 詳細 Docker から MySQL 5.1.73 を利用する。 Dockerのインストールから実行まで docker imageの pull。 119MB…

Proxy環境下でcurlを実行する
コマンドオプションで設定する 環境変数に設定する curlrc に記述する おまけ: curlのオプション Proxy (プロキシ) 環境下でcurl…

inotify-tools rsync unison を利用してディレクトリを同期する
環境・バージョン情報等 inotify-tools バージョン情報 インストール inotifywait + rsync で同期する inotifywait + unison で同期する unisonの設定 同期コマンド 参考 inotify-tools…

fswatch rsync unison を使ってリアルタイムで同期する
環境・バージョン情報等 fswatch バージョン情報 インストール fswatch + rsync で同期する fswatch + unison で同期する unisonの設定 同期コマンド 参考 fswatch + rsync or fswatch…

最新の投稿

SQL整形ツールを作成した
特徴 使い方 FW/ライブラリ等 nuxt sql-formatter-plus Monaco Editor おまけ ソース SQL整形ツールを作成しました。 URLはこちらです。 SQL…

ファイルの1行目を表示 Linuxコマンド head
head コマンド例 headコマンドでファイルの 1行目もしくは指定した行数だけ表示する方法。 head 利用できるオプション コマンド例 の 1行目だけを表示 の 5行目までを表示 カレントディレクトリ以下の全てのtxtファイルの1行目を表示

Amazon S3 と ローカルファイルのチェックサムの比較
s3apiでEtagを取得 検証 マルチアップロード時の注意点 Amazon S3 の Etagを使ってファイルの整合性チェックをする。 s3apiでEtagを取得 S3 APIを利用するとEtagを取得します。この値はmd5のハッシュ値になります。 検証 MD…

github.io / gitlab.ioで公開されている質の高い技術ドキュメント
AWSによるクラウド入門 Pythonプログラミング入門 普通の人が資産運用で99点をとる方法とその考え方 2018年の段階で私が知らないこと github.io / gitlab.io で無料で公開されている興味深いドキュメントのmemo AWS…

10進数から2進数 2進数から10進数への変換 JavaScript
10進数から2進数 2進数から10進数 テスト 10進数から2進数、2進数から10進数への変換を行うJavaScriptのコードの紹介。 JSの場合、10進数から2進数への変換はメソッド。2進数から1…

JavaScriptの配列ショートハンド (AtCoder用)

JavaScriptでワーシャルフロイド法を実装
AtCoder ABC012 D問題 D - バスと避けられない運命 解説 実装 AtCoder ABC012 の D問題でワーシャルフロイド法が利用できる問題が出てきたので、 JavaScriptで実装しました。 AtCoder ABC012 D問題 D…

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする
GitHub Actions について あらかじめ準備しておくもの AWS IAM ユーザを環境変数にセットする workflowの記述 ビルド バッジを利用する 終わりに 参考にしたところ Gatsbyで作った静的サイトを、GitHub Actions…

cloudinaryによる画像ファイルの管理 はじめてみる
目的 cloudinary について 他のサービスとの比較 料金プラン アカウントの登録 利用してみる ダッシュボード 画像の編集 APIベースでのアクセス 感想 参考 画像の管理や配信、さらには加工といった事ができるsaas型のcloud…

JavaScriptによる2分探索(バイナリサーチ) のサンプルコード
2分探索について ソース 参考 JavaScriptで2分探索(バイナリサーチ)を実装してみました。…

Tags

Dates

© 2020   404 motivation not found