【Python】DashをHerokuで使う

Python使って、ダッシュボードを簡単にできないかな？できれば、Herokuで公開できないかな？と調べていたら、dashなるモジュールがあることを今更ながら知った。このモジュールは、Flask、React、Plotlyからなっているらしく、Flaskを触ってからこれを見ると、納得できることが多い。「Pythonの可視化ライブラリDashを使う　1」というQiitaのページを参考にさせてもらいました。

早速、Herokuで使ってみよう！

1. Dashのインストールと利用

まずは、dashのインストール。

$ pip3 install dash
$ pip3 install plotly
$ pip3 install gunicorn

参考にしたページのコードをそのまま実行。ちゃんと動きました！感激！

2. Herokuへデプロイ

2.1 準備

こちらを参考にしました。あと、Pythonの可視化ライブラリDashで作ったグラフをherokuにあげて共有するも参考にさせていただきました。

Herokuにデプロイするときに重要な注意点があります。次の2つをコード内に記述する必要があります。

・import os
・server = app.server

import os

import dash  
import dash_core_components as dcc 
import dash_html_components as html  

app = dash.Dash(__name__)

server = app.server

app.layout = html.Div(
   children =[
    html.H1('Hello Dash',),
    dcc.Graph(
        id = "first-graph",
        figure = {
        'data': [
            {'x': [1,2,3,4],
            'y':[3,2,4,6],
            'type': 'bar',
            'name': '東京'},
            {'x':[1,2,3,4],
            'y':[2,4,3,2],
            'type': 'bar',
            'name': '大阪'}
        ],
        'layout': {
            'title': 'グラフ1　東京　対　大阪'
        }
        }
    )
])

if __name__=='__main__':
    app.run_server(debug=True)

で、gitでHerokuへデプロイします。そのためには、次の2つが必要です。

• git
• Heroku CLI

まずは、こちらのページを参考に、gitのインストール。

$ sudo apt install git-all

gitの設定をします。

$ virtualenv plot-app
$ cd plot-app
$ . bin/activate
$ git init
$ git config --global user.email email@example.com (初めてなので)

次に、HerokuCLIのインストール。

sudo snap install heroku --classic

2.2 .gitignoreファイルをつくる

venv
*.pyc
.DS_Store
.env

2.3 Procfileをつくる

web: gunicorn app:server

“app”はファイル名で、”server”は、そのファイル内の変数名です。

2.4 requirements.txtファイルをつくる

$ pip freeze > requirements.txt

でも、余計なものまで入ると後々の修正も大変なので、手動入力でも良いかも。今回は、freezeで出力した中でpkg-resources==0.0.0が余計だった。なので、それを手動で削除。

Brotli==1.0.9
click==7.1.2
dash==1.18.1
dash-core-components==1.14.1
dash-html-components==1.1.1
dash-renderer==1.8.3
dash-table==4.11.1
Flask==1.1.2
Flask-Compress==1.8.0
future==0.18.2
gunicorn==19.10.0
itsdangerous==1.1.0
Jinja2==2.11.2
MarkupSafe==1.1.1
plotly==4.14.1
retrying==1.3.3
six==1.15.0
Werkzeug==1.0.1

2.5 Herokuへデプロイ

$ heroku login
$ heroku create plot-dash-app
$ heroku git:clone -a plot-dash-app
$ git add .
$ git commit -m 'hogehoge'
$ git push heroku master

上手くいくと、以下にアクセスすることでアプリを利用できます。

https://plot-dash-app.herokuapp.com/