streamlit.ioで作成したアプリケーションを外部公開する手順


## streamlit.ioで作成したアプリケーションを外部公開する手順

### はじめに
本記事ではStreamlitを使用して作成したアプリケーションをGitHubとstreamlit.ioを用いて外部公開を行う手順をまとめていきます。
今回作成したアプリケーションは骨格推定とOpenCVを使用したじゃんけんアプリケーションで、Streamlitを使用して簡単なWEBアプリケーションを作成しました。
##
### 目次
- [手順1：GitHub、streamlit.ioにアカウント登録をする](#手順１：GitHub、streamlit.ioにアカウント登録をする。)
  - [GitHubの登録方法](#githubの登録方法)
  - [streamlit.ioの登録方法](#streamlitioの登録方法)
- [手順2：GitHubにリポジトリ公開](#手順２：GitHubにリポジトリ公開)
- [手順3：作成したリポジトリにアプリケーションファイルを格納する](#手順3作成したリポジトリにアプリケーションファイルを格納する)
- [手順4：requirements.txtを作成する](#手順4requirementstxtを作成する)
- [手順5：Streamlit.ioでGitでの読み込みを許可する](#手順5streamlitioでgitでの読み込みを許可する)
- [手順6：Streamlit.ioでアプリケーションをデプロイする](#手順6streamlitioでアプリケーションをデプロイする)
- [結果](#結果)
- [最後に](#最後に)
- [追記：OpenCVの依存関係によって発生するエラーについて](#追記opencvの依存関係によって発生するエラーについて)

---

### 手順１：GitHub、streamlit.ioにアカウント登録をする。
公開を行うためにまず、Githubとstreamlit.ioにアカウント登録を行います。

### GitHubの登録方法
1.以下のURLをクリックし登録を行います。
https://github.com/


![Git_auth.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/743a1acd-456c-4a72-adb2-3d342f72cd95.png)

2.URLにSignupをクリックすると以下の画面に遷移し、メールアドレス、パスワードなどを
　設定していきます。
![Git_auth2.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/cf9b28d6-fcc2-4c65-b3fe-e17de578cb9b.png)



### streamlit.ioの登録方法
1.以下のURLをクリックして登録を行います。
https://share.streamlit.io/
![Str_auth.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/ae560b8c-f70d-4f83-a6c7-ce0c5aadbc94.png)

2.赤枠の部分をクリックすると以下の画面に遷移するので、登録方法にGitHUBを選択しましょう。
![Git_auth3.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/29e3d919-491c-46b5-bcaa-032dadc03bab.png)

3.先ほど作成したGitHubの登録情報を入力します。
![STR_auth4.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/1e598eb5-ecb4-45ed-88c0-41b65c1fdbc5.png)

これでGitHubとstreamlit.ioの登録は完了です。

### 手順２：GitHubにリポジトリ公開
1.先ほど作成したGitアカウントにアクセスして赤枠のNewをクリックします。
![GIT1.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/45fb27cb-6acf-4e56-9d99-3f53ed7454a0.png)


2.リポジトリの名前の設定を行い、公開設定をPrivateにして、任意でアプリケーションの説明を行うファイルREADMEをリポジトリ作成時に自動的に作成される設定を行いリポジトリを作成します。
![STR４.drawio (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/21ea3c3a-e1eb-4423-9fc9-f0731ae06d88.png)



### 手順3：作成したリポジトリにアプリケーションファイルを格納する
1.リポジトリを作成すると、リポジトリのトップページに遷移するので、Add fileをクリックし、Upload Filesを選択します。
![GIT4.drawio (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/af3f2ee3-5cfb-427d-9040-08b4ea635b5a.png)
2.作成したアプリケーションをアップロードします。
![GIT5.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/0c123ecf-050a-433d-8c67-56a575b5c2b7.png)

### 手順4:requirements.txtを作成する
1.今度はNewからCreate Fileを選択してrequirements.txtというファイルを作成します。
![GIT6.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/993e06ec-2594-476e-872c-f70be2393dbe.png)

このファイルはアプリケーション内で使用しているライブラリをまとめて記述しておくファイルで、他の人がプロジェクトをcloneして、次のコマンドを打つだけで全ての必要なライブラリがインストールされます。
```
pip install -r requirements.txt
```
Streamlit.ioでは自動的に上記のコマンドの動作を行ってくれるので、記述をしておくだけでインストールを行ってくれます。

2.requirements.txtでは今回のアプリケーションで使用したライブラリを記述します。
![GIT７.drawio (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/66b669d6-9657-4ca3-b116-dd899948a52b.png)

※runtime.txtではアプリケーションを起動する際のPythonのバージョンを指定しますが、Streamlit.ioではruntime.txtでのバージョン指定はできないので割愛

### 手順5：Streamlit.ioでGitでの読み込みを許可する
・リポジトリ作成時にPrivateにしたため、Streamlit.ioに権限を与える必要があるので権限を与えます。
1.Streamlit.ioにアクセスし、左上のアカウントアイコンをクリックして、Settingを選択します。![STR1.drawio (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/43c04886-5260-4836-873b-b76d8e9d88b2.png)
2.すると以下のような画面に遷移し、Gitへのリポジトリへのアクセス許可を求められるので許可をします
（一度許可したため画像には表示されていない）
![STR２.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/0e1bafeb-c9be-43b9-8b8a-e6ede6558909.png)

### 手順6：Streamlit.ioでアプリケーションをデプロイする
1.Streamlit.ioの右上のCreateAppをクリックします。
![STR3.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/510a6d19-05ea-4308-bc60-90e3111df8a6.png)

2.赤枠のGitHubのアプリケーションを選択します
![STR３.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/91dab875-a63a-4f5c-bbd2-37f13bcd7739.png)

3.赤枠内にリポジトリのパス、ブランチ(main)アプリケーションのファイルを入力すると、URLのリンクが表示されます。
![STR４.drawio (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/d517478d-ce6e-48be-9189-0dbc903d89fe.png)

すべての入力が完了したら、Deployをクリックしてデプロイしましょう


## 結果
問題なくデプロイできました！
![STR４.drawio (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/d3e2be26-faab-4d49-9408-3144439fd56e.png)

起動ができなかったり、問題が発生した場合は、右下のManaged Appをクリックするとログを確認することができます。ログを確認して問題を特定しましょう。


## 最後に
以上でGitHubとStreamlit.ioを使用したアプリケーションの公開方法になりました。
せっかくなのでこちらにデプロイしたアプリケーションのURLを載せておきます。

じゃんけんアプリのURL
https://janken-sample-kvmju5biyjahtbxk5qvght.streamlit.app/


## 追記OpenCVの依存関係によって発生するエラーについて
Streamlit Community Cloud（無料の streamlit.io）上でアプリを公開しようとした際、OpenCV（cv2）をインポートしようとすると以下のようなエラーが発生：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/e78df984-c1aa-42e5-b0a0-13bc4558fb97.png)

これは、OpenCVが画像表示などの内部処理で使うlibGL.so.1（OpenGL 関連ライブラリ）がインストールされていないために発生しているエラーのようです。

### 解決法
packages.txt ファイルを使うことで、必要な APT パッケージを自動インストールできるため、packages.txtを作成します。

![名称未設定ファイル.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112269/3db4c7c0-96df-41d6-9f13-4324ff62a145.png)

以下の内容をpackages.txtには以下の内容を記載します。
```
libgl1-mesa-glx
libglib2.0-0
```

この状態でStreamlit.ioで再びデプロイすると、無事に起動することができました。