memo-pad’s blog

自分のためのメモをまとめています。ここに書いてある内容については責任は負いません。全て自己責任でお願いします。

Visual Studio Codeでリモートサーバのファイルを編集する

今回使ったのはこちらのRemote VSCode marketplace.visualstudio.com

今回の環境

  • ローカル
linux mint 18.1
Visual Studio Code 1.16.1
Remote VSCode 1.1.0
  • リモート
ubuntu 16.04
rmate 1.0.0 (shell script版)

ローカルの設定

Remote VSCodeのインストール

  1. Visual Studio CodeでCtrl-pを押し、ext install remote-vscodeと入力後、Enter f:id:memo-pad:20171008210225p:plain

  2. 拡張機能の検索結果が表示されるので、Remote VSCodeをインストール f:id:memo-pad:20171008210229p:plain

  3. 拡張機能を再読み込みさせRemote VSCodeを有効化 f:id:memo-pad:20171008210232p:plain

Remote VSCodeの設定変更

  1. 「ファイル」-「基本設定」-「設定」からユーザ設定を開く f:id:memo-pad:20171008210235p:plain

  2. ユーザ設定のRemote VSCode Configurationが下記のような値になっているので、remote.onstartuptrueに変更する f:id:memo-pad:20171008210238p:plain f:id:memo-pad:20171008210240p:plain

Remote VSCode用のsshトンネルを作成

  1. 端末でリモートサーバとのssh tunnelを作成する
ssh -R 52698:127.0.0.1:52698 [リモートサーバのユーザ名]@[リモートサーバのホスト]

リモートの設定

今回はruby版ではなく、shell script版を利用する github.com

rmateのインストール

  1. rmateをダウンロードし、実行権限を付与
sudo wget -O /usr/local/bin/rmate https://raw.github.com/aurora/rmate/v1.0.0/rmate
sudo chmod a+x /usr/local/bin/rmate
  • 補足:最新版を入れるなら下記コマンド
sudo wget -O /usr/local/bin/rmate https://raw.github.com/aurora/rmate/master/rmate

rmateの実行

  1. リモートサーバで下記コマンドを実行すると、ローカルのVisual Studio Codeで指定したファイルが表示される
rmate -p 52698 [編集したいファイル名]
  • 注意
    • リモートサーバとのsshトンネルが切れていると失敗します
    • ローカル側でVisual Studio Codeを事前に立ち上げておかないと失敗します

更新の同期方法

ローカルでの更新内容をリモートに同期

  1. Visual Studio Codeで更新したファイルを保存するだけ

リモートでの更新内容をローカルに同期

  1. リモートのファイルを編集するときと同じ
rmate -p 52698 [更新したファイル名]