はじめに
Livebook はブラウザ上で Elixir コードの記述、実行、結果表示までできる環境です
Python の Jupyter と同じように、ノートブックとしてコードと実行結果を保存、共有できます
更に、 Livebook の Deploy 機能を使うことで、ノートブックをそのままアプリとして公開することも可能になっています
コレだけでも素晴らしいのですが、 Livebook Teams というサービスを使うことで、 Fly.io へのデプロイを自動化し、ワンクリックで変更適用ができるようになっています
英語ですが、公式動画が分かりやすいです
本記事では Livebook Teams を使ったアプリのデプロイについて、手順を紹介します
事前準備
GitHub アカウントの作成
Livebook Team には GitHub アカウントでログインするため、 GitHub アカウントがなければ作っておきましょう
Livebook Team ベータ版への参加
Livebook Team は利用申込が必要です
まだベータ版なので、 "I want FREE early access" ボタンから早期アクセスに申し込みましょう
結果が来るまで数日掛かることもあるので、気長に待ってください
Fly.io のアカウント作成
本記事の手順では Fly.io を利用します
まず Fly.io のアカウントを作成してください
一定の利用範囲内なら無料利用可能になっています
本記事でデプロイしたアプリについて、実行後にすぐ削除すれば、ほぼ 0 円になるはずです
Fly.io の CLI 準備
Fly.io の CLI も使用するため、インストール、認証まで済ませておきましょう
macOS の場合は以下の手順で実行可能です
brew install flyctl
Homebrew 自体がインストールされていない場合はこちら
fly auth login
Livebook のインストール、起動
ローカルで Livebook を起動します
アプリケーションとしてインストールしても良いですし、 Docker コンテナで起動しても良いです
Organization (組織) の作成
アプリは Organization 配下で管理するようになっているので、まず Organization を作成する必要があります
Livebook のホーム画面左メニューから "Add Organization" をクリックし、 Organization の作成画面を開いてください
"Create a new organization" を選択している状態で Organization name と Emoji に適当な値を入力し、 "Create" をクリックします
8 桁英字の認証コードが表示されるのでコピーしておきます
"Go to Teams" をクリックしましょう
別タブで Livebook Teams へのログイン画面が表示されます
"Continue with GitHub" をクリックし、 GitHub アカウントでログインします
2段階認証として認証コードを求められるのでコピーしておいた値を貼り付け、 "Enter your code" をクリックします
ログインに成功すると、まだアプリが何も作成されていない状態の画面が表示されます
Livebook の画面に戻ると、 Livebook Teams へ参加に必要なキーが表示されます
どこか安全な場所に保存しておきましょう
"I've saved my Teams key in a secure location" をクリックするとモーダルが閉じ、 Organization の設定画面が表示されます
ノートブックの準備
本記事では、以前実装したスライドショーをアプリとしてデプロイします
ノートブックを開く
Livebook のホーム画面右上 "Open" ボタンをクリックします
"From URL" タブを開き、 Note book URL に "https://github.com/RyoWakabayashi/elixir-learning/blob/main/livebooks/deploy/slide_show.livemd" と入力します
"import" をクリックしてください
スライドショーのノートブックが開きます
そのまま全てのセルを実行すると、ノートブック上でスライドショーが動きます
アプリ設定
左メニューのロケットアイコンをクリックすると、アプリのペインが開きます
"Configure" でアプリ設定モーダルを開いてください
今回はパスワード保護したくないので "Password-protected" のチェックを外します
また、必要な UI だけをユーザーに見せたいので、 "Only render rich outputs" にチェックを入れます
下画像の状態で "Save" をクリックしてください
アプリペインの一番下 "Launch preview" をクリックします
アプリがローカルで起動し、実行状態が表示されます
URL に表示されている "/apps/slide" をクリックしてください
ローカルで起動したアプリが表示されます
Livebook Teams によるデプロイ
いよいよ、 Livebook Teams でクラウド上にアプリをデプロイします
ワークスペースの切り替え
ノートブックのタイトル直下に "Personal" という文字があるので、そこをクリックするとドロップダウンが表示されます
ドロップダウンから、作成した Organization を選択してください
ワークスペースが切り替わります
Livebook Teams でデプロイするためには Organization のワークスペースであることが必須です
Personal ワークスペースのままデプロイしようとすると、以下のメッセージが表示されます
クラウドへのデプロイ設定
アプリペインの "Deploy with Livebook Teams" をクリックします
デプロイ設定のモーダルが開きます
Type は "Online" （ワンクリックだけでデプロイできる）を選択してください
"Airgapped" を選択すると Dockerfile を使った手動デプロイになります（特殊なコンテナ定義が必要な場合はこちら）
Name に適当な名前を入力し、 "+Add" ボタンをクリックしてください
URL は Livebook や Livebook Teams からのリンクに使用します
デプロイ時点では空で問題ありません
Clustering や Zero Trust Authentication provider の高度な設定も可能ですが、本記事では割愛します
クラウド環境作成
デプロイを追加すると、サーバー設定のモーダルが開きます
"Fly.io" タブを開いてください
表示されているコマンドをターミナルで順次実行してください
mkdir lb-server-rwakabay-oitaslide
cd lb-server-rwakabay-oitaslide
fly launch --image ghcr.io/livebook-dev/livebook:0.13.3 --vm-memory 2048 --no-deploy
"lb-server-rwakabay-oitaslide" の部分は Organization の名前によって変わります
fly launch の実行中、 Do you want to tweak these settings before proceeding? と訊かれますが、デフォルトの No でそのままエンターキーを押してください
--vm-memory 2048 でメモリサイズを 2048 に指定しています
小さい値にした方が当然コストは下がりますが、 2048 より低くすると Livebook が起動できません
Fly.io 上に秘密情報を設定します
fly secrets set \
LIVEBOOK_AGENT_NAME="default" \
LIVEBOOK_TEAMS_KEY="xxx" \
LIVEBOOK_TEAMS_AUTH="xxx" \
LIVEBOOK_CLUSTER="auto" \
LIVEBOOK_SECRET_KEY_BASE="xxx" \
LIVEBOOK_COOKIE="xxx"
Fly.io 上に Livebook をデプロイします
--ha=false 指定により、クラスタリングせずに1台構成を指定しています
fly deploy --ha=false
しばらくすると以下のように表示され、 Fly.io 上の Livebook が起動します
Checking DNS configuration for lb-server-rwakabay-oitaslide.fly.dev
Visit your newly deployed app at https://lb-server-rwakabay-oitaslide.fly.dev/
Fly.io のコンソールでも起動していることが確認できます
Livebook のサーバー設定モーダルでは、 "Deploy anyway" ボタンだったものが "Deploy" ボタンになっています
このまま "Deploy" ボタンをクリックしましょう
モーダルが閉じ、 Livebook Teams に アプリが追加されて Status が Available になりました
この状態で fly deploy コマンドの結果に表示されていた URL （本記事では "https://lb-server-rwakabay-oitaslide.fly.dev/"）にアクセスしてみます
すると、 以下のような画面が表示されるので、 "Slide show" をクリックします
Fly.io 上で動作しているアプリが表示されました
URL の登録
Livebook Teams の画面から Deployment group の列に表示されているデプロイ名のリンク（下画像の "Oita Slide" リンク）をクリックしてください
設定画面が開くので URL に Fly.io のアプリ URL を入力し、 "Save" をクリックします
コレにより、 Slug の部分がリンク化され、以後ここからアプリが開けるようになります
アプリの更新
スライドの内容を少し変更します（下画像の例では "大分県" の後に "!!" を追加）
この状態でもう一度 "Deploy with Livebook Teams" をクリックしてください
デプロイモーダルが開くので、 "Deploy" ボタンをクリックします
もう一度アプリを開くと、内容が更新されています
変更の適用がワンクリックになるのは素晴らしいですね
アプリの削除
このまま起動していると Fly.io の料金がかかるので、一通り試し終わったら削除しておきましょう
Fly.io のコンソールで左メニュー最下段 "Settings" を開き、 "Delete app" をクリックします
開いたモーダルでアプリ名を入力し、 "Yes, delete it" をクリックします
クラウド上のサーバーが消されたことで、 Livebook Teams のアプリステータスが "Connectiong" に更新されます
停止アイコン（丸の中に四角の赤いアイコン）をクリックします
ステータスが Deactivated になります
そのままゴミ箱アイコンをクリックしてください
確認アラートが表示されるので、 OK をクリックします
アプリがない状態に戻りました
まとめ
Livebook Teams を使うことで、ワンクリックでアプリをデプロイできました
最初の手順は若干ややこしいですが、2回目以降はワンクリックだけで変更を適用できるので、かなり楽になりますね
まだベータ版なので、本格始動を楽しみに待ちましょう