vscodeがインストールされていないサーバ(要sshd)のファイルを、vscodeで編集する方法

# 最初に
- リモートサーバのファイル編集方法を探したところ、拡張機能 `Remote VSCode` を使った方法が多くヒットしましたが、「リモートにsshで接続してrmateをインストール＆動かさなければならない。１ファイル単位でしか編集できない」といった制約がありました。
- 他の方法を探したところ、最近の vscode のアップデートにより「リモートサーバのフォルダを(ローカルのフォルダと同じように)ワークスペースに追加できるようになった」ようです。 
- これを実現する拡張機能として `Remote Workspace` や `SSH FS` などいくつかありました。
- 利用者が多く、設定が簡単そうに見えたので `Remote Workspace` を使ってみました。
- **sshさえつながる環境があれば、vscodeの簡単な設定だけで、リモートサーバのファイルを（あたかもローカルファイルと同じように） vscode で編集できるようになります。**
- **つまり、vscode がインストールされていないサーバのファイルを、ローカルの vscode を使って編集できるようになります。**

# これは何？
- ローカルの Visual Studio Code から、リモートサーバのフォルダを vscode のワークスペースへ追加し、編集できるよう設定します。
- 拡張機能 [Remote Workspace - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=mkloubert.vscode-remote-workspace) を使います。
    - ここでは SFTP を使いますが、FTP、S3、WebDav、slack、dropbox にも接続できるようです。


- この拡張機能を使ったときの画面イメージです。リモートサーバ(vagrantで動かしている仮想サーバ)の `/home/vagrant` フォルダ以下が見えてます。当然編集もできます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/275337/08f3e4b9-16bd-ed61-84d8-ce34faea0745.png)

# 使用条件
- ネットワーク的には、リモートサーバにSSHで接続できればOKです。(SFTP＝SSHを使ったFTP を使います)
- ローカルのvscodeの設定だけで、リモートサーバへの設定は不要です。
- Windows10のvscodeを使いましたが、恐らく他のOSのvscodeでも大丈夫だと思います。

```
ローカル                              リモートサーバ
+-----------+                        +-------------+
| vscode    |--------(SFTP)--------->| sshd        |
|           |<-----------------------|             |
+-----------+                        +-------------+
| Windows10 |                        | Linux       |
+-----------+                        +-------------+
```

# 設定方法
- ここではリモートサーバとして、vagrantの仮想マシンへ接続する例をあげます。

## 0) リモートへのSSH接続情報を確認しておきます。
- `vagrant ssh-config` で接続情報を表示します。
- ここでチェックしておくのは、`HostName`、`User`、`Port`、`IdentityFile` です。

```shell
$ vagrant ssh-config
Host default
  HostName 127.0.0.1・・・これと
  User vagrant・・・これと
  Port 2222・・・これと
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile C:/hoge/.vagrant/machines/default/virtualbox/private_key・・・これ。
  IdentitiesOnly yes
  LogLevel FATAL
```

## 1) 拡張機能 Remote Workspace をインストールします。
- remote workspace で探して、インストールしてください。

    ![image.png](https://qiita-image-store.s3.amazonaws.com/0/275337/0a9e2ccb-cb8d-12de-3af6-2185afcf20af.png)

## 2) `test-remote-workspace.code-workspace` ファイルを作ります。
- 新規に以下の内容でファイルを作ります。（拡張子が `.code-workspace` であればファイル名は何でもいいです）
- `folders[].uri` は、先にチェックしておいたSSHの接続情報に書き換えてください。

```json:aaa
{
	"folders": [
		{
			"uri": "sftp://vagrant:vagrant@127.0.0.1:2222/home/vagrant?debug=1&key=C:/hoge/.vagrant/machines/default/virtualbox/private_key&dirMode=775&mode=664",
			"name": "vagrant@127.0.0.1"
		}
	],
	"settings": {}
}
```


## 3) `test-remote-workspace.code-workspace` ファイルをダブルクリックします。
- ダブルクリックで vscode が起動すると自動的にリモートサーバに接続します。

- 接続成功した場合は、次の画面になります。
    ![image.png](https://qiita-image-store.s3.amazonaws.com/0/275337/6152462e-742e-6c9b-864d-6c26dae00a40.png)

- `folders[].uri` に含まれる `debug=1` を `debug=0` に変更しておきましょう。(デバッグログ出力をOFF)

- もしも、接続に失敗したときは、次の画面になります。
    ![image.png](https://qiita-image-store.s3.amazonaws.com/0/275337/af144935-bc8e-2a59-99b0-14c1fe69e14c.png)

- `"C:\Users\<ユーザ名>\.vscode-remote-workspace\.logs\<YYYYMDD>.log"` にログがあるので、これを確認すれば解決のヒントが得られるかも。

# tips : vscode(Win10)から、Ubuntu(Vagrant)上で起動した、LXDコンテナ内のソースファイルを編集する。

(直接sshでつなげることができないマシンのソースをvscodeで編集したい場合、git bash の ssh でポートフォワードすればよい）

- 構成はこんな感じ

```
vscode(Win10) --> git bash(Win10) --> vagrant-bionic(Ubuntu) --> c1.lxd(Ubuntu)
```

- vscodeからsshでコンテナのsshdに直接つながるようにする。
    - vscode から localhost:22 に接続すると、c1.lxd コンテナの 22 へつながるようにする。（VG:vagrantによるポートフォワード設定、PF:sshによるポートフォワード設定）

```
localhost:22 ==(PF)==> localhost:2222 ==(VG)==> vagrant-bionic:22 ==(PF)==> c1.lxd:22
```

### 1) Windows10(git bash) での設定

- ~/.ssh/config (vagrant ssh-config からコピー)

```sh
Host vagrant-bionic
  HostName 127.0.0.1
  User vagrant
  Port 2222
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile C:/hoge/.vagrant/machines/default/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL
```

```sh
$ ls -al ~/.ssh
total 31
drwxr-xr-x 1 myuser 197121    0 9月  20 23:55 ./
drwxr-xr-x 1 myuser 197121    0 9月  20 23:55 ../
-rw-r--r-- 1 myuser 197121  372 9月  20 23:29 config
-rw-r--r-- 1 myuser 197121 1679 9月  17 21:17 id_rsa
-rw-r--r-- 1 myuser 197121  403 9月  17 21:17 id_rsa.pub
-rw-r--r-- 1 myuser 197121 1737 9月  20 23:38 known_hosts
```

- ポートフォワード設定

```sh
$ ssh -L 22:c1.lxd:22 vagrant-bionic
$ ssh ubuntu@localhost -p 22
```

### 2) Windows10 vscode の ワークスペース設定ファイル(.code-workspace)

- c1.code-workspace

```json
{
  "folders": [
    {
      "uri": "sftp://ubuntu@localhost:22/home/ubuntu?debug=1&key=C:/Users/username/.ssh/id_rsa&dirMode=775&mode=664",
      "name": "c1.lxd"
    },
  ],
  "settings": {}
}
```