Edited at

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

More than 1 year has passed since last update.


実現すること

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)


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