概要

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

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

環境

Windows10

事前準備

ライブラリのインストール

$ pip install flask, requests, gunicorn, gevent

git・Herokuの登録

下の記事を参考に頑張ってください

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

ディレクトリ構成

qiitaget
    ├── app.py
    ├── Procfile
    ├── requirements.txt
    └── templates
            └── index.html

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

ソースコード

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

使用しているライブラリを書く。

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