🗿

VS Code Serverの使い方

2022/07/10に公開

VS Code

idea

VSCodeのJune2022 Updateが正式に公開されました。
本稿では、アップデートと同時に公開されたVisual Studio Code Serverの使い方について解説します。

※2022-08-12 Private Previewにあたったのでトンネリング機能についての説明を追加しました

概要

VSCode Serverの概要については、下記記事を閲覧ください。
（窓の杜）https://forest.watch.impress.co.jp/docs/news/1423348.html
（公式）https://code.visualstudio.com/blogs/2022/07/07/vscode-server

Code Serverは将来的にVSCodeのcode(1)に統合されることを念頭に設計された機能で、ChromeなどのWebブラウザーをVSCodeのフロントエンドとして利用します。
これまでもブラウザーの中で完結するVSCodeとしてvscode.devやgithub.devを利用できましたが、code-serverはあくまでコンピューター上で実行されているのでLanguage serverなどの外部プロセスを利用する拡張なども利用できます。
また、vscode.devからローカルのサーバにアクセスが可能になるトンネリング機能をサポートしているため、サーバーを開発用のDockerにインストールして別のマシンのvscode.devからアクセスするといったことが可能になります。
トンネリング機能のみPrivate Previewとしてアクセスをリクエストする必要がありますが、ローカルにサーバーを建てるだけであればwaitlistに登録することなく利用できます。

インストール

基本的にすべての手順は下記ページにあります。正確な情報が知りたい場合、こちらを参照してください。

下記スクリプトをダウンロード後実行するだけで、インストールが完了します。
途中、管理者権限を要求されます。インストール先→/usr/local/bin/code-server

$ wget -O- https://aka.ms/install-vscode-server/setup.sh | sh

code-serverコマンドにPATHが通っていることを確認してください。

アンインストール

$ sudo code-server uninstall

また、~/.vscode-server・~/.vscode-cliディレクトリが生成されています。任意で削除してください。

起動方法

トンネリングサービスはまだ一般に公開されていませんのでサーバーをローカルにのみ公開する方法を紹介します。

$ code-server serve-local
ライセンスに同意するかのプロンプトが出るので、同意してください。軽く読んだ限りだと、アプリケーションの画像などを公開することを制限するような文言は見られませんでした。
--accept-server-license-termsオプションをつけると、ライセンスに同意したものとしてサーバーが起動します。

ログに下記のようなメッセージが表示されます。URLにローカルからアクセスするとVSCodeを利用できます。
Web UI available at http://localhost:8000/?tkn=0e6b04be-fdf2-4392-b2bf-07ffd7d90143

トンネリングサービスを利用する

PrivatePreviewはGithubのユーザーネームに基づいて管理されます。応募すると、利用できるようになるタイミングでメールが届きます。
この状態で、$ code-serverコマンドを実行するとGithubへのログインURLが表示されるのでアクセスしてください。

Githubでログインが完了するとコンピュータの名前を決めることができるようになるので、好きな単語を打ち込むかEnterキーを押すとトンネリングが開始されます。

ログに表示されたURLからアクセスするか、下記URLにアクセスするとトンネリングを利用できるようになります。

https://insiders.vscode.dev/+ms-vscode.remote-server/[任意の名前]

名前を変更する

code-server rename --name [任意の名前]

終了

Ctrl-Cでサーバーを終了できます。カーソルの描画がおかしくなる場合はresetコマンドを実行してください。
その他のコマンドは$ code-server -hから確認できます。

小技

WindowsのChromeではCtrl-Wなどのキーがブラウザーに取られてしまいます。
Chromeの「ショートカットを作成」→「ウィンドウで開く」機能を利用すると、ほとんどのショートカットを利用できるようになるほか、画面を広く使うことができるため活用してください。

以上