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

  • 7
    いいね
  • 0
    コメント

実現すること

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

    debug.png
    ローカルマシン(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)

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