Webアプリのデプロイ②

前回の投稿で示したデプロイまでの流れ（以下）の続きで、今回はGitHubについてです。

1. webアプリ素材（メインのpythonプログラム、使用するデータ（ExcelやDB）、requirements.txtなど）の作成

2. GitHubのリモートリポジトリへ１で作成した素材を保存

3. Streamlit Community Cloudにデプロイ

GitHubとは？

GitHubとは、ソフトウェア開発プロジェクトのバージョン管理やファイル共有するためのプラットフォームです。
本職ではないので、十分機能を理解して活用しているわけではないので詳しいことは分かりませんが、web上でファイルを共有し共同開発していく時に便利なようです。改訂履歴の流れを分岐して記録（ブランチ）でき、過去のバージョンに戻ることもできます。
ここでは、ただのファイル共有の場として使用するだけなので、細かいことは気にしなくても大丈夫です。あと、有料プランもありますが無料プランでも多くの機能を利用できるので、今回の使い方であれば無料プランで十分です。

よく使う用語

• レポジトリ（repository）：ファイルの保管庫。

• コミット（commit）：ローカルリポジトリ（自分のコンピュータ上）において、変更内容を1つの単位として保存する操作。

• プッシュ（push）：ローカルリポジトリで行ったコミットをリモートリポジトリ（ネットワーク上の共有保管庫）に送信する操作。

GitHubを使うまでの準備

まずは、GitHubのアカウントを作成します。右上の「Sign up」からガイドに沿って必要事項を入力します。

GitHub: Let’s build from here

ご自身のPCにGitをインストールします。以下のリンクはwindows用です。

Git for Windows

リポジトリ作成とファイルのpush

サンプルファイル

サンプルとして、以前の投稿で使用した以下のコードを「main.py」という名前で保存したフォルダ（sampleApp）を準備してください。

import streamlit as st
import pandas as pd
import altair as alt

# ファイルの読み込み
df = pd.read_csv('newly_confirmed_cases_per_100_thousand_population_daily.csv')
# データフレームの整形
df['Date'] = pd.to_datetime(df['Date'])
df = df[['Date', 'Hokkaido', 'Tokyo', 'Osaka', 'Okinawa']]
df.rename(columns={'Date': '年月日', 
                   'Hokkaido': '北海道', 
                   'Tokyo': '東京', 
                   'Osaka': '大阪', 
                   'Okinawa': '沖縄'}, 
          inplace=True
          )
# Altair用にmelt
df_melt = pd.melt(df, id_vars='年月日', var_name='都道府県', value_name='陽性者数')

# 表示する都道府県を選択
options = df_melt['都道府県'].unique().tolist()
prefs = st.multiselect('都道府県を選択', options)

btn = st.button('表示')
if btn:
    df_q = df_melt.query('都道府県 in @prefs')
    chart = alt.Chart(df_q).mark_area().encode(
                    x="年月日:T",
                    y="陽性者数:Q",
                    color="都道府県:N",
                    row=alt.Row("都道府県:N"),
                ).properties(height=200, width=400
            )
    st.altair_chart(chart)
    # 表示用にdfを加工（選択された都道府県のみに）
    df.set_index('年月日', inplace=True)
    df_select = df[prefs]
    st.dataframe(df_select.style.highlight_max(axis=0), 
                 width=150*len(options), height=300)

同じフォルダ内に、requirements.txtとmain.pyの中で読み込んで使用するcsvファイル（newly_confirmed_cases_per_100_thousand_population_daily.csv）も保存してください。
コードの内容については以下のリンクを参照してください。

新規リポジトリの作成

github.comに作成したアカウントでSign inし、Dashbord画面の左上にある「New」をクリックするか、右上の「＋」から「New repository」をクリックするとリポジトリ作成画面に移ります。

入力が必須の「Repository name」に名前を入力します（ここでは、"sampleApp"としています）。あとは右下の「Create repository」をクリックすると新規リポジトリが作られます。

URLが割り当てられるのでコピーしておきます。

commit・push

ここからはコマンドプロンプトで操作します。
①まずは、cdコマンドで先ほど作成したフォルダ（ディレクトリ）に移動します。

cd C:\Users\ユーザー名\デスクトップ\...\sampleApp

②次にGitリポジトリの初期化を行うために、以下のコマンドを実行します。

>git init

実行すると現在のディレクトリ内に「.git」という隠しディレクトリが作成されます。このディレクトリには、Gitがリポジトリのバージョン管理情報を保存するためのファイルやフォルダが含まれます。

③フォルダ内のファイルをインデックス（リポジトリにコミットする準備をするために変更内容を一時的に保存する場所）に追加します。

>git add .

④インデックスに追加されたファイルをコミットします。

>git commit -m "first commit"

""の中は任意のコメントを入れることができます。どのような変更を加えたのか入れておくと分かりやすくなります。

実行後の表示

⑤リポジトリとの紐付けを行います。git remote add originに続くURLは、リポジトリ作成時にコピーしたURLです。

>git remote add origin https://github.com/アカウント名/sampleApp.git

⑥プッシュして紐付けたリモートリポジトリにコミットを送信します。

>git push origin master

GitHub上でsampleAppを開いてみると3ファイルが保存されているのが分かります。ちなみに、コミットするときに入れたコメントは、ファイル名の隣に表示されます。

ファイルの修正・追加

最初に3ファイルを保存しましたが、コードを修正したりファイルを追加したりした場合は、同様の手順で変更を反映させる必要があります。ただし、②初期化と⑤紐付けは不要です。

---

慣れない用語がたくさん出てくるので分かりにくいですが、やっていることは単純なので何回かやっているうちに慣れてきます。
ターミナルでコマンドを打ち込むことで、ファイルをアップできます。ファイルを修正・追加するたびに、cd → add → commit → pushするのが面倒という方はbatファイルを作成しておくと楽かもしれません。