Docker コンテナ上の Jupyter Notebook を VSCode Remote Development で編集する

[創薬 Advent Calendar (DRY side)](https://adventar.org/calendars/4106) ６日目記事

## (コンテナ上の) Jupyter Notebook で RDKit をいい感じに使いたい
昨年から今年にかけて [創薬レイドバトル](https://gist.github.com/souyakuchan/7f9add656d9d6b91f02f6939b88aa2c8) と称した創薬スクリーニングイベントを開催した際、参加の敷居を下げるため、達人 [@yamasakih](https://qiita.com/yamasakih) が [raziのDocker-composeで創薬レイドバトル2018用のJupyter Notebookからアクセスできる化合物データベース](https://qiita.com/yamasakih/items/db2e2cf0603de975a25c) を用意してくれた。数百万化合物あるライブラリを簡便に扱える大変便利な環境だ。初心者もすぐにコンテナ環境上で RDKit を使い始めることができる。Docker for Windows を使えば Windows 上でも実行可能だ。

一方、今年の 6 月頃、VSCode に Remote Development 機能が実装され、コンテナに接続して開発できるようになった上、10 月には VSCode の Jupyter サポートも加わった。つまり、コンテナ上の Jupyter 環境にホスト OS 側の VSCode から繋げるようになった。上記の創薬用コンテナ環境の Jupyter Notebook も VSCode からいい感じに使うことができる。ただし初見だと躓いたところがあるので、立ち上げ方を簡単にまとめておく。

## 手順
### 1. コンテナ立ち上げ
[raziのDocker-composeで創薬レイドバトル2018用のJupyter Notebookからアクセスできる化合物データベース](https://qiita.com/yamasakih/items/db2e2cf0603de975a25c) 環境はセットアップ済みとして、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546894/bd280e9c-a1d9-d9fb-bbc3-23bda09476b9.png)
コンテナを立ち上げておく。（創薬レイド用の当該環境に限らず、Jupyter の入っている任意のコンテナで読み替えて頂いてよい）

### 2. VSCode からコンテナに Remote Development 接続
左の Remote Explorer アイコンから
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546894/5b60391d-37b4-e1c2-46bd-88baf652cc3d.png)
立ち上がっているコンテナを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546894/81474bea-5311-4844-ffc3-6b0358b023f2.png)
繋ぐ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546894/99b5f0bc-5a88-920e-b2ee-c9fe3b3bba0f.png)
繋がる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546894/2a624c27-1308-7c76-fce5-2b6b96b0475e.png)

### 3. コンテナにアタッチした VSCode に extension をインストール
ホスト OS 上の VSCode 本体に Python 拡張がインストールされていても、コンテナにアタッチして起動した VSCode 内ではそれは認識されないので、新たにインストールする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546894/ac8a38cf-6f72-c3d3-c399-b527a20b56de.png)
左の Extensions アイコンから
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546894/a9f6bcdd-2884-1922-53fb-063ca471f66b.png)
Python 拡張を新たにインストールする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546894/e3e53006-9b0d-f7c0-9657-0167b85dbe9e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546894/5003a54a-c62a-fcfb-b12d-dbe89ca7b2b4.png)
リロードする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546894/2e1a2ca2-610f-fdb5-0d34-ffb682306939.png)
入った。

### 4. コンテナ上の Jupyter に接続する
上記のコンテナ起動時に自動的に立ち上がっている Jupyter server に繋げられるかと思うと繋げられない。（存在しないパスワードを要求される）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546894/21825a5f-8234-97a2-9e85-bce7cbb6f082.png)
コマンドパレットから、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546894/b7183f98-efb2-d9a0-ece3-fa2058c03c59.png)
URI 指定で Jupyter server を指定する。ここで与える URI は、コンテナ内のターミナルで新たに jupyter notebook を立ち上げてしまって、その URI を入れれば接続できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546894/1f725176-29d9-77d1-0596-82baca014f5e.png)
すると、コンテナ内のカーネルを選べるようになるので、選択する。

### 5. 使ってみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546894/35a43c73-4e4f-0658-3b1f-e8246ba450e0.png)
補完も効いて、いい感じになった！