
前回までの記事で、自分のウェブブラウザ上にアプリが表示され、うまく動くことを確認しました。


それでは最後にアプリをインターネット上に公開します。
インターネットに公開するには通常Webサーバーが必要になります。しかし、今回は GitHub と streamlit の2つのWebサイトを使って、自分でWebサーバーを用意せずに公開します。
requirements.txtを作る
まず事前準備として、VS Codeでapp.pyと同じフォルダの中に新しいファイルrequirements.txt
を作ります。


requirements.txt
には今回使用した外部ライブラリを記載します。下のように入力しキーボードのCtrl
+ S
で保存します。
streamlit
pandas
plotly


後の作業でstreamlitでアプリを公開する際に、外部ライブラリを明示する必要があるためrequirements.txt
が必要があります。
他のアプリを作った場合も同様で、使用した外部ライブラリをrequirements.txt
に記載する必要があります。
GitHubにアカウントを作る
GitHubにアクセスし、【GitHubに登録する】をクリックします。


すると下の画面になるので、必要事項を入力していきます。


項目 | 説明 |
---|---|
Username | GitHubに登録するユーザ名 |
Email address | GitHubに登録するEメールアドレス |
Password | GitHubのパスワード |
Email preferences | 製品の最新情報、お知らせなどが不要であれば、チェックしなくてよい |
Verify your account | ロボットかどうかの確認 |
一番下のCreate account
をクリックします。
登録したメールアドレス宛にメールが送られてくるので、そこに記載があるコードを入力します。


すると、下のような画面となるので、必要事項を入力し、Continue
をクリックします。(この画面は出ない場合があります。)


下のような画面が出てきたらfree
(無料ユーザー)を選びます。(この画面は出ない場合があります。)


以上でGitHubにアカウントが作れました。



そもそもGitHubって何なの?



GitHub(ギットハブ)は、プログラムのコードをオンラインで共有・管理するサービスです。
ソフトウェアなどを開発するとき、通常複数人のプログラマーが一緒に作業をします。みんなで一緒に作業するので、誰かがコードを変更した際には、変更箇所をみんなで共有しないと大変なことになります。
そのような変更履歴の管理といった「バージョン管理」にGitHubが用いられています。
複数人でなく、一人で作業する場合でもバージョン管理やコードの公開に利用することができます。基本無料なので、世界中のプログラマーが利用しています。
GitHubに新しいリポジトリを作る
GitHubにアカウントができると、下のような画面になります。
Create repository
をクリックします。.





Repository(レポジトリ)とはWindowsの「フォルダ」のようなもので、GitHub内でコードなどのファイルを保存する場所です。
下の画面になるので、Repository name(レポジトリ名)には好きな名前を付けます①。私は「Food safety culture app」としました。
そしてCreate repository
をクリックします②。


これでレポジトリが作られました。
次に「uploading an existing file」をクリックします。


「Drag files here to add them to your repository」(ファイルをここにドラッグすると、リポジトリに追加されます。)とあるので、app.py
とrequirements.txt
のファイルをドラッグします。または、「choose your file」をクリックし、ファイルを直接選びます。


追加されたファイルが表示されました。Commit changes
をクリックします。


これでレポジトリに必要なファイルがアップロードされました。


Streamlitのアカウントを作成する
次にStreamlitのアカウントを作成します。
Streamlitの公式ページから、右上にあるSign up
をクリックします。
今回はEmailで登録してみます。Emailを入力し、「Continue with email」をクリックします。ちなみに「Continue with GitHub」とあるので、面倒くさければ先ほど作ったGitHubでログインしても大丈夫です。


すると登録したEmailに下のようなメールが送られきます。Sign in to Streamlit
をクリックします。


GitHubに連携するか聞いてくるので、Connect GitHub acount
をクリックする。


Streamlitに以下のことを許可するか聞いてくるので、Authorize streamlit
をクリックする。


以下のように必要事項を入力します。EmailはGitHubと同じものを使用しましょう。Continue
をクリックする。


これでStreamlitにアカウントが作れました。


Streamlitでアプリを公開する
Streamlitの右上にあるNew app
をクリックします。


以下の画面が開きます。GitHubとの連携がうまくいっていれば、「Repository」はGitHubに作ったレポジトリが選択できます。「Main file path」はapp.py
になります。最後にDeploy!
をクリックします。


下のような画面が出て、しばらく待っていると、アプリがインタネット上に公開されます。


無事、食品安全文化の計測アプリがインターネットに公開されました。
アプリを削除する場合
streamlitのトップ画面が下のようになっています。
現在公開中のアプリ名が表示されており、右端の ⋮ をクリックすると、下のようになります。この中のDeleteを選択すると、アプリを削除することができます。。


また、右上のSettings
をクリックすると公開方法の変更などを行うことができます。
以上で、Pythonのダウンロード、streamlitでのアプリ作成、アプリの公開になります。



GitHubなど新しい言葉が多く、かなりのボリュームでしたね。
今回、アプリを作ろうと思って、最終的に公開するまでにかかった時間は1時間ほどでした。このように、streamlitを使えば迅速に、そして簡単にアプリを作り、公開まで行えます。
streamlitでできることはまだまだあります。英語でも、日本語でも情報はたくさんあります。
みなさんも、「こんなアプリあったらいいな」というものを、streamlitで作ってみてください。
コメント