code-serverを使ってVSCodeをリモートで使う

2019-06-28

概要

リモートのサーバにアクセスして開発をする方法の１つにcode-serverというツールを使う方法があります。 code-serverは内部でVisual Studio Code(VS Code)というIDEを使用しており、ブラウザから起動してあるcode-serverにアクセスして、そこで開発を進める事ができます。もともとVS Codeを使っているという事で、使用感としてはVS Codeとほとんど変わらず、プラグイン(拡張機能)もある程度動作します。

今回は、このcode-serverのインストールと使い方を紹介します。

環境

code-server 1.1119-vsc1.33.1

インストール

code-serverはGitHub上で開発が行われており、そこからダウンロードしてインストールします。

code-serverのGitHubのURLは次のものです。

GitHub - coder/code-server: VS Code in the browser

インストールはcode-serverを実行したい開発機の方にします。インストールの方法はいくつかあるのですが、今回は公開されているバイナリを使用してインストールする方法を紹介します。

次のところからバイナリをダウンロードできます。記事の執筆時点ではWindowsのバイナリがないため、LinuxとmacOSでしか動作しませんので注意してください。

Releases · coder/code-server

ダウンロードしたら、圧縮ファイルなので適宜解凍し、好きな場所に解凍したファイルを置きます。これでインストールは終わりです。

使い方

解凍したcode-serverの中には実行ファイルがあるので、そこまで移動し次のコマンドを実行します。

./code-server --allow-http --no-auth

これでcode-serverを起動できました。それぞれのオプションを説明すると、–allow-httpはhttpプロトコルでアクセスできるようにすることを表しています。デフォルトでは、httpsからのアクセスのみ受け付けているためリモートへのアクセス時に証明書のエラーが発生します。それを防ぐためにhttpからのアクセスを許可しています。 –no-authは、パスワードなしでアクセスできるようにすることを表しています。

もし、パスワードありでアクセスする場合は、–no-authを消して実行します。そうすると実行後の出力にパスワードがあるので、ブラウザからcode-serverにアクセスするときにそのパスワードを入力してアクセスします。

code-serverには、ブラウザからアクセスするのですがブラウザはなんでも良いのかというとそうではありません。私が確認した限りではVS Codeのショートカットキーの関係で一番Chromeがうまく動くと思っています。ただ、Chromeからそのままアクセスすれば良いのかというとそうではなく、Chromeのアプリモードを使用してアクセスした方が、Chromeのショートカットキーが有効にならずそのままVS Codeのショートカットキーを使えるためストレスなく使えます。 ChromeのアプリモードはOSによって方法が異なるためここでは紹介しません。各自調べましょう。

アクセスの際のURLは次のようになります。

https://リモートのアドレス:8443

またはhttpプロトコルを使用して次のようになります。

http://リモートのアドレス:8443

あとは、ブラウザからVS Codeと同じように操作できます。

さいごに

現在ではVS Code単体でリモートの環境にアクセスして開発をできるようになりました。しかしcode-serverを使えば、VS Codeをインストールできない環境でもブラウザからアクセスするだけで使えるというのは中々の利点ではないでしょうか。

code-serverを使いたい人の参考にしてもらえれば幸いです。