[後編] 文系初学者がPython×Flask×データベースをつかって検温記録WEBアプリをつくってみたメモ
前編ではローカルでの実装〜テストまでやり切ったので、後編はいよいよインターネッツの大海原に飛び出していきます。
今回、Herokuを使ってインターネット公開を目指します。
サラッと涼しい顔で書きましたが「ヘロクって何？強めの武器？」という状態からなんとかなったのでご安心ください。
↓↓ 前編はコチラ ↓↓
↓↓ここからアップデートを重ねた今の姿はコチラ↓↓
９．Githubにリモートリポジトリをつくる
ローカル環境からインターネットの世界へ飛び出す一歩目です。
リポジトリって何やねん！ですが、ファイルの保管庫のことですね。
・いまVSCodeで編集している [ken-on-kun] が 'ローカルリポジトリ'
・WEB公開するためにインターネット上に置く保管庫が 'リモートリポジトリ'
後者を、Github上につくります。
* アカウント登録・ログイン手順などは割愛します。
GitHubにログインして、右上の「+」から「New repository」をクリック
・リポジトリ名入れる（なんでもいいですがローカルと同じ名前とか）
・「initialize ~」にチェック入れる
・Create する
できました。
保管庫をつくっただけなので、いまは空き箱状態です。（README.mdっていう自己紹介ファイルだけが生成されてます）
１０．ローカル ⇄ リモートリポジトリをつなぐ
ローカル（PC内保管庫 [ken-on-kun]）のファイルを、リモート（Github内保管庫[ken-on-kun]）にアップロードして、いわゆる同期状態にすることが次のステップです。ここで「Git」と「Github」を使っていきます。
同期したあとの変更履歴を管理する仕組みが「Git」で、それをWEBブラウザで使いやすく多機能にしてるサービスが「Github」、という感じで解釈してます。
リモート先Gitを設定する
Githubサイトの右中段「Clone or download」をクリック→ 表示されたURLをコピー（＝リモートリポジトリのURLです）
ターミナルで、下記を１行ずつ実行 *記号は変えずにそのまま
$ git remote add origin <GitHubのリモートリポジトリ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設定によって、知らぬ間にVSCodeとGithubが仲良くなり、連携いつでもOK牧場です。
ローカル(PC)でファイル修正 → 変更点をリモート先(GitHub)に反映、という一連の作業がすべてVSCodeでできます。VSCode便利。
なおこのローカル → リモートへの反映行為を「プッシュ」と呼ぶそうです。さきほどの「フェッチ/プル」とは逆方向ですね。
今回初期設定して以降も、修正したらプッシュを繰り返して、ローカルとリモートが同期されている状態を保ちます。
VSCodeで変更履歴を「コミット」
また新キャラ登場、「コミット」てなんやねんですが、「プッシュ」の前に必ず挟まるGitのお作法です。考えず感じましょう。
VSCodeの枝分かれ的なアイコンをクリック （Souce Controlというメニュー）
入力欄に、何がしか変更履歴コメントを入力して、Command+Enter（もしくは入力欄右上のチェックマークアイコンをクリック）
この行為が「コミット」です。リモート先にプッシュする前に、ローカル内で待機状態にしておく感じでしょう。コメントを入力するのは、変更内容が後からわかるように、という目的かと思います。
ちなみにコメント欄の下に並んでいるファイルが、このコミットにぶら下がる「これ変更したよ」の一覧でして、「コミット」すると、左メニューに並んでいた変更履歴がリセットされます。
あと道路標識みたいなミニアイコンを押すと、過去履歴を見れます。ほかにも履歴があるので、どうやらFirst commitではなかったようです。（という記憶喪失も可視化してくれます）
コミットしたら、リモートに「プッシュ」
左下の「雲にGo！」的なアイコンをクリック
すると・・・
Oh... あきまへんがな...
Open Git Logを押してみます。
右下のOUTPUTってところにエラーログが表示されます。VSCodeすご。
さきほどのウォーニングとログから察するに「Pushの前にまずPullしなはれ！」ということかなと。。。自信ないけどやってみる。
ターミナルでリモート先からGitをプル
「プルせい！」と言われたものの、前の工程で「フェッチ」までいってしまってるので、ここでは「マージ」をします。
わけわかんないですよね、以下が方程式だそうです。
プル ＝ フェッチ ＋ マージ
むずい。でもやるべし。ターミナルで以下実行します。
git merge origin/masterそしてもう一回、VSCodeで「雲へGo」をクリック。
すると・・・
今度はうまくいったんでは？
リモートリポジトリ側、Githubでチェックします。
もとあったREADME.mdのほかに、前編でつくったファイルが追加されました。OK。
ローカルリポジトリ側も見てみます。
VSCodeを開いて、左上の資料風アイコンをクリック。
エクスプローラーを見ると、さっきまでなかったREADME.mdが追加されたことがわかります。（Githubのリポジトリを作った時に生成されたやつ）
上げも下げも、同期できたようです。うれしい...
１２．Heroku連携前の下準備
ここのパートは、ひとつひとつの意味がむずかしいので（自分でもうまく説明できない）、淡々と作業を羅列します。ただどれもエラーを起こさないための重要な工程なので、モレなく確実にやっておきましょう。
ターミナルでgunicornとpsycopg2をインストール
１行ずつ実行します。
$ pip install gunicorn
$ pip install psycopg2
こんな感じで 'Successfully~' が出れば成功です。
~/Procfile
VSCodeに戻り、[ken-on-kun] の下に [Procfile] というファイルをつくります。拡張子はいりません。
つくったら、エディタでコードを１行書き込み、保存します。
web: gunicorn run:app --log-file -
紫のアイコンが勝手につくられて、大切な設定ファイル感が匂い立ちます。実際、これがなくてエラーが起きたときはわけわからず迷宮入りし、かなり凹みました。
~/requirements.txt
同じく[ken-on-kun] の下に、[requirements.txt] というファイルをつくりますが、こちらはターミナルで操作します。
$ pip freeze > requirements.txt特にエラーがなければ、ファイルが生成されているはずです。
VSCodeを開きます。
ファイルが新設され、内容も勝手に書き込まれています。
これはローカル側でインストール済みのパッケージ/ライブラリの一覧で、インターネット側でプログラムを実行する際、Herokuはこの一覧を見て「このパッケージ/ライブラリの、このバージョンが要るのね」とインストールしてくれるようです。
遠い彼の地で作業してくれるHerokuさんへのお手紙ですね。
コミットして、プッシュする
いま作ったのはローカル側なので、忘れずリモート側に同期させましょう。
手順はさきほどと同じです。レッツコミプ！
成功すると、Githubのファイル一覧に追加されます。
１３．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 herokuHerokuのタイムゾーンを日本時間に変更
これやっとかないと、いろいろ時間がずれます。サーバーは北米のを借りてるし、データベース（HerokuPostgres）は基本UTCで登録するらしいので。
ひきつづきターミナルで作業します。
% heroku config:add TZ=Asia/Tokyoうまくいったかは下記で確認できます
% heroku run bash
~ $ date
’date’ を実行したあと、こんな感じで 日本の現在時刻 'JST' が返ってくれば成功です。
GithubとHerokuを連携 → デプロイしてみる
この工程は、コチラのサイトがめちゃくちゃ丁寧でわかりやすいです。
”Githubと連携しよう” のところから参照ください。
"手動deployを実行しよう!!” のところまでやってみると、、、
Your app was successfully deployed. が出ました。
さっそく View してみると。。。（ワクワク）
Oh...
そんな一筋縄ではいかないですね。めげずにいきましょう。
１４．直す
いろんな公式ガイドや文献をつぎはぎで何とかここまでは来れましたが、知識が乏しい人間がパッチワーク式ですすめると、たいがいどこか抜け漏れがあって、最後の最後にエラーで返って絶望します。
でも落ち着いて、ログを見るところからはじめましょう。
さきほどheroku CLIをインストールしたので、ターミナルからログが見れます。
% heroku logs
見れません。あれ？
Error: Missing required flag:これ、なんか見覚えが・・・ ググってみます。
Oh... ドンピシャ鴨。
書いてある通りやってみます。
% git remote -v
はいドンピシャ。書いてある通り直します。
% heroku git:remote -a アプリ名
直りました。ログを見にいきます。
% heroku logsログが出るようになりました！（内容は非公開にさせてもらいます）
heroku logsの見方は、このサイトがとても参考になります。ただここに書かれているような顕著なエラーコードは無く、代わりにこんな１行が。
(Background on this error at: http://sqlalche.me/e/f405)データベースつくるとこで引っかかってる？
Herokuサイトを見てみます。
Ohhhh... テーブルないやん。。。
やっぱり基本的な工程の抜け漏れ、凡ミスでした。
Heroku上にデータベースをつくる
ターミナルで以下のコマンド実行。models.pyを実行してデータベースを初期化＝テーブルを作成します。ローカルでもやってた基本工程です。
% heroku run python -c "import main.models; main.models.init()" さて、気を取り直してさっきのページをリロードすると、、
やたーー！
胸の鼓動を抑えつつ、Herokuのダッシュボードに戻って [Open App] します。
↓↓↓
↓↓↓
キターーーー！！！！
データを送ってみます（ドキドキ）
↓↓↓
入ったーーーー！！！
直ってよかったーー
現場からは以上です
というわけで、細かい課題は残るものの、
・Python×Flask ×データベースをつかって検温記録アプリをつくってみる
・WEBで公開するまでの段取りをスルーで実況的にまとめる
ふたつの目的を達成できたので、これにて終了とさせていただきます。
チュートリアルとしてはかなりクドイ感じになってしまいましたが、特に自分と同じ初学者・非エンジニア・趣味レベルの皆さんにとって少しでも参考になればうれしいです。
最後まで読んでいただいた皆様、お付き合いいただきありがとうございました！皆さんもHappy Coding！
再掲
↓↓ 前編はコチラ ↓↓
↓↓ここからアップデートを重ねた今の姿はコチラ↓↓
この記事が気に入ったらサポートをしてみませんか？