HerokuはPaas。クラウドサーバー。

Heroku: https://jp.heroku.com/

Herokuは自分で作ったwebアプリとかをネット上にアップロードできるのを助けてくれる。
無料アカウントだと5つまでアプリケーションをherokuに作れる。gitでローカルからアップロードが基本。Heroku内部でデータベースも作成し、自分のwebアプリと紐付けもできる。(ただしデータベースもアプリに含まれる)

これからuploadするもの↓
前回適当に作った仮想環境：
https://qiita.com/oppasiri330/items/d5e4740a74b356a46020
簡易なhtml,css,.pyファイルを追加。flaskアプリ。

Herokuにアップロードする手順

作った仮想環境をアップロードする。
アップロード前のフォルダ構成はこんな感じ。

app(フォルダ)
|
|---static(フォルダ)
|---templates(フォルダ)
|---virtual(フォルダ)
backend.py(ファイル)

staticにcssファイル
templatesにhtmlファイル
virtualにはpythonコマンドとか、pythonのライブラリーやモジュールが保存される。
backend.pyにFlaskアプリの記述。html,css,javascriptで記述されたファイル群をフロントエンドと呼ぶ。実際に表示されるもの。

以下実際の手順：
1.www.heroku.com でアカウントを作成。
2.Heroku Toolbeltをダウンロード。インストール。ここから
3.別に必ずしも開く必要はないが、楽なので仮想環境を開く。このコマンドはappフォルダ上で行う。appフォルダでterminalを開くには、ここの方法とかでmacの設定を変えるのが楽。

terminal

. virtual/bin/activate

4.pythonモジュールのgunicornをインストール。gunicornはwebで動くためのhttpサーバー。heroku上でwebアプリケーションを動かすのに必要。仮想環境(virtualフォルダ)があるのならば、仮想環境フォルダの上でpip install gunicronすること。さっきterminalで仮想環境を起動してるならそのままうちこんでおｋ。

pip install gunicorn

5.requirements.txtファイルを作成する。中身にはpythonのパッケージのリストが記述される。このときappフォルダ上でterminalを開いていないと、仮想環境のpythonパッケージではなく、mac本体のpythonのパッケージリストが記載されてしまう。(1敗:git pushのときにエラーになった)

pip freeze > requirements.txt
# 仮想環境を開いてない場合
virtual/bin/pip freeze > requirements.txt

6.appフォルダ内部にProcfileを作成する。拡張子のないテキストファイル。heroku上でアプリケーションが何で動くか説明するためのもの。appフォルダ上でterminalを起動してnano Procfileしても、適当なテキストエディターで作ってもいい。
中にはweb: gunicorn app:appを記述した。web: gunicornはwebサーバーはgunicornで動かすの意味。app:appは左側のappはbackend.pyの内部に記述されているFlaskのインスタンス名。Flaskのインスタンス名がscriptとかならweb: gunicorn script:appになる。

7.runtime.txtを作る。現在はpython-3.6.6を受け付けてくれる。が、固定じゃない。以下のURLで確認しその都度変更がいる。https://devcenter.heroku.com/articles/python-runtimes#supported-python-runtimes

ここまでで

app
|
|---static
|---templates
|---virtual
backend.py
Procfile
runtime.txt
requirements.txt

こんな感じのフォルダ構成になってるはず。

8.Herokuにloginする。terminalで

heroku login

9.Herokuに登録したときの、emailアドレスを入力しろって言われる。入力。

10.メールアドレスを入力すると、Herokuのpasswordを入力する。Herokuにlogin完了。上記9と10をしないと、pushする際弾かれることがあるから注意。1敗

11.Heroku上に保存するためのアプリの保存場所を作る。アプリ名はなんでもいい。が、すでに存在している他人のアプリの名前と重複することができない(urlに使われるから)。そのエラーがでたら別の名前でどうぞ。

heroku create appnamewhateveryouwant

12.現在のいるディレクトリーのフォルダをgitに認識させるために。git init。ファイルとフォルダをgitに追加。

git init
git add .

13.gitは初めてかな？の場合は、以下のコマンドで、自分のemailアドレスとユーザー名を登録する。emailアドレスもユーザー名も自分のやつならなんでもいい。アドレスもユーザー名も""の引用符の中に入れること。

git config --global user.email "yourmailaddress@gmail.com"
git config --global user.name "whateverusername"

14.コミットを行う。-m "comment"でコメントをつけないと弾かれるから注意。

git commit -m "first commit"

15.heroku infoで現在herokuのどこのアプリに接続してるかわかる。何も表示されなかったら、以下のコマンドでherokuのアプリに接続する。これからherokuのこのアプリ名の場所にローカルファイルをアップロードする。

git:remote --app appname(←さっき自分で作ったappの名前)

16.ファイルを送る(push)。

git push heroku master

17.terminalでなにやら処理がといろいろ起きる。エラーが起きたら何かが間違ってる。絶望。runtime.txtやProcfile、requirements.txtなど確認。gti configでメアドとユーザー名は登録した？手順を再確認。正常に実行されて、Doneが出たら正常にgit pushが行われアップロードされた。アプリのURLが表示される。

18.heroku openでアプリケーションのURLが開かれる。heroku errorって画面じゃなく、正常に自分が作ったhtmlが開かれてたらおｋ。heroku errorだと絶望。多分runtime.txtかProcfileあたりが間違ってる。1敗(Procfileが間違っていた)。

heroku open

アップロードしたやつ：ちんこのサイズを集めるサイト。メールが返ってくるよ
https://junpeidatacollector.herokuapp.com/

おまけ：
uploadしたくないファイルが有る場合は、.gitignoreファイルを作ればいい。appフォルダ内部に作る。中にフォルダ名やファイル名を記述すれば、それはアップロードされない。ただmacだと .で名前が始まるファイルはフォルダ上に表示されない。めんどいね。消すためには.gitignoreがある階層に移動してから、terminalでrm .gitignoreをする。自分は"sublime Text"ってエディターで作った。

あとがき

ちょっと手順変えればpython以外でももちろんいける