Visual Studio Code の Remote SSH で Linux 上のファイルを直接編集する

ここでは Windows 上で動作する Visual Studio Code で Linux 上のファイルを編集するようにします。
ここでは ubuntu 20.04.1 を使います。

同様の記事はいっぱいあると思いますが、自分でやってみた記録として残します。

この記事で扱うこと

• (Linux 側) SSH に接続できる設定
• (Windows 側) RSA 秘密鍵/公開鍵の生成方法
• (Windows 側 → Linux側) 生成したRSA公開鍵をLinuxサーバーへ転送
• (Linux 側) RSA公開鍵で Linuxサーバーにログインできるようにする設定
• (Windows 側) Visual Studio Code の SSH Remote プラグイン のインストール
• (Windows 側) Visual Studio Code の SSH Remote プラグイン の設定 (RSAの秘密鍵の場所を設定)
• (Windows 側) Visual Studio Code の SSH Remote プラグイン の設定 (接続先のLinuxサーバーを追加)
• (Windows 側) Visual Studio Code の SSH Remote プラグイン を使っての編集

この記事で扱わないこと

• SSH って何?
• Visual Studio Code って何?
• Visual Studio Code のインストール方法
• Linux のインストール方法
• TeraTerm のインストール方法

準備作業

1. TeraTerm をインストールします。
2. 接続先の Linux を用意します。
3. Visual Studio Code をインストールします。

(Linux 側) SSH に接続できる設定

https://qiita.com/m-tmatma/items/9a562863ca99ca6c0d1c を参考に以下コマンドを実行してSSH を有効化する。

sudo apt install -y openssh-server
sudo systemctl start ssh
sudo systemctl enable ssh

(Windows 側) RSA 秘密鍵/公開鍵の生成方法

SSH鍵生成

Tera Term を起動して、メニューから SSH鍵生成 を選ぶ

鍵の種類 が RSA になっていることを確認して、ビット数 を 4096 にして、生成 を選ぶ

必要に応じて、コメント 欄に後でわかるようにコメントを書く

公開鍵の保存

公開鍵の保存 を押す。

この際、保存先を指定する必要がありますが、通常は %USERPROFILE%\.ssh のフォルダを指定します。
%USERPROFILE% というのは C:\Users\自分のユーザー名 のことです。

このディレクトリが存在しない場合は、以下コマンドで作っておきます。

mkdir %USERPROFILE%\.ssh

ディレクトリを作成したら、そのディレクトリを指定します。ファイル名はデフォルトの id_rsa.pub のまま 保存 を押します。

秘密鍵の保存

1. 秘密鍵の保存 を押します。
2. このとき、以下のダイアログが出ますが、ここでは はい を押して、パスフレーズを空としておきます。
3. 公開鍵の保存のところで、%USERPROFILE%\.ssh を指定したので、その場所が選択されています。
4. ファイル名はデフォルトの id_rsa のまま、保存 を押します。
5. 閉じる ボタンを押して閉じます。

重要 (セキュリティに関する注意)

秘密鍵は、非常に重要な情報なので、これが漏れないようにする必要があります。
これはパスワードと同様な情報なのでこれが漏れると、Linux サーバーに自由にログインできてしまうので厳重に管理する必要があります。

(Windows 側 → Linux側) 生成したRSA公開鍵をLinuxサーバーへ転送

RSA公開鍵をLinuxサーバーへ転送

1. Tera Term を使って、Linux サーバーに ユーザー名、パスワードを使用してログインします。
2. 生成したRSA公開鍵が保存されているフォルダをエクスプローラで開きます。
3. id_rsa.pub (=RSA公開鍵) を Tera Term のウィンドウにドラッグアンドドロップします。id_rsaのほうではありません。
4. SCP にチェックが入った状態のまま OK を押します。

RSA公開鍵が Linux に転送されたか確認

Tera Term のコンソール上で ls を実行すると id_rsa.pub が転送されているのを確認できます。
間違えて、id_rsa の方を転送しないようにする必要があります。(この記事を書いているときに間違えました)

(Linux 側) RSA公開鍵で Linuxサーバーにログインできるようにする設定

転送した RSAの公開鍵を使って、ログインできるための設定を行います。
https://m-tmatma.github.io/ssh/auto_login.html を参考に、転送した公開鍵を配置します。

mkdir -p ~/.ssh
cat id_rsa.pub >>  .ssh/authorized_keys
rm  id_rsa.pub
chmod 755 ~
chmod 700 ~/.ssh

この手順で id_rsa.pub は不要になるので削除しています。

(Windows 側) 設定した公開鍵で Linux にログインできるのを確認

1. サーバーに接続したときに表示される SSH認証 ダイアログが表示されます。
2. RSA/DSA/ECDSA/ED25519鍵を使う にチェックを付けたままにします。
3. 秘密鍵 に秘密鍵のファイルパスを指定します。ここではid_rsaのほうを指定します。
4. パスワードなしでログインできるのを確認できます。

(Windows 側) Visual Studio Code の SSH Remote プラグイン をインストール

1. Remote - SSH を検索してインストールします。
2. インストールするとリモート接続用のアイコンが増えます。

(Windows 側) Visual Studio Code の SSH Remote プラグイン の設定 (RSAの秘密鍵の場所を設定)

1. リモート接続用のアイコンをクリックします。
2. SSH TARGETS あたりにマウスを移動すると、隠れているアイコンが表示されるので、設定アイコンをクリックします。
3. 設定ファイルのパスが選択肢に出てくるので自分のユーザー用の設定を選択します。白色の塗りつぶしで隠している部分です。
4. Visual Studio Code で ssh の設定ファイルを編集する画面になります。
5. 以下のような内容です。

# Read more about SSH config files: https://linux.die.net/man/5/ssh_config
Host alias
    HostName hostname
    User user

これに、IdentityFile の設定を追加して、保存します。
以下のような感じ

# Read more about SSH config files: https://linux.die.net/man/5/ssh_config
Host alias
    HostName hostname
    User user
    IdentityFile C:\Users\winuser\.ssh\id_rsa

2020/12/29 更新 IdentityFile に秘密鍵ではなく、公開鍵を指定していたのを修正

(Windows 側) Visual Studio Code の SSH Remote プラグイン の設定 (接続先のLinuxサーバーを追加)

1. SSH TARGETS あたりにマウスを移動して、+ ボタンを押します。
2. ユーザー名@linuxサーバー名 の形式で、指定して、ENTER キーを押します。
3. 設定ファイルの選択画面になるので、自分のユーザーに対応する設定ファイルの場所を選びます。
4. サーバーの項目が追加されます。

(Windows 側) Visual Studio Code の SSH Remote プラグイン の設定 (接続先のLinuxサーバーを追加)

1. + アイコンを選択すると、別ウィンドウが開いて、OS を確認する画面になるので Linux を選択して ENTER を押します。(うまくスクリーンショットが取れなかったので、スクリーンショットは省略)。ここをスキップするとうまく繋がりません。一番最初の接続は、裏でサーバー側のセットアップをするので、時間がかかります。
2. 別の Visual Studio Code のウィンドウが開きます。 特に変わったことがないように見えますが、ファイル メニューからフォルダを開く を選ぶと、以下のようにパスの部分が /home/user となっており、直接 Linux サーバー上のファイルシステムを開けるようになっています。
3. OK を押すと、192.168.11.56 のフォルダを直接参照できています。
4. 試しに ファイル メニューから 新規ファイル を選んで、ファイルを保存してみます。
5. 別で開いている Tera Term のウィンドウで ls -l をしてみると、ファイルが作成されており、編集した内容と一致しているのを確認できます。

別ウィンドウの Visual Studio Code でサーバーのファイルを開きましたが、同一ウィンドウで開くこともできます。