Livebook Teams で超簡単Webアプリ実装＆リリース自動化

## はじめに

Livebook はブラウザ上で Elixir コードの記述、実行、結果表示までできる環境です

Python の Jupyter と同じように、ノートブックとしてコードと実行結果を保存、共有できます

https://livebook.dev/

更に、 Livebook の Deploy 機能を使うことで、ノートブックをそのままアプリとして公開することも可能になっています

https://qiita.com/RyoWakabayashi/items/9cd0032d1bd4ddad5d6c

https://qiita.com/RyoWakabayashi/items/5ac91260b4d6b55adc1a

コレだけでも素晴らしいのですが、 Livebook Teams というサービスを使うことで、 Fly.io へのデプロイを自動化し、ワンクリックで変更適用ができるようになっています

https://livebook.dev/teams/

英語ですが、公式動画が分かりやすいです

https://www.youtube.com/watch?v=lwLx5beXxsg

本記事では Livebook Teams を使ったアプリのデプロイについて、手順を紹介します

## 事前準備

### GitHub アカウントの作成

Livebook Team には GitHub アカウントでログインするため、 GitHub アカウントがなければ作っておきましょう

https://github.com/

### Livebook Team ベータ版への参加

Livebook Team は利用申込が必要です

https://livebook.dev/teams/

まだベータ版なので、 "I want FREE early access" ボタンから早期アクセスに申し込みましょう

![スクリーンショット 2024-08-29 11.20.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/2bd88416-2d4f-8a08-e89e-f854853c8b8d.png)

結果が来るまで数日掛かることもあるので、気長に待ってください

### Fly.io のアカウント作成

本記事の手順では Fly.io を利用します

まず Fly.io のアカウントを作成してください

https://fly.io/

一定の利用範囲内なら無料利用可能になっています

https://fly.io/docs/about/pricing/

本記事でデプロイしたアプリについて、実行後にすぐ削除すれば、ほぼ 0 円になるはずです

### Fly.io の CLI 準備

Fly.io の CLI も使用するため、インストール、認証まで済ませておきましょう

https://fly.io/docs/flyctl/

macOS の場合は以下の手順で実行可能です

```bash
brew install flyctl
```

