python Herokuにアプリケーションをアップロード


##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をダウンロード。インストール。[ここから](www.toolbelt.heroku.com/)
3.別に必ずしも開く必要はないが、楽なので仮想環境を開く。このコマンドはappフォルダ上で行う。appフォルダでterminalを開くには、[ここの方法](https://m.designbits.jp/13031711/)とかでmacの設定を変えるのが楽。

```py: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以外でももちろんいける