JupyterLabのランチャーからVSCodeを起動できるようにする

はじめに

D2Cには社内のデータサイエンティストのためのデータ分析基盤があります。
その分析基盤のサービスの一つにJupyterHubがあり、ユーザはJupyterLabのインスタンスを起動して利用することができます。
JupyterLab上でVSCodeを使用したいという需要があり、以前はユーザが自分でJupyterLabのインスタンス上にVSCode Serverをインストールして使用していました。
この方法だとユーザが自分でインストールする必要があったり、GitHub認証が必要なのでGitHubのアカウントを持っていないユーザの場合はGitHubのアカウントを作成する必要があったりでユーザ側に手間がありました。
JupyterHubの認証にはCognitoを使用しています。
JupyterHubにログインしている状態であれば他の認証が不要でユーザが自分でインストールしなくてもVSCodeを使用できる方法を導入しました。

Jupyter Server Proxy

https://github.com/jupyterhub/jupyter-server-proxy

Jupyter Server ProxyはJupyterLabのインスタンス上で起動しているWebサービスにJupyterLabから接続できるようにするJupyterLabの拡張機能です。
設定したサービスはJupyterLabのLauncherから起動できます。
JupyterLabのURLがhttps://example.com/user/username/labの場合、VSCodeのサービス名をcodeとして設定するとhttps://example.com/user/username/codeに接続することでVSCodeに接続できます。

code-server

https://github.com/coder/code-server

code-serverを使用することでVSCodeをブラウザで利用できます。
VSCode自体にもブラウザから利用ができるserve-webコマンドがありますが、JavaScriptやWebSocketなどの一部のURLが絶対パスになっていてJupyter Server Proxy経由で接続しようとすると404になってしまうためcode-serverを使用することにしました。

インストールと設定

Jupyter Server Proxyはpipでインストールできます。

pip install jupyter-server-proxy

code-serverはインストール用のスクリプトを実行してインストールします。

curl -fsSL https://code-server.dev/install.sh | sh

インストールが完了したらJupyter Server Proxyの設定を行います。
jupyter_notebook_config.pyに以下の設定を追記します。

c.ServerProxy.servers = {
    "code": {
        "command": [
            "code-server",
            "--disable-telemetry",
            "--auth",
            "none",
            "--socket",
            "{unix_socket}",
        ],
        "launcher_entry": {
            "enabled": True,
            "icon_path": "/icon/code.svg",
            "title": "Visual Studio Code",
        },
        "unix_socket": "/tmp/code-server",
    }
}

codeはcode-serverに接続するURLのプレフィックスとして利用されます。
commandにcode-serverを実行するコマンドを記述します。
unix_socketはUNIXドメインソケットでアプリケーションに接続する場合に設定するパスです。TCPで接続する場合は設定不要です。
unix_socketを設定した場合はコマンド内で{unix_socket}と記述することでunix_socketに設定した値を埋め込むことができます。
TCPで接続する場合は{port}と記述することでJupyter Server Proxyがアプリケーションに接続するときに使用するポートを埋め込むことができます。
launcher_entryはJupyterLabのランチャーに表示するタイトルやアイコンの設定です。設定しなくても使用できます。

上記の設定を行ったdocker imageを作成しJupyterHubで起動してみました。
ランチャーにVisual Studio Codeの項目が追加されています。

クリックすると新しいタブでVSCodeが開きました。JupyterHubの認証で接続できるのでGitHubでログインする必要はありません。
画像はURLの一部を隠していますが/codeの前はJupyterLabのURLの/labの前と同じです。

おわりに

vscode.dev経由のトンネリングやGitHub認証なしでJupyterLabからVSCodeを利用できるようにできました。
今までの方法ではユーザがGitHubアカウントを用意する必要がありましたが、今回の方法ではJupyterを起動してすぐにランチャーからVSCodeを起動できるようになります。