この記事は、忘れっぽい自分のための覚え書きメインですが、初学者/文系/非エンジニア/趣味レベルの同胞にも参考になればと、丁寧めに書き留めていきます。
特に初学者は汎用的な情報から察したり応用する力が弱いので、あえて写実的な書きっぷりにしています。結果、鬼のように長くなったので前・後編に分けました。（それでも長いですが）
ちなみにこの時からアップデートを重ねて、いまではLINEでサクッと記録できるようになりました。一般公開してますので、よろしければお試しください。
LINE公式アカウント「毎日検温くんβ」
振り返り
前編はローカル環境（=PC端末内）でちゃんと動くWEBアプリまで育ちました。
後編はいよいよ、インターネッツの大海原へと漕ぎ出します。
前述のとおり、Herokuを使ってインターネット公開を目指します。
サラッと涼しい顔で書きましたが最初は「ヘロクって何？強めの武器？」という状態でした。
まぁ何とかなるもんですね。
9．Githubにリモートリポジトリをつくる
ローカル環境から飛び出す一歩目です。
リポジトリって何やねんですが、ファイルの保管庫のことですね。
・いまVSCodeで編集しているPC内の保管庫（[ken-on-kun]フォルダ）が
ローカルリポジトリ
・WEB公開するためにインターネット上に置くファイル保管庫がリモートリポジトリ
後者を、Github上につくります。
（アカウント登録の手順はこの記事では割愛します）
GitHubにログインして、右上の「+」から「New repository」をクリック
-
Repository nameを決める （なんでもいいですが、ローカルと同じ名前がいいんですかね） -
Initialize ~にチェック入れる -
Create repositoryする
はい、できました。
この時点では保管庫をつくっただけなので、空き箱状態です。
（正確には、README.mdっていう紹介用のファイルだけが自動生成されてます）
10．ローカル ⇄ リモートリポジトリを連携
ローカルの[ken-on-kun]フォルダの中身を、リモート（Github上）の[ken-on-kun]フォルダにアップして、同期状態にすることが次のステップです。ここで「Git」を使っていきます。
同期したあとの変更履歴を管理する仕組みが「Git」で、それを応用してWEBブラウザでわかりやすく多機能にしてるのが「Github」、という感じで解釈してます。
リモート先Gitを設定する
GithubサイトのClone or downloadをクリック →表示されたURLをコピー
これが、リモートリポジトリのURLです
次にターミナルで、下記を１行ずつ実行します。
% git remote add origin <リモートリポジトリのURL>
% git config --global user.name "GitHubに登録しているユーザー名"
% git config --global user.email GitHubに登録しているメールアドレス
ちゃんと入ったかどうかは、下記で確認できます。
% git remote -v
% git config user.name
% git config user.email
実際の画面
黒塗りのところに、ご自身のGitHub登録情報が返ってきたら成功です。
リモート先からローカルにフェッチする
リモート(GitHub側)の最新情報を、ローカル(PC側)に落とし方向に同期することを「フェッチ」というそうです。聞き慣れない用語が増えてきましたが、まぁそのうち慣れるやろ、くらいのノリでいきます。
ターミナルで下記を実行
% git fetch
実際の画面
何やらwarningが出ていますが気にしなくていいようです。
最後の１行が出てればOK。
ローカルのmasterブランチが、リモートのorigin/masterブランチの最新情報を見にいきましたよ、みたいな感じですかね。知らんけど。
「フェッチ」とか「プル」とか「ブランチ」とか、Gitの仕組みについては以下がわかりやすかったです。
サル先生のGit入門サル先生のGit入門〜バージョン管理を使いこなそう〜【プロジェクト管理ツールBacklog】
git fetchの理解からgit mergeとpullの役割 - Qiita
11．ローカル ⇄ リモートリポジトリを同期
ここまでGit設定ができると、GithubとVSCodeをいつでも連携できる状態になってます。
ローカル(PC側)でファイルを編集して、変更点をリモート(GitHub側)に反映、という一連の作業がすべてVSCode上でできます。ターミナル操作とかGitの理解がイマイチな状態でも、とりあえずサクサク進められるのでめっちゃ助かります。
なおこのローカル→リモートへの上げ方向の同期を「プッシュ」と呼びます。さきほどの「フェッチ/プル」とは逆方向ですね。
VSCodeで変更履歴を「コミット」
またもや新キャラ「コミットさん」登場。
専門用語攻勢が息つく間もないですが、立ち止まらず走りましょう。
ローカルでファイル編集したら、「コミット」して、「プッシュ」する。がGitのお作法ということで。考えず感じましょう。
VSCode左メニューの枝分かれ的なアイコンをクリック （Souce Controlというメニュー）
入力欄に、何がしか変更履歴を表すコメントを入力して、Command+Enter
（もしくは入力欄上のチェックマーク形のアイコンをクリック）
この行為が「コミット」です。
リモートリポジトリ（=Github）にプッシュする準備として、ローカル内の発射台に乗せる感じですかね。
コメントを入力するのは、発射ごとの変更内容が後からわかりやすいように、という目的。
ちなみにコメント欄の下CHANGESに並んでいるファイルが、このコミットでの変更点一覧で、Command+Enterでコミットが完了するとリセットされます。
上部にある道路標識みたいなアイコンを押すと、過去のコミット履歴を見れます。
一回履歴があるので、どうやらFirst commitではなかったようです。（という記憶喪失も可視化してくれます）
コミットしたら、リモートに「プッシュ」
どんどん荒っぽく進めます。
左下の「雲にGo！」的なアイコンをクリック
すると・・・
Oh... あきまへんがな...
Open Git Logを押してみます。
すると、右下のOUTPUTってところに該当のエラーログが表示されます。
VSCodeすご。
さきほどのウォーニングとログのhintから察するに 「Pushの前にまずPullしなはれ！」 ということかな。。。
自信ないけどやってみる。
ターミナルで、リモートからGit「プル」
「プルせい！」と言われたものの、前の工程で「フェッチ」までいってしまってるので、ここでは「マージ」をします。
ってわけわかんないですよね、以下が方程式だそうです。
プル ＝ フェッチ ＋ マージ
git fetchの理解からgit mergeとpullの役割 - Qiita
むずい。でもやるしかない。ターミナルで以下実行します。
git merge origin/master
そしてもう一回、VSCodeで「雲へGo」をクリック。
すると・・・
お、今度はうまくいったんでは？
リモートリポジトリ側、Githubでチェックします。
もとあったREADME.mdのほかに、前編でつくったファイルが追加されました。
ないす。
ローカルリポジトリ側も見てみます。
VSCodeの左メニュー、ファイルっぽいアイコンをクリック。
EXPLORERを見ると、KEN-ON-KUNの中にさっきまでなかったREADME.mdが追加されたことがわかります。（Github上にリモートリポジトリを作った時、自動生成されたやつ）
上げ方向も下げ方向も、ちゃんと同期できたようです。
う、うれしい...
12．Heroku連携前の下準備
ここのパートは、ひとつひとつ理解するのは難解だったので（自分でもうまく説明できない）、淡々と作業を羅列します。ただ、どれもこれもその後エラーを起こさないための重要な工程なので、モレなく確実にやっておきましょう。
ターミナルでgunicornとpsycopg2をインストール
１行ずつ実行します。
% pip install gunicorn
% pip install psycopg2
実際の画面
こんな感じでSuccessfully~が出れば成功です。
~/Procfile
VSCodeに戻り、[ken-on-kun] の下に [Procfile] というファイルをつくります。拡張子はいりません。
つくったら、エディタでコードを１行書き込み、保存します。
web: gunicorn run:app --log-file -
結果をVSCode上で見たらこんな感じ
紫のHerokuアイコンが付けられて、大切な設定ファイルだよ感が匂い立ちます。
（実際、これがなくてエラーが起きたときに一度完全に迷宮入りし、相当疲弊しました）
~/requirements.txt
同じく[ken-on-kun] の下に、[requirements.txt] というファイルをつくります。
こちらはターミナルで操作します。
% pip freeze > requirements.txt
特にエラーがなければ、ファイルが生成されているはずです。
VSCodeを開きます。
ファイルが新設され、内容も勝手に書き込まれています。
これはローカル環境でインストールされていたのパッケージ/ライブラリの一覧を、リモート側に伝えるファイルです。
インターネット上でプログラムを実行する際、Herokuはこの一覧を見て「このパッケージ/ライブラリの、このバージョンが要るのね」とインストールしてくれるようです。
黒ヤギさんと違って、ちゃんと読んでくれて偉いですね。
Gitコミットして、プッシュする
新しいファイルを２つ追加しましたが、全てローカル側での出来事です。
Gitの変更履歴として記録されているので、忘れずリモートに同期させましょう。
コミット〜プッシュの手順はさきほどと同じです。レッツビギン！
成功すると、リモート（=Github）のファイル一覧に追加されます。
13．Herokuでの設定 〜 WEB公開まで
Herokuのアカウント新規登録の手順は割愛します。ググってください。
サイトにログインした状態からはじめます。
Heroku内にアプリを作成
ログイン後画面の右上New、Create new appをクリック
アプリ名を入力（何でもいいですが、リポジトリ名に揃えました）
Create appします。
Heroku Postgres アドオンを追加
リモート側でのデータベース管理に、Herokuのアドオン機能「Heroku Postgres」を使います。
アドオンカタログサイトで検索し、インストール
さっきつくったアプリ名を選択して、Provision add-onをクリックすると、インストールが始まります。
終わるとこんな画面になります。Add a Procfileというウォーニングが出てますが、すでに作ってあるので大丈夫なはず。。。 進みます。
Heroku CLIをインストール
ターミナル上でHerokuを操作するために必要になります。
% brew tap heroku/brew && brew install heroku
Herokuのタイムゾーンを日本時間に変更
これやっとかないと、いろいろ時間がずれます。サーバーは北米のを借りてるし、データベース（HerokuPostgres）は基本UTCで登録するらしいので。
ひきつづきターミナルで作業します。
% heroku config:add TZ=Asia/Tokyo
うまくいったかは下記で確認できます
% heroku run bash
~ % date
’date’ を実行したあと、こんな感じで 日本の現在時刻JSTが返ってくれば成功です。
GithubとHerokuを連携 → デプロイしてみる
この工程は、コチラのサイトがめちゃくちゃ丁寧でわかりやすいです。
”Githubと連携しよう” のところから参照ください。
heroku 初級編 - GitHub から deploy してみよう - - Qiita
"手動deployを実行しよう!!” のところまで進めると、、、
Your app was successfully deployed.と出ました。（ワクワク）
さっそくViewしてみると。。。（ドキドキ）
Oh...
そんな一筋縄ではいかないですね。
14．直す
公式ガイドや参考文献をつぎはぎで何とかここまで来ましたが、やはり基礎がない人間は必ずどこかに綻びを作ってしまい、最後の最後ラスボスに一撃されて絶望するんですよね。
でも何度も死の淵から蘇ってきた私はもうあの頃の勇者ではありません。ただのゾンビです。
死んだ目で、淡々とログを見てみましょう。
さきほどheroku CLIをインストールしたので、ターミナルからログが見れます。
% heroku logs
あれ？ これまたエラー。
Error: Missing required flag:
これ、なんか見覚えがあるような・・・ ググってみます。
[Herokuエラー]Error: Missing required flagが出た - Qiita
Oh... ドンピシャ鴨。
記事の通りにやってみます。
% git remote -v
はいビンゴ。
記事の通りに直します。
% heroku git:remote -a アプリ名
これで直ったはず。改めてHelokuのログを見にいきます。
% heroku logs
ログが出るようになりました！（内容は非公開にさせてもらいます）
heroku logsの見方は、このサイトがとても参考になります。
エラー時のHerokuのlogの見方 - Qiita
ただ、記事に書かれているような顕著なエラーコードは無く、代わりにこんな１行が。
Background on this error at: http://sqlalche.me/e/f405
sqlalche.meってことは、データベースまわりで引っかかってる？
Herokuサイトを見てみます。
Ohhhh... DBのテーブル作ってないやんけ。。。
やっぱり基本的な工程漏れ、凡ミスでした。
Heroku上にDBテーブルをつくる
ターミナルで以下のコマンド実行。models.pyを実行してデータベースを初期化＝テーブルを作成します。
ローカルでもやってた基本工程ですね。
% heroku run python -c "import main.models; main.models.init()"
さて、気を取り直してさっきのHeroku Postgres情報をリロードすると、、
やたーー！
胸の鼓動を抑えつつ、Herokuのダッシュボードに戻ってOpen Appします。
↓↓↓
↓↓↓
↓↓↓
キターーーー！！！！
お父さんテレビ映ったよー！！！ 力道山が空手チ
落ち着いて、データを登録してみます。
↓↓↓
うひょー入ったーーーー！！！
むはーーーー！！！
現場からは以上です
というわけで、プロセスもUIもだいぶあらびきですが、
・Python×Flask ×データベースをつかって検温記録アプリをつくってみる
・WEBで公開するまでの段取りをスルーで実況的にまとめる
ふたつの目的を達成できたので、これにて終了とさせていただきます。
チュートリアルとしては相当クドイですが、特にじぶんと同じ文系/初学者/非エンジニア/趣味レベルの皆さんにとって少しでも刺さるところがあれば本望です。
最後まで読んでいただいた皆様、本当にありがとうございました。
半べそかきつつ、せっかくここまでやり切れたので今後も楽しんでPython続けていきたいと思います。
みなさまも、Happy Coding！
再掲
この時からアップデートを重ねて、いまではLINEでサクッと記録できるようになりました。一般公開してますので、よろしければお試しください。
LINE公式アカウント「毎日検温くんβ」