
JupyterLiteをNetlifyへデプロイする方法
こんにちは、Choimirai Schoolのサンミンです。
【主要なアップデート】
(2022.10.06)runtime.txtのコンテンツを3.8に変更
0 はじめに
サーバなしにブラウザのみでJupyter環境が完結するJupyterLiteが公開されました🎊。
Pythonユーザーに朗報🐍!@ProjectJupyter が完全にブラウザで実行できる Jupyter Notebookの "JupyterLite" を発表。これは、大きい。JupyterLite を活用すれば、Roam上でJupyter Notebookを実行することもできる🤩。Pythonを学ぶハードルがさらに下がるはず。#Roam部 https://t.co/ANSJgk4tz7 pic.twitter.com/v9dDGrBOPS
— Sangmin @ChoimiraiSchool (@gijigae) July 14, 2021
今回の note ではご自分専用のJupyterLiteをNetlifyへデプロイする方法を紹介させていただきます。
1 Pre-requisite
noteの内容は、GitHubとNetlifyのアカウントは既にお持ちであることが前提です。
2 JupyterLite、とは?
JupyterLiteは、WebAssembly製のPython runtimeであるPyodideを駆使したPyolite kernelを使っているので、サーバ無しにJupyter環境が構築できるシステムです。詳細は下記のブログ記事にわかりやすく書かれています。
JupyterLiteの開発状況と何ができるかの最新情報は下記のページを参考にしてください。
初回のライブラリ読み込みは重いですがそれ以外の動作はJupyter Notebookと変わらず快適です。numpy, pandas, matplotlib, plotlyあたりの基本セットは最初から入っています。
初回のライブラリ読み込みは重い

3 Netlify、とは?
Netlifyは、最新のWebプロジェクトを自動化するためのホスティングサービスです。
有料のプランもありますが、無料のプランでも下記のサービスが利用できますので超便利です。
■月100Gまでの通信量と300分までのBuild
■カスタムドメイン
■SSL対応
■CDN対応

4 JuypterLiteをNetlifyへデプロイするメリット
手順が簡単なのが一番のメリットです。JupyterLiteデプロイ用のテンプレートがGitHub上にありますので、すぐNetlifyでデプロイ+アクセスすることができます。手順は、

5 GitHubでの作業
JupyterLiteデプロイ用のテンプレートは下記のページからアクセスできます。
リンクをクリックしますと下記の画面が表示されますので「Use this template」ボタンでご自分のリポジトリを作ってください。

リポジトリの作業が終わりましたらPythonのバージョンを指定するため、runtime.txt ファイル(Netlify へデプロイするとき必要)を追加します。ファイルには、3.7 と書いてください。
【追記:2022.10.06】runtime.txtのPythonバージョンは「3.8」です。
runtime.txt ファイル(Netlify へデプロイするとき必要)を追加

▲JupyterLiteのリポジトリを作成+runtime.txtを追加した例

追加した runtime.txt には、3.8 と書いてください。
3.8
6 Netlifyでの作業
GitHubでの作業が終わりましたら、Netlifyのアカウントと上記(ステップ5)で作成したリポジトリを紐づけます。
Netlifyへログインし、「New site from Git」のボタンを押下しますとGitHubのリポジトリを選択する画面に遷移します。

次の画面で「GitHub」を選択します。

初回は認証画面が表示されますので必要な情報を入力し認証を済ませてください。リポジトリの一覧が表示されますので、上記で用意したリポジトリを選択します。

リポジトリを選択しますと下記のような設定画面が表示されます。

次の値をBuild commandとPublish direction欄に入力してください。
■Build command
jupyter lite build --output-dir dist
■Publish directory
dist
入力が終わりましたら「Deploy site」のボタンを押下します。Getting started 画面が表示されますので、作業が修了するまでお待ちください。

デプロイの作業が修了しますとステータスが「Your site is deployed」と変わります。デプロイは3分前後で終わるはずです。
デプロイは3分前後で終わるはず

ニーズに合わせ、Custom domain や HTTS を設定することもできます。
7 サイトへアクセス
デプロイの作業が終わりますとサイトへのURLが表示されますのでこのリンクからJupyterLiteへアクセスできます。

初回ライブラリの読み込みには少し時間がかかりますが、画面が表示されますと通常のJupyter Notebookと同様快適に動きます。

8 その他のデプロイ方法
JupyterLiteをデプロイする方法は他にも多数ありますので詳細はこちらのサイトを参考にしてください。
9 まとめ
GitHubとNetlifyのアカウントがあれば、ご自分専用のJupyterLiteが手軽にデプロイできます。
Roamを利用されている方は、{{iframe}} を使って、デプロイしたJupyterLiteをRoamへ埋め込むのも簡単です。そうすることで、Pythonの学習やPythonを使った機械学習も捗ると思います。
JupyterLiteを活用すれば、PythonをRoamで学ぶメリットはさらに大きくなる。
— Sangmin @ChoimiraiSchool (@gijigae) July 14, 2021
①授業をRoamで受ける
②Roamに埋め込んたJupyterLiteでコードを実行
③気づいた点をRoamでまとめる→①へ戻る
この循環が身につくと、今後Pythonの機械学習コースを受講するときも役立つはず🐍。https://t.co/tkJ0yjqFLp