Pythonとflaskで作ったWebアプリケーションをHerokuでデプロイする


# 概要
flaskの練習のため、Qiita記事を取得して表示するだけのWebアプリケーションを作りました。
以前挫折したHerokuへのデプロイに成功したのでやったことをまとめておきます。

- Qiita APIを使ってQiita記事を取得
- flaskで簡単なwebアプリケーションの作成
- Herokuで作ったやつをデプロイ

# 環境
Windows10

# 事前準備
#### ライブラリのインストール
```
$ pip install flask, requests, gunicorn, gevent
```


#### git・Herokuの登録
下の記事を参考に頑張ってください

https://www.pytry3g.com/entry/hello-heroku#Heroku-CLI%E3%81%A8Git%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

gitとHerokuCLIのインストールまでできればOKです。





# ディレクトリ構成
```
qiitaget
    ├── app.py
    ├── Procfile
    ├── requirements.txt
    └── templates
            └── index.html
```

スペルミスに注意！
qiitagetとapp.py以外はこの名前じゃないとダメです。

# ソースコード
```python:app.py
from flask import Flask, render_template, request, redirect, url_for
import requests
from urllib.parse import urlencode

app = Flask(__name__)

host = "https://qiita.com"
path = "/api/v2/items"


app = Flask(__name__)
@app.route('/')
def index():
    query = request.args.get("query")

    #全記事を入れるリストを作成
    articlelist = []

    parameters = {
        'per_page': 20,
        'query': query
    }

    r = requests.get(host + path + "?" + urlencode(parameters))
    r.raise_for_status()
    items = r.json()
    
    hoge = "検索結果: " + (query if query else "")
    
    return render_template('index.html',articlelist=items,hoge=hoge)

if __name__ == "__main__":
    app.run(debug=True)
```

今回はメモなのでコードの説明は割愛させてください(ごめんなさい)
flaskについてはhttps://qiita.com/ynakayama/items/2cc0b1d3cf1a2da612e4 でわかりやすくまとめられています。

また、Qiita API についてはhttps://qiita.com/tag1216/items/b0b90e30c7e581aa2b00 で非常にわかりやすくまとめられています。

```:Procfile
web: gunicorn -b 0.0.0.0:$PORT app:app
```
ここが問題で後にエラーを吐かれ続けられました。
いろんなサイトにあるやつを試してもダメだったけど、これでいけました。(環境の問題かなあ)
gunicornでport番号を指定しなければいけなかったぽいです。
最後のapp:appの最初のappはapp.pyのapp
0.0.0.0にバインドすると外部に公開される。217.0.0.1だとlocalhost。

```:requirements.txt
flask
gevent
gunicorn
requests
```
使用しているライブラリを書く。


```html:index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <!--解消度をディスプレイサイズに合わせる-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
        <title>Qiita記事まとめ</title>
    </head>
    <body>
        <h1 class="text-center bg-warning" >Qiita記事をスクレイピング</h1>
        <h2 class="text-center">{{hoge}} </h2>
        <form>
            <div class="text-center">
                <input name="query" >
                <input type="submit" value="検索">
            </div>
        </form>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    {% for qiita in articlelist %}
                        <div class="card mt-5">
                            <div class="card-header">
                                <h5 class="card-title">{{ qiita["title"] }}</h5>
                            </div>
                            <div class="card-body text-center">
                                <p>{{ qiita['body'][0:100] + '...'}}</p>
                            </div>
                            <div class="card-body text-center">
                                <a href="{{ qiita['url']}}" class="btn btn-info">Look Article</a>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </body>
</html>
```
デザインはbootstrapに頑張ってもらいました。

# Herokuでデプロイ
#### ログイン
```
$ heroku login -i 
```

-iはつけなくても良いらしいのですが、僕の環境ではダメだったのでつけとけばいいと思います。

次に登録したアドレスとパスワードを入力して下さい。

#### アプリケーション作成
```
$ heroku create アプリケーション名
```
アプリケーション名のところは自由に決めて大丈夫です。ただ、誰かが既に使っている名前は使えないため、被らないように設定する必要があります。僕は、“qiitaget2”みたいな名前をつけたと思います。

#### コミット
gitの基本的な使い方は他のサイトでたくさん説明されているのでそちらを参考にするのがいいと思います。

```
$ git init
```

```
$ git add .
```

```
$ git commit -m “new”
```
```
$ git remote add heroku https://git.heroku.com/アプリケーション名.git
```
```
$ git push heroku master
```
ここでエラーを吐かなければOKです。（僕はここで無限にエラーが出続けました。）

```
$ heroku logs —-tail
```

もしエラーを吐いた場合は、ログを見て頑張りましょう笑　上のコマンドでログが見れます。

```
$ heroku open
```
最後に表示されたリンクを開いてWebサイトが表示されていれば完了です。

# 最後に
今回はじめて記事を書いてみました。自分が後で見るようにメモ感覚で書いたため雑な部分があると思いますが誰かの参考になれば幸いです。

※Qiita APIは認証してない場合(今回)は、一時間に60回までしかアクセス出来ないので気をつけてください。

# 参考
https://qiita.com/ynakayama/items/2cc0b1d3cf1a2da612e4 

https://qiita.com/tag1216/items/b0b90e30c7e581aa2b00　

https://www.pytry3g.com/entry/hello-heroku#Heroku-CLI%E3%81%A8Git%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB