gitpodでjupyternotebookの開発環境を作る

はじめに

gitpodとは、githubのリポジトリをworkspaceとして読み込むクラウドIDEです.
dockerでVScodeのようなIDEを動かしているようです.

公式ドキュメント
https://www.gitpod.io/docs/

gitpodの特徴

• 月100時間まで無料
• ブラウザとGitHubアカウントがあれば利用できる
• 開くディレクトリのtreeを指定できる
• VScodeライクで使える

構築する開発環境

今回は以下のような機械学習環境を構築していきます.

1. python3.7のdocker imageを元に
2. pipで機械学習関連のライブラリをインストールして
3. jupyternotebookでkaggleのtitanicをやってみる

gitpodで使用するリポジトリ

1. https://github.com/ymmmtym/ml/tree/test
2. https://github.com/ymmmtym/ml/tree/test_docker

(2つ使う理由は後述)

gitpodを使ってみよう

使用するgithubのリポジトリを開き、URLの頭にgitpod.io/#をつける　←これだけ！

ちなみに、chrome拡張機能をインストールすれば、1クリックで開けます

今回使用する2つのリポジトリについての違い

結論からいうと、test treeでは環境構築に失敗したためtest_docker treeを使用しました。

test tree

デフォルトで設定されるgitpodのdocker環境のリポジトリ
この環境でvirtualenvで作成したpython仮想環境を読み込もうとしたが、ダメでした.
(python仮想環境をコンテナにCOPYしても、コンテナ内では参照されないみたいです)

gitpod /workspace/ml $ cat /etc/os-release 
NAME="Ubuntu"
VERSION="19.04 (Disco Dingo)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 19.04"
VERSION_ID="19.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=disco
UBUNTU_CODENAME=disco
gitpod /workspace/ml $ python -V
Python 2.7.15
gitpod /workspace/ml $ source .myvenv/bin/activate
(.myvenv) gitpod /workspace/ml $ python -V
Python 2.7.15

3系になっておらず、pipのライブラリもインストールされていない

test_docker tree

test treeに以下の２ファイルを追加しました.

• .gitpod.Dockerfile
• .gitpod.yml

..gitpod.Dockerfile

FROM python:3.7

USER root

COPY ["requirements.txt", "/requirements.txt"]
RUN pwd
RUN apt-get -y update && \
    pip install --upgrade pip && \
    pip install --upgrade setuptools && \
    pip install -r requirements.txt

(コンテナbuild時のデフォルトpathは/なので、そこにrequirements.txtをcopyする)

..gitpod.yml

image:
  file: .gitpod.Dockerfile

ports:
- port: 8080
  onOpen: open-preview
- port: 8888
  onOpen: open-browser

(jupyternotebookが使えるように、port8888を使用)

2つのファイルを追加することにより、gitpodの環境を設定できるようになります.

test_dockerリポジトリでgitpodを使う

それでは、URLの頭にgitpod.io/#をつけてみてください.
初回時の注意点として、

• 認証が必要になるので許可する
• 内部的にcontainerをbuildしているので、処理が多いと時間がかかる
  
  ↓ 少し待つ
  

無事にVScode(みたいなやつ)が起動されれば完了です.

それでは、terminalからjupyter notebook --ip=*コマンドを打ってみましょう.

gitpod /workspace/ml $ jupyter notebook --ip=*
[W 07:34:17.085 NotebookApp] WARNING: The notebook server is listening on all IP addresses and not using encryption. This is not recommended.
[I 07:34:17.088 NotebookApp] Serving notebooks from local directory: /workspace/python_env
[I 07:34:17.088 NotebookApp] Jupyter Notebook 6.4.0 is running at:
[I 07:34:17.088 NotebookApp] https://f6dd9c78-9281-4225-bec5-a2c05a810209.ws-ap0.gitpod.io:8888/?token=e4acea7f5f530d16bf660f914e13d8308fc2cc33ac5fffc1
[I 07:34:17.088 NotebookApp]  or http://127.0.0.1:8888/?token=eb377d6f673c4f5ec0fe4ca5b994f5956be12be6dbb8c6a4
[I 07:34:17.088 NotebookApp] Use Control-C to stop this server and shut down all kernels (twice to skip confirmation).
[C 07:34:17.093 NotebookApp] 
    
    To access the notebook, open this file in a browser:
        file:///home/gitpod/.local/share/jupyter/runtime/nbserver-288-open.html
    Or copy and paste one of these URLs:
        http://f6dd9c78-9281-4225-bec5-a2c05a810209.ws-ap0.gitpod.io:8888/?token=eb377d6f673c4f5ec0fe4ca5b994f5956be12be6dbb8c6a4
     or http://127.0.0.1:8888/?token=eb377d6f673c4f5ec0fe4ca5b994f5956be12be6dbb8c6a4

ポップアップがブロックされていなければ、別タブでjupyter notebookが開きます.

もしくは、「Open Browser」をクリック
もしくは https://8888-f6dd9c78-9281-4225-bec5-a2c05a810209.ws-ap0.gitpod.io/login にアクセス

ログイン画面が表示されるので、tokenを入力します.

今回は下記のようにterminalに表示されているので、

http://localhost:8888/?token=eb377d6f673c4f5ec0fe4ca5b994f5956be12be6dbb8c6a4

こちらを入力する.
eb377d6f673c4f5ec0fe4ca5b994f5956be12be6dbb8c6a4

無事にjupyter notebookが開けました！以上です.

追記

コメント頂きまして、以下を修正しました。

jupyter起動コマンドをjupyter notebook --ip=*に変更

--ip=*オプションを付けない場合、jupyter notebook上でファイルを新規作成・修正ができず、以下のエラーが返ってくることがわかりました。

[W 07:31:25.900 NotebookApp] Blocking Cross Origin API request for /api/contents.  Origin: https://8888-amethyst-vicuna-c6nx02vq.ws-us11.gitpod.io, Host: localhost:8888
[W 07:31:25.900 NotebookApp] Not Found
[W 07:31:25.901 NotebookApp] 404 POST /api/contents (::1) 2.050000ms referer=https://8888-amethyst-vicuna-c6nx02vq.ws-us11.gitpod.io/tree?

デフォルトでは、アクセスできるIPアドレスはlocalhostのみで、CORS設定ではOriginが異なる場合にブロックされるようです。
今回は、アクセス元(ブラウザ)とアクセス先(workspace)のIPアドレスは同じですが、Originが異なるため発生しました。

--ip=*オプションをつけることで、上記を解決することが出来ました。

Reference

jupyternotebookを簡単に開く
https://github.com/jins-tkomoda/dash-and-jupyter-notebook-with-gitpod

python仮想環境のディレクトリを移動した結果
https://teratail.com/questions/99419