VS Codeでリモートのファイルを編集&リモートデバッグする方法


(2020/4/28追記)
「公式のRemote Developmentあるし、この手順もう使わないなー」と思っていたのですが、WordPressのサーバとか勝手にvscode-serverインストールできない場所にアクセスする時にはまだまだ現役ですね。

リモートのWordPress上のファイルをローカルのVS Codeで編集できるのでちょっぴり便利です。
(追記ここまで)


目次

  1. VS CodeからLinux上のファイルを編集
    1. VS Codeの拡張機能「sftp」をインストール
    2. configファイルを作成
    3. configファイルを編集
  2. VS Codeからリモートデバッグ
    1. poweshellでsshが使えるように拡張をインストール
    2. SSHログイン
    3. おまけ(リモートログイン自動化)


1.VS CodeからLinux上のファイルを編集

1-A VS Codeの拡張機能「sftp」をインストール

同じようなことができるプラグインはいくつかありますが、sftpがおすすめです。


1-B configファイルを作成

コマンドパレットからSFTP: Configを実行します。

コマンドパレットはCtrl+Shift+Pで開けます。


1-C configファイル(sftp.json)を編集

設定ファイルを複数作れば複数の環境の設定も可能。

設定が必要な項目は以下

  • “name”:コンフィグの名称(デフォルトでもOKです)
  • “host”:リモート側のホスト名(or IPアドレス)を指定
  • “protocol”:sftp or ftpを選べる
  • “port”:リモート側のポート番号(ふつうは22ですが事前に調べておいた方が◎)
  • “username”:リモート側のユーザ名(rootでも動きました)
  • “pasword”:↑のユーザでログインする時のパスワード(書いておけば省略可です)
  • “remotePath”:リモート側のソースコードが置いてあるディレクトリのパス(サブディレクトリも対象になるので”/”を指定すれば全部見れます)
  • “uploadOnSave”:trueにすると保存するたびにアップロードを行う
  • “syncMode”:リモート上のファイルをどういう風に同期するか”update”は更新分だけを更新。”full”は存在しないファイルをdownload/upload時に削除してローカルとリモートを完全に同期させる

※コンフィグの詳細設定は↓
https://github.com/liximomo/vscode-sftp/wiki/config

これで、VSCodeだけでリモートのファイルを自由に編集できるようになります。
※最初だけ、”SFTP: Download”コマンドを入力する必要あり


2.VS Codeからリモートデバッグ

2-A poweshellでsshが使えるように拡張をインストール

最新版のVisual Studio Codeでは不要なので省略


2-B SSHログイン

VSCodeのターミナルを開いてsshコマンドを使用します。

ssh IPアドレス -p ポート番号 -l ユーザ名

※ターミナルが文字化けする場合は以下を参考にしてください。
https://www.mathkuro.com/?p=158


2-C おまけ(リモートログイン自動化)

リモートログインを自動で行わせる場合はVSCodeのsettings.jsonに以下を追加します。

“terminal.integrated.shellArgs.windows”: [ “-NoExit”, “ssh”, “リモートのIPアドレス”, “-l”, “ログインするユーザ名”, ],

※ローカルで作業したい時もあるだろうし、固定にするのはお勧めできませんが…

Leave a Reply

Your email address will not be published. Required fields are marked *