VSCode Remote Developmentを使用して、リモートマシン上の環境で拡張機能を動かす

公開日:2019-07-03
最終更新:2019-07-07

やりたいこと

  • VSCodeの拡張機能を仮想マシン等リモート上にインストールして動かします
    ⇒拡張機能を動かすために必要な環境はすべてリモート側で構築します
  • ローカル側はWindows、リモート側はvagrantでCentOSを使用(rbenvでrubyを入れてあります)

なぜ調べたのか

Rubyの学習をWindows環境で始めたので、環境構築からスタートしたのですが、なるべくWindows側に環境設定をしたくないのでvagrantで実行環境を作成しました。
しかし、VSCodeで開発する際にRuby関連の拡張機能をインストールしようとすると「拡張機能を動かすのにRubyの環境が必要」というジレンマが発生してしまったので、色々調べた結果、VSCode Remote Developmentにたどり着きました。
(WindowsでRuby開発する場合、どういう環境構築をするのがいいかよく分かりません・・・)

インストール

  • 以下のサイトよりVisual Studio Code Insidersをインストールします
  • 通常版のVisual Studio Codeとは別アプリとしてインストールされます
    Download Visual Studio Code Insiders
  • インストール後起動画面(アイコンの色が通常版と異なります)

ローカル側での拡張機能のインストール

  • とりあえず日本語表示の拡張機能をインストールしていきます。
  • VSCodeは、Ctrl + Shift + P でコマンドパレットが開くので、目的の用語を入れると大体ヒットします

  • 続いて、今回試す機能「RemoteDevelopment」をインストールします。

  • インストール完了すると、左メニューにリモートアイコンが追加されます

sshconfigを設定する

  • 接続先の仮想マシン(vagrant)を起動して、ssh-configを確認します。
    vagrant up  
    vagrant ssh-config  
    ##実行後  
    Host Centos72  
    HostName 127.0.0.1  
    User vagrant  
    Port 2222  
    UserKnownHostsFile /dev/null  
    StrictHostKeyChecking no  
    PasswordAuthentication no  
    IdentityFile C:\~~~~~~~~  
    IdentitiesOnly yes  
    LogLevel FATAL  
  • 左メニューのリモートアイコンをクリック
  • Configure a SSH host.をクリック
  • configfileの選択「C:\Users\ユーザ名.ssh\config」

  • vagrant ssh-configの内容を貼り付けて保存
    (Hostをdefault → Centos72に変更しました)

  • Connection欄にCentos72が追加されるので、右クリック「COnnect to Host in Current Window」を選択するとリモートマシンに接続されます。

フォルダを開く

  • 左メニューのファイルアイコンをクリック>フォルダを開くより、リモートマシン上のフォルダを選択できます。
  • 指定したフォルダがエクスプローラーに表示されます
  • この状態で左メニューの拡張機能ボタンを押して確認すると「SSH:CENTOS72 -INSTALLED」には拡張機能が表示されず、「LOCAL-INSTALLED」には先ほどインストールしたRemote Develop関連の拡張機能が表示されています。
  • 今回は、Ruby関連の拡張をリモート上にインストールしました。

  • ローカル(Windows側)にrubyの環境がなくても、rubyの拡張(インテリセンス等)使えるようになりました

【メモ】リモート接続時のエラー①

  • remote sshした際に以下のようなエラーが発生しました

  • エラーメッセージ

    Can't connect to default: unreachable or not Linux x86_64 (操作可能なプログラムまたはバッチ ファイルとして認識されていません。)  
    ターミナルのプロセス コマンド 'cmd.exe /c (type "C:\Users\ユーザ名\AppData\Local\Temp\vscode-linux-multi-line-command-default.sh" | ssh  "default" bash) & exit /b 0' を起動できませんでした (終了コード: 255)  
  • 今回は、stackoverflowの回答を参考にsshクライアントをGit for Windowsのものに変更することで、うまく接続できました。
    Can't connect to Ubuntu: unreachable or not Linux x86_64 - IO is still pending on closed socket Issue #51 microsoft/vscode-remote-release

【メモ】リモート接続時のエラー②

追記2019/07/07>>
SSHでリモートマシンに接続しようとすると、下記のようなエラーメッセージが表示されたので、対応方法を記載しておきます。
Learn Moreボタンのリンク先にも載っていたますが、sshクライアントの指定が上手くいっていないのが原因です。

VSCodeの設定>Remote-SSHから「Remode.SSH:Path」にsshクライアントのexeパスを指定します。(もしくはsettings.jsonを直接編集)
私の場合はGit for Windowsのsshを使用するよう指定しました。

「リモート接続時のエラー①」では、拡張機能のjsファイルを直接書き換えましたが、こちらに設定したほうが良いです。

最後に

Windows側にあれこれ設定をしたくないので、Remote Development本当すばらしいです。
エディタ周りの環境も、リモート側で統一して管理できると考えると、環境構築・配布も楽になるんじゃないかな、と思いました。

記事が少しでもいいなと思ったらクラップを送ってみよう!
20
+1
@yayaの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする