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

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

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

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

* (2023/9/19) RSA鍵を使っていたのを ED25519に変更
* (2023/9/19) スクリーンショットのIPアドレスが192.168.14.27 と 192.168.14.56 が混ざっていますが、もともとRSA鍵をベースに作成したものを ED25519に変更する際、スクリーンショットの再取得を行ったため、リモート側のIPアドレスが変わったためなので、同じものと読み替えてください。

参考

https://linuxfan.info/ssh-ed25519

https://qiita.com/making111/items/474bed55252146e528e2


## この記事で扱うこと

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

## この記事で扱わないこと

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

## 準備作業

1. [TeraTerm](https://ja.osdn.net/projects/ttssh2/releases/p7801) をインストールします。
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 側) ED25519 秘密鍵/公開鍵の生成方法

### SSH鍵生成

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/5b3f3f8a-08c2-4cfb-ba4c-61abeeae1f90.png)

`鍵の種類` が `ED25519` になっていることを確認して `生成` を選ぶ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/44228b70-a884-4bde-a719-abbe71668044.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/e7954992-c2bd-9b96-86b7-a82114622276.png)


### 公開鍵の保存

`公開鍵の保存` を押す。

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

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

```
mkdir %USERPROFILE%\.ssh
```

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

### 秘密鍵の保存

1. `秘密鍵の保存` を押します。
2. このとき、以下のダイアログが出ますが、ここでは `はい` を押して、パスフレーズを空としておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/c0d4312f-c5fa-cd08-1b44-bbc4bb18c9a4.png)
3. 公開鍵の保存のところで、`%USERPROFILE%\.ssh` を指定したので、その場所が選択されています。
4. ファイル名はデフォルトの `id_ed25519` のまま、`保存` を押します。
5. `閉じる` ボタンを押して閉じます。

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

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

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

### ED25519 公開鍵をLinuxサーバーへ転送

1. Tera Term を使って、Linux サーバーに ユーザー名、パスワードを使用してログインします。
2. 生成したED25519 公開鍵が保存されているフォルダをエクスプローラで開きます。
3. `id_ed25519.pub` (=ED25519 公開鍵) を Tera Term のウィンドウにドラッグアンドドロップします。**id_ed25519 のほうではありません。**
4. `SCP` にチェックが入った状態のまま `OK` を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/3f04da16-d63b-4c7c-b9e4-0bdaa8654343.png)


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

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

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

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

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

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

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

1. サーバーに接続したときに表示される `SSH認証` ダイアログが表示されます。
2. `RSA/DSA/ECDSA/ED25519鍵を使う` にチェックを付けたままにします。
3. `秘密鍵` に秘密鍵のファイルパスを指定します。**ここでは`id_ed25519`のほうを指定します。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/6df44b82-dffe-8649-3acf-491fc5140047.png)
4. パスワードなしでログインできるのを確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/6e98c8d6-48e1-c13d-925e-6e90ca7c98fa.png)


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

1. `Remote - SSH` を検索してインストールします。
2. インストールするとリモート接続用のアイコンが増えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/8d8118f8-a860-c01a-a806-e3ad69ec837f.png)

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

1. リモート接続用のアイコンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/dc34728a-1b01-7335-c589-852e4b1db163.png)
2. `SSH TARGETS` あたりにマウスを移動すると、隠れているアイコンが表示されるので、設定アイコンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/9ed62564-ff7e-1d8f-f5d3-3f675b60871a.png)
3. 設定ファイルのパスが選択肢に出てくるので自分のユーザー用の設定を選択します。白色の塗りつぶしで隠している部分です。
![9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/82017e04-63bd-f745-f258-79ebaca12976.png)
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_ed25519
```

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

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

1. `SSH TARGETS` あたりにマウスを移動して、`+` ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/a1479e92-8cc4-ab5d-31a2-4923093bf38d.png)
2. `ユーザー名@linuxサーバー名` の形式で、指定して、`ENTER` キーを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/d6704de7-7b00-ab58-2b3c-4a4f4d652674.png)
3. 設定ファイルの選択画面になるので、自分のユーザーに対応する設定ファイルの場所を選びます。
4. サーバーの項目が追加されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/3e399180-704d-3bf4-beed-f1af5673c0a5.png)

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

1. `+` アイコンを選択すると、別ウィンドウが開いて、OS を確認する画面になるので `Linux` を選択して `ENTER` を押します。(うまくスクリーンショットが取れなかったので、スクリーンショットは省略)。ここをスキップするとうまく繋がりません。一番最初の接続は、裏でサーバー側のセットアップをするので、時間がかかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/d89a80b3-e55f-f18b-a7d9-67048bc266d1.png)
2. 別の `Visual Studio Code` のウィンドウが開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/b25d90f8-999d-d76d-ccfa-002e04b3b939.png)
特に変わったことがないように見えますが、`ファイル` メニューから`フォルダを開く` を選ぶと、以下のようにパスの部分が `/home/user` となっており、直接 Linux サーバー上のファイルシステムを開けるようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/813085c5-9a7b-9c21-efe4-79199bd34b4a.png)
3. OK を押すと、`192.168.11.56` のフォルダを直接参照できています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/62f4f2a7-a048-dc22-6688-76b48fb94aef.png)
4. 試しに `ファイル` メニューから `新規ファイル` を選んで、ファイルを保存してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/78fcee53-c939-2f8f-91cd-a20a676d5bad.png)
5. 別で開いている Tera Term のウィンドウで `ls -l` をしてみると、ファイルが作成されており、編集した内容と一致しているのを確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500246/b29b92f2-a4a1-a495-ee66-5da0f4656787.png)

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