Code server リモートサーバSSH経由でVSCodeを使ってみた


## 本記事の内容
リモートサーバ上のコーディングがVSCodeでできる[code-server](https://github.com/codercom/code-server)が公開されているとかいうことでTwitterで話題になっていたので自分も使ってみました。
簡単なつかいかたのメモを残そうかと思い書いています。
ローカルのVSCodeにだいぶ近い間隔で扱えます。
ただ、まだ使えない機能など(特にプラグイン)があったりしますので今の時点でわかっていることをまとめます。

目次

- [code-server 起動](#code-server-起動)
    - [ダウンロード](#ダウンロード)
    - [起動](#起動)
- [ローカルのパソコンからアクセス](#ローカルのパソコンからアクセス)
- [Vimのプラグインが動かない件について](#vimのプラグインが動かない件について)
    - (2019/03/07現在)
    - (2019/03/08現在：Vimのバージョンを下げて対応してくれる模様)
    - (2019/03/10現在：Vimのバージョンを`v1.0.8`に下げてもらえたのでとりあえず使える)
- [Install Another Version で他のバージョンが表示されない件](#install-another-version-で他のバージョンが表示されない件) (2019/03/07現在)

最後のやつは自分では解決できなかったやつです。
VSCode初心者なのでコメントで教えてください ( _ _)

起動画面
↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/195174/96b39850-ce98-41ad-6cea-42d2d6722b98.png)

---


## 環境
- サーバ：Ubuntu16.04 (1号君)
- ローカル：Ubuntu16.04 (2号君)

---


## code-server 起動


### ダウンロード
[code-server](https://github.com/codercom/code-server)サイトのGitHubページの「releases」をクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/195174/bd0f8f8a-0e4f-875e-805c-ba3e3b204360.png)

現状最新の`1.31.1-100`をダウンロードします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/195174/a9e201fa-01b1-658f-afa3-cea144253646.png)

`code-server-1.31.1-100-linux-x64.tar.gz` で右クリックしてリンクのアドレスをコピーしサーバ上でダウンロードします。そして解凍。

```
ssh <server>
cd <適当なディレクトリ>
wget https://github.com/codercom/code-server/releases/download/1.31.1-100/code-server-1.31.1-100-linux-x64.tar.gz
tar -zxvf code-server-1.31.1-100-linux-x64.tar.gz
```


### 起動

ポートは指定しなければデフォルトで8443番を使いますが`--port`で指定できます。ここでは`55555`番ポートを使うことにします。(ホストも`--host`で指定可能ですがここではlocalhostを使うので指定していません。)

```
cd code-server-1.31.1-100-linux-x64/
./code-server --port=55555
```

起動時のオプションは[こちら(最新)](https://github.com/codercom/code-server/blob/master/doc/self-hosted/index.md#usage)に書かれています。(記事を書いている時点で見ているのは[こっち](https://github.com/codercom/code-server/blob/17267bd80149b2160459bf3fb980e88f7e1c31fa/doc/self-hosted/index.md#usage))

起動するとパスワード(ここでは`f494aae9d3856a386d265e01`)が表示されるのでコピーしてください。

![](https://i.imgur.com/gsLqxAk.png)

---


## ローカルのパソコンからアクセス

まずターミナルからSSHする際にポートフォワーディングしてやります。起動時に指定したポートは`55555`なのでそれをトンネリングしてあげます。ローカルのポートは`44444`としましょう。

```
ssh -L localhost:44444:localhost:55555 <サーバ>
```

`-L`オプションについてここでは詳しく触れませんが左側がローカルで右側がサーバです。

これでローカルのブラウザで http://localhost:44444 にアクセスすれば初回はChromeで以下のような画面が表示されます。

![](https://qiita-image-store.s3.amazonaws.com/0/195174/46b54527-a1d4-8b40-a586-7b480352dac5.png)

ここでAdvancedを展開して「Proceed to localhost」をクリックします。

![Screenshot from 2019-03-07 23-10-14.png](https://qiita-image-store.s3.amazonaws.com/0/195174/3f9c5381-aeeb-b2de-f7fa-d4d0faf82fb0.png)

そうすればパスワードを求められるので起動時に表示されたパスワードを入力しめでたくVSCodeを使うことができます。
![Screenshot from 2019-03-07 23-10-37.png](https://qiita-image-store.s3.amazonaws.com/0/195174/08a71b05-7100-07d7-f442-befec3f32d7a.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/195174/9dfa1964-60a0-305c-3734-890fb22df30c.png)

この通りにやれば起動時に開いているのはおそらくcode-serverを起動したディレクトリのはずです。起動時に直接ディレクトリを指定することもできるのですが`File` > `Open Folder`から任意のディレクトリに飛んだほうが扱いやすいと思います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/195174/ddd31e5a-93e4-8218-0444-efe4965d300c.png)

---


## Vimのプラグインが動かない件について

issue : [TaskQueue: Error running task. Invalid regular expression: #3519](https://github.com/VSCodeVim/Vim/issues/3519)

これでいつもどおり使えるぞーと思っていましたがどうやらv1.10.0のVimが動かないようです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/195174/0797924d-b344-6675-2899-ab5ad03b4c49.png)

内容は[VSCodeVim/Vim](https://github.com/VSCodeVim/Vim)のこちらのissue([TaskQueue: Error running task. Invalid regular expression: #3519](https://github.com/VSCodeVim/Vim/issues/3519))と同様なのですが`code-server v1.31.1-100`上では治っていないようですね。

(追記 2019/03/08現在：Vimのバージョンを下げてく対応してくれる模様なので次回のリリースを待ちましょう) [issue comment](https://github.com/codercom/code-server/issues/61#issuecomment-470649174)

追記 2019/03/10 : めでたくv1.0.8がダウンロードできるようになりました！とりあえずvim操作ができるようになったので良かったです！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/195174/b12812cf-4656-e2ba-2be0-d5d9ee065c65.png)


---


## Install Another Version で他のバージョンが表示されない件

issue : [How can I Install Another Version Extension #77](https://github.com/codercom/code-server/issues/77)

vimが動かないので「Install Another Version」からバージョンを下げようととしましたがVSCode内の検索に引っかかりませんでした。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/195174/060ce843-b2a9-196a-6efa-f984a26bb745.png)
(T T) ... ﾅｲ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/195174/52ace7a3-7099-e415-85f8-1f2797c9e4f5.png)

通常であれば下のようにバージョンが表示されるのですが...
![image.png](https://qiita-image-store.s3.amazonaws.com/0/195174/06286e3a-4260-a8f0-5275-71dc890922d2.png)

ちなみにVSIXからの手動インストールも失敗しました
`vim-1.0.8.vsix`を読み込んだときのエラー

```
Invalid tar header. Maybe the tar is corrupted or it needs to be gunzipped?
```

なんもわからん？？？

だれかお分かりになる方がいれば教えてください。Issue等で解決されていれば更新したいと思います。

## その他関連記事
- [オンプレでVS Code as a Serviceできるcode-serverを試す - Qiita](https://qiita.com/m5d215/items/f5ae82ad9a3726519904)

---