:::note info
Homebrew 自体がインストールされていない場合は[こちら](https://brew.sh/ja/)
:::

```bash
fly auth login
```

### Livebook のインストール、起動

ローカルで Livebook を起動します

アプリケーションとしてインストールしても良いですし、 Docker コンテナで起動しても良いです

https://livebook.dev/#install

## Organization (組織) の作成

アプリは Organization 配下で管理するようになっているので、まず Organization を作成する必要があります

Livebook のホーム画面左メニューから "Add Organization" をクリックし、 Organization の作成画面を開いてください

"Create a new organization" を選択している状態で Organization name と Emoji に適当な値を入力し、 "Create" をクリックします

![スクリーンショット 2024-08-29 9.39.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/ae0a5351-af4f-dd8a-ccdf-bd7b69f419b5.png)

8 桁英字の認証コードが表示されるのでコピーしておきます

"Go to Teams" をクリックしましょう

![スクリーンショット 2024-08-29 9.42.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/eb0e875f-beb4-455a-e958-4a364dfe4156.png)

別タブで Livebook Teams へのログイン画面が表示されます

"Continue with GitHub" をクリックし、 GitHub アカウントでログインします

![スクリーンショット 2024-08-29 9.42.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/cf812e95-4d88-98f8-339d-3b4d9b19c4f1.png)

2段階認証として認証コードを求められるのでコピーしておいた値を貼り付け、 "Enter your code" をクリックします

![スクリーンショット 2024-08-29 9.43.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/4146953e-3e68-b2b3-1db9-9569fe31cee1.png)

ログインに成功すると、まだアプリが何も作成されていない状態の画面が表示されます

![スクリーンショット 2024-08-29 9.43.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/6115d411-059a-c614-b4cf-1921a458e8e1.png)

Livebook の画面に戻ると、 Livebook Teams へ参加に必要なキーが表示されます

どこか安全な場所に保存しておきましょう

![スクリーンショット 2024-08-29 9.43.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/a72326fb-e57e-77a3-af28-85db1ce38143.png)

"I've saved my Teams key in a secure location" をクリックするとモーダルが閉じ、 Organization の設定画面が表示されます

![スクリーンショット 2024-08-29 9.44.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/bb62741b-2487-970d-6de2-32d912af877e.png)

## ノートブックの準備

本記事では、以前実装したスライドショーをアプリとしてデプロイします

https://qiita.com/RyoWakabayashi/items/c79c3cd233a3fe63bdd1

### ノートブックを開く

Livebook のホーム画面右上 "Open" ボタンをクリックします

![スクリーンショット 2024-08-29 11.49.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/18372c6a-e7e6-baf8-52f2-822152fb93f0.png)

"From URL" タブを開き、 Note book URL に "https://github.com/RyoWakabayashi/elixir-learning/blob/main/livebooks/deploy/slide_show.livemd" と入力します

"import" をクリックしてください

![スクリーンショット 2024-08-29 11.49.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/ea40a749-5ea7-0969-7cee-f07d7e1d8568.png)

スライドショーのノートブックが開きます

![スクリーンショット 2024-08-29 11.52.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/27939b86-aa68-7bcb-5188-5b1e947c13a7.png)

そのまま全てのセルを実行すると、ノートブック上でスライドショーが動きます

![Apr-24-2023 13-08-52.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/ab2b3f49-17e7-a4c1-a9eb-5923e7c856b9.gif)

### アプリ設定

左メニューのロケットアイコンをクリックすると、アプリのペインが開きます

"Configure" でアプリ設定モーダルを開いてください

![スクリーンショット 2024-08-29 9.45.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/e0640ebd-d973-0fb7-88ed-8ef1e2fce6fe.png)

今回はパスワード保護したくないので "Password-protected" のチェックを外します

また、必要な UI だけをユーザーに見せたいので、 "Only render rich outputs" にチェックを入れます

下画像の状態で "Save" をクリックしてください

![スクリーンショット 2024-08-29 10.56.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/adeffcf5-b4c1-5446-097a-0c9bd77c2df6.png)

アプリペインの一番下 "Launch preview" をクリックします

![スクリーンショット 2024-08-29 11.59.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/07c51995-a97c-d7dc-bc4f-3066504238f7.png)

アプリがローカルで起動し、実行状態が表示されます

URL に表示されている "/apps/slide" をクリックしてください

![スクリーンショット 2024-08-29 12.00.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/b2fdb7f1-1088-3720-ad7e-b4f5e3482213.png)

ローカルで起動したアプリが表示されます

![スクリーンショット 2024-08-29 12.02.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/cb3365da-92fc-5be7-f5f0-0e2f41386dc3.png)

## Livebook Teams によるデプロイ

いよいよ、 Livebook Teams でクラウド上にアプリをデプロイします

### ワークスペースの切り替え

ノートブックのタイトル直下に "Personal" という文字があるので、そこをクリックするとドロップダウンが表示されます

ドロップダウンから、作成した Organization を選択してください

![スクリーンショット 2024-08-29 9.46.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/d7ea1b1c-98e6-c668-812a-4f7aff5ca831.png)

ワークスペースが切り替わります

![スクリーンショット 2024-08-29 9.46.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/eb99d13c-8db8-ed7c-e06d-15b1ad137928.png)

:::note info
Livebook Teams でデプロイするためには Organization のワークスペースであることが必須です

Personal ワークスペースのままデプロイしようとすると、以下のメッセージが表示されます

![スクリーンショット 2024-08-29 9.45.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/b9793e46-7540-4ed2-167b-b0c58accc6ba.png)
:::

### クラウドへのデプロイ設定

アプリペインの "Deploy with Livebook Teams" をクリックします

![スクリーンショット 2024-08-29 11.59.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/07c51995-a97c-d7dc-bc4f-3066504238f7.png)

デプロイ設定のモーダルが開きます

Type は "Online" （ワンクリックだけでデプロイできる）を選択してください

"Airgapped" を選択すると Dockerfile を使った手動デプロイになります（特殊なコンテナ定義が必要な場合はこちら）

Name に適当な名前を入力し、 "+Add" ボタンをクリックしてください

![スクリーンショット 2024-08-29 9.46.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/62efdb82-3069-8451-1082-db49f5c29987.png)

:::note info
URL は Livebook や Livebook Teams からのリンクに使用します

デプロイ時点では空で問題ありません
:::

:::note info
Clustering や Zero Trust Authentication provider の高度な設定も可能ですが、本記事では割愛します
:::

### クラウド環境作成

デプロイを追加すると、サーバー設定のモーダルが開きます

"Fly.io" タブを開いてください

![スクリーンショット 2024-08-29 9.52.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/e83583e0-0789-3d26-0d8a-04c0ab8f330e.png)

表示されているコマンドをターミナルで順次実行してください

![スクリーンショット 2024-08-29 9.53.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/c334c829-42bc-b732-70e1-2915eac07cda.png)

```bash
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
```

:::note info
"lb-server-rwakabay-oitaslide" の部分は Organization の名前によって変わります

`fly launch` の実行中、 `Do you want to tweak these settings before proceeding?` と訊かれますが、デフォルトの No でそのままエンターキーを押してください
:::

:::note warn
`--vm-memory 2048` でメモリサイズを 2048 に指定しています

小さい値にした方が当然コストは下がりますが、 2048 より低くすると Livebook が起動できません
:::

Fly.io 上に秘密情報を設定します

```bash
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台構成を指定しています

```bash
fly deploy --ha=false
```

しばらくすると以下のように表示され、 Fly.io 上の Livebook が起動します

```bash
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 のコンソールでも起動していることが確認できます

![スクリーンショット 2024-08-29 10.51.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/68508301-8c2d-22ef-fa15-d4953ba0bf2b.png)

Livebook のサーバー設定モーダルでは、 "Deploy anyway" ボタンだったものが "Deploy" ボタンになっています

このまま "Deploy" ボタンをクリックしましょう

![スクリーンショット 2024-08-29 10.51.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/52d920e4-a1ca-034a-c827-5f552ec0b0f8.png)

モーダルが閉じ、 Livebook Teams に アプリが追加されて Status が Available になりました

![スクリーンショット 2024-08-29 10.51.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/13642628-3898-d639-1ea9-be1f45e4026a.png)

この状態で `fly deploy` コマンドの結果に表示されていた URL （本記事では "https://lb-server-rwakabay-oitaslide.fly.dev/"）にアクセスしてみます

すると、 以下のような画面が表示されるので、 "Slide show" をクリックします

![スクリーンショット 2024-08-29 10.52.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/9bd498d9-751c-a9d9-cfc9-ffcfb4f9578f.png)

Fly.io 上で動作しているアプリが表示されました

![スクリーンショット 2024-08-29 10.55.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/586d7832-bc7a-20da-b6e2-08f331803bf0.png)

### URL の登録

Livebook Teams の画面から Deployment group の列に表示されているデプロイ名のリンク（下画像の "Oita Slide" リンク）をクリックしてください

![スクリーンショット 2024-08-29 10.51.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/13642628-3898-d639-1ea9-be1f45e4026a.png)

設定画面が開くので URL に Fly.io のアプリ URL を入力し、 "Save" をクリックします

![スクリーンショット 2024-08-29 10.54.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/0ac077df-78ec-7e01-f1a8-bfd00c361392.png)

コレにより、 Slug の部分がリンク化され、以後ここからアプリが開けるようになります

![スクリーンショット 2024-08-29 12.47.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/0107e7f5-f456-e506-a5c5-f792406e2943.png)

## アプリの更新

スライドの内容を少し変更します（下画像の例では "大分県" の後に "!!" を追加）

![スクリーンショット 2024-08-29 12.40.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/6c86a74d-807f-2837-9bac-b2c3648bb043.png)

この状態でもう一度 "Deploy with Livebook Teams" をクリックしてください

デプロイモーダルが開くので、 "Deploy" ボタンをクリックします

![スクリーンショット 2024-08-29 10.56.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/4c337e46-c10b-b921-94b9-822aeca45a9a.png)

もう一度アプリを開くと、内容が更新されています

![スクリーンショット 2024-08-29 10.56.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/dd15e325-e41d-fe00-2efd-76a6e8bce8fb.png)

変更の適用がワンクリックになるのは素晴らしいですね

## アプリの削除

このまま起動していると Fly.io の料金がかかるので、一通り試し終わったら削除しておきましょう

Fly.io のコンソールで左メニュー最下段 "Settings" を開き、 "Delete app" をクリックします

![スクリーンショット 2024-08-29 10.59.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/55b61d41-7db1-1ac2-3b0c-7c615b5fd0a3.png)

開いたモーダルでアプリ名を入力し、 "Yes, delete it" をクリックします

![スクリーンショット 2024-08-29 11.00.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/9e6aa058-6a44-236e-a71b-dc1952869c32.png)

クラウド上のサーバーが消されたことで、 Livebook Teams のアプリステータスが "Connectiong" に更新されます

停止アイコン（丸の中に四角の赤いアイコン）をクリックします

![スクリーンショット 2024-08-29 12.51.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/158bc0a8-58bf-aa13-d5ed-019c7bdbf13e.png)

ステータスが Deactivated になります

そのままゴミ箱アイコンをクリックしてください

![スクリーンショット 2024-08-29 12.52.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/6b189fa2-ef22-bdcc-f414-4340a96a466a.png)

確認アラートが表示されるので、 OK をクリックします

![スクリーンショット 2024-08-29 12.53.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/3640f845-2f8c-8909-e436-7f3ca3ffeb09.png)

アプリがない状態に戻りました

![スクリーンショット 2024-08-29 9.43.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/6115d411-059a-c614-b4cf-1921a458e8e1.png)

## まとめ

Livebook Teams を使うことで、ワンクリックでアプリをデプロイできました

最初の手順は若干ややこしいですが、2回目以降はワンクリックだけで変更を適用できるので、かなり楽になりますね

まだベータ版なので、本格始動を楽しみに待ちましょう