Help us understand the problem. What is going on with this article?

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

本記事の内容

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

目次

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

起動画面

image.png


環境

  • サーバ:Ubuntu16.04 (1号君)
  • ローカル:Ubuntu16.04 (2号君)

code-server 起動

ダウンロード

code-serverサイトのGitHubページの「releases」をクリック。
image.png

現状最新の1.31.1-100をダウンロードします。
image.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

起動時のオプションはこちら(最新)に書かれています。(記事を書いている時点で見ているのはこっち)

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


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

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

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

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

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

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

Screenshot from 2019-03-07 23-10-14.png

そうすればパスワードを求められるので起動時に表示されたパスワードを入力しめでたくVSCodeを使うことができます。
Screenshot from 2019-03-07 23-10-37.png

image.png

この通りにやれば起動時に開いているのはおそらくcode-serverを起動したディレクトリのはずです。起動時に直接ディレクトリを指定することもできるのですがFile > Open Folderから任意のディレクトリに飛んだほうが扱いやすいと思います。
image.png


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

issue : TaskQueue: Error running task. Invalid regular expression: #3519

これでいつもどおり使えるぞーと思っていましたがどうやらv1.10.0のVimが動かないようです。
image.png

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

(追記 2019/03/08現在:Vimのバージョンを下げてく対応してくれる模様なので次回のリリースを待ちましょう) issue comment

追記 2019/03/10 : めでたくv1.0.8がダウンロードできるようになりました!とりあえずvim操作ができるようになったので良かったです!
image.png


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

issue : How can I Install Another Version Extension #77

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

image.png
(T T) ... ナイ
image.png

通常であれば下のようにバージョンが表示されるのですが...
image.png

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

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

なんもわからん???

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

その他関連記事


Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away