Heroku初心者がFlaskを使った簡素なアプリケーションをデプロイするまで！

こんにちは、今回はHerokuを初めて使った僕が結構つまづきながらなんとかデプロイまで行けましたので、その足跡をここに書きたいと思います。
ぜひ誰かのサポートになれば幸甚です！

## Agenda
1. Herokuって何？
2. 登録をしよう
3. CLIツールのインストール
4. terminalからHerokuへとログイン！
5. アプリケーションをローカルで動かしてみる！
6. Herokuへとデプロイ

## 前書き
こちらの記事は基本的に公式ドキュメントをもとに書いております！
リンク：https://devcenter.heroku.com/articles/getting-started-with-python#introduction

また、今回使用するアプリケーションはこちらに格納しておりますので、適宜クローンしてご使用ください！
スターなどをいただけましたら大変ありがたいです！

https://github.com/Rowing0914/Heroku_training_flask

また、今回はFlaskの説明は省いておりますので、もしご不安な方は一度Flaskでのアプリケーションを組んでみる練習をされてもいいかもしれません！ググるといい記事が色々とありました！
<img width="788" alt="Screen Shot 2018-06-03 at 10.52.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/240801/17752b35-9801-547c-014a-15f8fa8e9ad4.png">


## 1. Herokuって何？
もう数え切れないくらいの記事で書かれていることでして、、たぶんに重複してしまう表現ですが、書かせていただきます。
Herokuとは、Webアプリケーションの開発から公開までをスムーズにできるプラットフォームのようなものです。そこでは、様々なプログラムで書かれたアプリケーションを動作可能な環境を提供されており、開発者が指定のフォーマットに則って言語の指定やその実行動作をファイルに保存して、実行環境へとデプロイすることで、Herokuのサーバーよりそれを実行&ドメインを自動で割り当てて、ウェブ上での公開までを行なってくれるというものです。

## 2. 登録をしよう
URL: https://signup.heroku.com/
こちらのサイトより登録をちゃちゃっと済ませてください！
会社名などは適当でも大丈夫です、、連絡が行くことなどはあり。。。ないと思います。

<img width="892" alt="Screen Shot 2018-06-03 at 10.40.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/240801/b167040b-b556-1ffa-0404-79735f55f910.png">

## 3. CLIツールのインストール
こちらのサイトよりコマンドラインからHeroku上での作業を行うことができるツールをゲットしましょう！
https://devcenter.heroku.com/articles/heroku-cli

<img width="761" alt="Screen Shot 2018-06-03 at 10.43.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/240801/d84e1014-c3f2-4130-180b-48999d4ae98b.png">

お使いの環境に合わせて取得ください！
私の場合は<font color='red'>**Mac**</font color>ですので、そちらで進めていきます。

## 4. terminalからHerokuへとログイン！
先ほど取得されたアカウントをもとに、ターミナルからHerokuアカウントへとログインをします！
<img width="270" alt="Screen Shot 2018-06-03 at 10.45.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/240801/8c764f03-e15c-6524-9373-a12a339fcfe1.png">
完了すると

```bash
Logged in as your_user_name
```
みたいな形で表示がされます！
もしエラーが出たらこちらの記事などをご参考にされてください！
https://stackoverflow.com/questions/22819415/heroku-login-fails
プロ串の使用などでエラーを回避できる旨が書かれています。

## 5. アプリケーションをローカルで動かしてみる！
はい！ここまできましたら前節で述べましたアプリケーションを実際にローカルで動かして見たいと思います！　デプロイする前のテスト環境という風に捉えてください！。。。ローカルで動かないものをデプロイしても本番環境では動かないですよね。
こちらのディレクトリ構成の説明などは次のセクションでご説明いたしますので、一旦は動くのか試しましょう！

```bash
$ git clone https://github.com/Rowing0914/Heroku_training_flask.git
$ cd Heroku_training_flask
$ python app.py
```
<img width="578" alt="Screen Shot 2018-06-03 at 10.55.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/240801/30a675a4-a7cb-39a6-89c1-5aede4cabf73.png">
きちんと、動いてますね！
では、localhost:5000を開いて見てください！
下記のようなページが観れると思います！

<img width="591" alt="Screen Shot 2018-06-03 at 11.01.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/240801/27e0e0a8-bdca-73e6-2ff9-bfca313b578d.png">

## 6. Herokuへとデプロイ
さて、ここまでこれましたら最後の詰めですね！
実際にデプロイをしてネットで公開をできるようにしましょう！
先に完成物をお見せします！
UIは変更をしていなければ基本的にこういう風に見えるはずです。
ただ一つ先ほどのローカルとの違いはドメインです、こちらはHerokuにより割り当てられたURIへとアプリケーションがデプロイされておりますので、そちらへのアクセスをしている状況となっております！
<img width="510" alt="Screen Shot 2018-06-03 at 11.19.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/240801/5a01de8f-06ce-8642-e911-991f2bbfe453.png">

では、順を追って作業を進めていきましょう！
過程として、先ほどクローンしてきたディレクトリに今もいるものとします！

```bash
├── Procfile #Herokuにアプリケーションを実行の仕方を命令するファイル
├── app.py # 実際のFlaskアプリケーション
├── requirements.txt # Pipするライブラリを記述するファイル
├── static # CSS/JSなどの入れるディレクトリ、flask指定のディレクトリ構造に従う
│   └── styles
│       └── main.css
├── templates # UI周りのファイルを格納するディレクトリ
│   ├── index.html
│   └── layout.html
```
というようなファイル構成を確認してください！

```bash
$ heroku create
```
<img width="597" alt="Screen Shot 2018-06-03 at 11.27.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/240801/ab44bc3f-cc8f-c80a-da9f-e5270a6ff6fb.png">
こちらの一行でなんとherokuが自分のアプリケーションようにドメインを割り当ててくれます。
そして、

```bash
$ git push heroku master
```
<img width="1269" alt="Screen Shot 2018-06-03 at 11.29.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/240801/5e9c7da5-9cf0-5b2c-63cf-f3bc56171760.png">
色々とHerokuサーバー上でのPython環境の構築がrequirements.txtに従ってなされていきます。

そして、ログの末尾にデプロイ完了と書いてあるのです！

```bash
$ heroku open
```
<img width="513" alt="Screen Shot 2018-06-03 at 11.32.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/240801/f2b8ad80-fa06-5d81-b783-1d3cf7d52237.png">

DONE!!
あとは好きにいじっちゃって下さい！

## 補足

- ログの確認

```bash
$ heroku log
```