Visual Studio Codeでリモートマシン上のNode.jsファイルを直接操作（編集、デバッグ実行）する

実現すること

Visual Studio Codeでリモートマシン上のNode.jsファイルを直接操作（編集、デバッグ実行）します

　　　　
　　　　ローカルマシン(Windows)でリモートマシン(Linux)のNode.jsファイルを直接操作

対象者

• Visual Studio Codeを使ってNode.jsの開発をしている人
• LinuxマシンのファイルをViとかEmacsで編集するが煩わしいと思っている人
• ローカルで開発したコードをいちいちリモートのLinuxサーバに転送するのが面倒な人
• リモートのLinuxサーバのソースを直接デバッグ実行したい人

検証環境

• ローカルマシン

  • Windows 10
  • Visual Studio Code 1.13.0

• リモートマシン

  • AWS EC2 (Amazon Linux AMI 2017.03.0.20170417 x86_64 HVM)

リモートマシン側の準備

Node.js

インストール

$ sudo su
# curl -sL https://rpm.nodesource.com/setup_8.x | bash -
# yum install -y gcc-c++ make
# yum install -y nodejs

動作確認

# curl -sL https://deb.nodesource.com/test | bash -
# npm --v
# node -v

参考URL

リンク：https://github.com/nodesource/distributions#enterprise-linux-based-distributions

jmate

インストール

# npm -g install jmate

参考URL

リンク：https://github.com/jrnewell/jmate

SSH

セキュリティグループの設定でインバウンド、アウトバウンドともに52698ポートを許可します。

• タイプ：カスタムTCPルール
• プロトコル：TCP
• ポート範囲：52698
• ソース：許可したいIPアドレス

クライアントマシン側の準備

Visual Studio Code, Node.js

Visual Studio Code, Node.jsをインストールしておきます。

Windows用のSSHクライアントのインストール

Windowsで実行可能はSSHクライアント（ssh.exe）をインストールしPATHを通します。
SSHクライアントは、 git for windows などに含まれています。

SSH

キーペア

インスタンス生成時に作成したキーペア（*.pemファイル）を ~\.ssh に保存します。
ここでは、my-ec2.pem というファイル名で保存したものとして以降説明します。

configファイル

毎回長いsshコマンドをうたなくても大丈夫なようにconfigファイルに設定を書いておきます。

~\.ssh\config

ServerAliveInterval 60

Host my-ec2
    HostName ※EC2のIPアドレス
    User ec2-user
    IdentityFile ~/.ssh/my-ec2.pem
    RemoteForward 52698 127.0.0.1:52698

テスト

sshコマンドでサーバにアクセスできることを確認します。

> ssh my-ec2

自動的にログインできればSSHの設定完了です。

Remote VSCode

インストール

Visual Studio Code > EXTENSIONS (Ctrl+Shift+X) > Remote VSCode > Install

settings.jsonの設定

Visual Studio Code > File > Preferences > Settings (Ctrl+Comma)

User Settingsに以下を追記

  //-------- Remote VSCode configuration --------

    // Port number to use for connection.
    "remote.port": 52698,

    // Launch the server on start up.
    "remote.onstartup": true

※ "remote.onstartup": false の設定にした場合は、F1でcommand palleteを表示し、Remote: Start server でRemote VSCodeのサーバーを起動します。

ローカルのVisual Studio Codeでリモートのファイルを操作

1. Visual Studio Codeを起動します。

2. Visual Studio CodeのTerminalでサーバにSSH接続します。

   > ssh my-ec2
   

3. ファイルオープン
   Visual Studio Codeでリモートのファイルを開きます。

   $ jmate -p 52698 ファイル名.js
   

4. 編集とデバッグ実行
   4.1. ファイルを編集します。
   4.2. ソースコードにブレークポイントをはります。
   4.3. デバッグウィンドウを開きます。(Ctrl+Shift+D)
   4.4. デバッグ実行します。（F5）

　これで、ファイルの編集、ステップ実行、変数の参照、ウォッチ式の設定、コールスタックの参照、ブレークポイントの設定がローカルファイルと同様に動作するようになりました。