食品安全文化を評価するWebアプリを簡単作成③(公開)

食品安全文化を評価するWebアプリを簡単作成③(公開)

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

それでは最後にアプリをインターネット上に公開します。

インターネットに公開するには通常Webサーバーが必要になります。しかし、今回は GitHubstreamlit の2つのWebサイトを使って、自分でWebサーバーを用意せずに公開します。

目次

requirements.txtを作る

まず事前準備として、VS Codeでapp.pyと同じフォルダの中に新しいファイルrequirements.txtを作ります。

requirements.txtを作る

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

streamlit
pandas
plotly
requirements.txtを作った後

後の作業でstreamlitでアプリを公開する際に、外部ライブラリを明示する必要があるためrequirements.txtが必要があります。

他のアプリを作った場合も同様で、使用した外部ライブラリをrequirements.txtに記載する必要があります。

GitHubにアカウントを作る

GitHubにアクセスし、【GitHubに登録する】をクリックします。

GitHubに登録する

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

必要事項を入力
項目説明
UsernameGitHubに登録するユーザ名
Email addressGitHubに登録するEメールアドレス
PasswordGitHubのパスワード
Email preferences製品の最新情報、お知らせなどが不要であれば、チェックしなくてよい
Verify your accountロボットかどうかの確認

一番下のCreate accountをクリックします。

登録したメールアドレス宛にメールが送られてくるので、そこに記載があるコードを入力します。

メールに送られてきたコードを入力

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

コードを入力後の画面

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

freeを選ぶ

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

そもそもGitHubって何なの?

GitHub(ギットハブ)は、プログラムのコードをオンラインで共有・管理するサービスです。

ソフトウェアなどを開発するとき、通常複数人のプログラマーが一緒に作業をします。みんなで一緒に作業するので、誰かがコードを変更した際には、変更箇所をみんなで共有しないと大変なことになります。

そのような変更履歴の管理といった「バージョン管理」にGitHubが用いられています。

複数人でなく、一人で作業する場合でもバージョン管理やコードの公開に利用することができます。基本無料なので、世界中のプログラマーが利用しています。

GitHubに新しいリポジトリを作る

GitHubにアカウントができると、下のような画面になります。

Create repositoryをクリックします。.

Create repositoryを選ぶ

Repository(レポジトリ)とはWindowsの「フォルダ」のようなもので、GitHub内でコードなどのファイルを保存する場所です。

下の画面になるので、Repository name(レポジトリ名)には好きな名前を付けます①。私は「Food safety culture app」としました。

そしてCreate repositoryをクリックします②。

レポジトリを作る

これでレポジトリが作られました。

次に「uploading an existing file」をクリックします。

uploading an existingfileをクリック

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

GitHubにファイルをドラッグする

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

GitHubにファイルをドラッグした後

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

アップロードした後のレポジトリ

Streamlitのアカウントを作成する

次にStreamlitのアカウントを作成します。

Streamlitの公式ページから、右上にあるSign upをクリックします。

今回はEmailで登録してみます。Emailを入力し、「Continue with email」をクリックします。ちなみに「Continue with GitHub」とあるので、面倒くさければ先ほど作ったGitHubでログインしても大丈夫です。

streamlitのアカウントを作る

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

sign in streamlit

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

Connect to GitHub

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

Authorize streamlit

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

set up your account

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

streamlitのアカウント完成画面

Streamlitでアプリを公開する

Streamlitの右上にあるNew appをクリックします。

New appを選ぶ

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

Deploy!をクリック

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

作成中なので待つ

無事、食品安全文化の計測アプリがインターネットに公開されました。

アプリを削除する場合

streamlitのトップ画面が下のようになっています。

現在公開中のアプリ名が表示されており、右端の をクリックすると、下のようになります。この中のDeleteを選択すると、アプリを削除することができます。。

アプリを削除する場合

また、右上のSettingsをクリックすると公開方法の変更などを行うことができます。


以上で、Pythonのダウンロード、streamlitでのアプリ作成、アプリの公開になります。

GitHubなど新しい言葉が多く、かなりのボリュームでしたね。

今回、アプリを作ろうと思って、最終的に公開するまでにかかった時間は1時間ほどでした。このように、streamlitを使えば迅速に、そして簡単にアプリを作り、公開まで行えます。

streamlitでできることはまだまだあります。英語でも日本語でも情報はたくさんあります。

みなさんも、「こんなアプリあったらいいな」というものを、streamlitで作ってみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次