【Visual Studio Code】リモートサーバーにSSHしてファイルを直接編集する方法

こんにちは！！ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。

リモートサーバーにSSHして、Visual Studio Code 上でファイル編集をする方法をまとめます。

これまではターミナルでSSHしてVimを使ってPythonやPHP、Bashファイルの編集をしていたのですが、Visual Studio Code の拡張機能の恩恵に預かろうと思い実践してみました。

本記事の目的
Visual Studio Code を使ってリモートサーバーにSSHして、Visual Studio Codeでファイルを直接編集するまでの方法をまとめる。

リモートサーバーにSSHするためには
SSH FS のインストールから設定まで
- SSH FS をインストールしよう！
- 接続情報を登録しよう！！
おわりに

リモートサーバーにSSHするためには

Visual Studio Code を使ってリモートサーバーに SSH するには Visual Studio Code のプラグイン「SSH FS」を使います。

さっそくインストールと設定をしていこう！！

SSH FS のインストールから設定まで

SSH FS をインストールしよう！

Visual Studio Code のプラグイン検索をします。

検索ワード→「SSH FS」

インストールが終わると「SSH FILE SYSTEMS」というメニューが追加されます。

「SSH FILE SYSTEMS」を開き、ここで右クリックすると、「Creat a SSH FS configuration」が出てくるのでクリックします。

接続情報を登録しよう！！

「Creat a SSH FS configuration」をクリックすると下の画像のようなメニューが表示されます。

接続先の名前を登録します。

するとデフォルトの値が入ったファイルがすぐに生成されます。

環境に合わせて設定の変更をしてください。

わたしの環境の場合

AWS EC2インスタンス Ubuntu サーバーに対してSSHしたときのサンプルコードです。

{
    "label": "sample",
    "root": "/home/ubuntu",
    "host": "x.x.x.x",
    "port": 22,
    "username": "ubuntu",
    "privateKeyPath": "/Users/pempath/.ssh/xxx.pem",
    "password": false
}

{

"label": "sample",

"root": "/home/ubuntu",

"host": "x.x.x.x",

"port": 22,

"username": "ubuntu",

"privateKeyPath": "/Users/pempath/.ssh/xxx.pem",

"password": false

}

label：左のリストに表示されるときの名前
root：SSH接続先のルートディレクトリ
host：IPアドレス
port：22
username：user name
privateKeyPath：pemキーのパスを記入
password：SSH時のパスワード（環境に応じて、true or false）

接続後の様子