Herokuにdashアプリをデプロイする

全体の流れ

• herokuアカウント取得
• heroku cliインストール
• python仮想環境構築
• プロジェクトディレクトリに必要なファイルを作成
  • app.py, Prockfile, requirements.txt, .gitignore
• heroku及びgitコマンドでデプロイ

実行環境

• windows10
• wsl2
• Ubuntu20.04
• conda 4.10.3

事前準備

• gitインストール
  • Git - Installing Git
• herokuのアカウントを取得
  • https://www.heroku.com/
• heroku cliをinstall
  • The Heroku CLI | Heroku Dev Center
  • wsl2では以下を実行

wsl

$ curl https://cli-assets.heroku.com/install.sh | sh

• heroku cliのインストール確認

wsl

$ heroku --version  
heroku/7.59.2 linux-x64 node-v12.21.0

• condaでpython仮想環境を準備

wsl

$ conda create -n heroku_test python=3.10
$ conda activate heroku_test

• heroku login

wsl

$ heroku login
heroku: Press any key to open up the browser to login or q to exit:

Dashアプリの作成

• プロジェクトディレクトリ作成

wsl

$ mkdir dash_app_example
$ cd dash_app_example

• モジュールインストール

wsl

$ pip install dash
$ pip install plotly
$ pip install gunicorn

• プロジェクトディレクトリに以下のファイルを準備
  • app.py
  • Prockfile
  • requirements.txt
  • .gitignore

app.py

app.py

import os

import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

server = app.server

app.layout = html.Div([
    html.H2('Hello World'),
    dcc.Dropdown(
        id='dropdown',
        options=[{'label': i, 'value': i} for i in ['LA', 'NYC', 'MTL']],
        value='LA'
    ),
    html.Div(id='display-value')
])

@app.callback(dash.dependencies.Output('display-value', 'children'),
                [dash.dependencies.Input('dropdown', 'value')])
def display_value(value):
    return 'You have selected "{}"'.format(value)

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

.gitignore

.gitignore

venv
*.pyc
.DS_Store
.env

Procfile

Procfile

web: gunicorn app:server

requirements.txtを作成

wsl

$ pip freeze > requirements.txt

デプロイ

wsl

$ heroku create my-dash-app # change my-dash-app to a unique name
$ git add . # add all files to git
$ git commit -m 'Initial app boilerplate'
$ git push heroku master # deploy code to heroku
$ heroku ps:scale web=1  # run the app with a 1 heroku "dyno"

成功すると
https://my-dash-app.herokuapp.com
にアプリが公開される。

コードの更新

wsl

$ git status # view the changes
$ git add .  # add all the changes
$ git commit -m 'a description of the changes'
$ git push heroku master

参考資料

• https://dash.plotly.com/deployment