🎈

Bokeh のサンプルコードアプリを Heroku にデプロイしてみた

2022/01/22に公開

Heroku

Python

bokeh

tech

Webブラウザのためのインタラクティブな可視化ライブラリ、Bokeh で作ったアプリを Heroku にデプロイしたのでまとめます。

Bokeh の詳しい情報は公式ドキュメントをご参照ください。
http://ja.dochub.org/bokeh/index.html

コードはこちら

アプリの中身は公式ドキュメントそのままです。

クリックすると画面にクリックした数が表示されます。

アプリはこちら。

最小限のファイル構成

下記4つのファイルが必要です。

|-- xxx.py # 実装部分
|-- Procfile # 
|-- requirements.txt # 実行するライブラリとバージョンを指定
|-- runtime.txt # Python のバージョンを指定

xxx.py

先述のとおり、Bokeh のサンプルコードをそのまま使わせていただいています。

myapp.py

from random import random

from bokeh.layouts import column
from bokeh.models import Button
from bokeh.palettes import RdYlBu3
from bokeh.plotting import figure, curdoc

# create a plot and style its properties
p = figure(x_range=(0, 100), y_range=(0, 100), toolbar_location=None)
p.border_fill_color = 'black'
p.background_fill_color = 'black'
p.outline_line_color = None
p.grid.grid_line_color = None

# add a text renderer to our plot (no data yet)
r = p.text(x=[], y=[], text=[], text_color=[], text_font_size="26px",
           text_baseline="middle", text_align="center")

i = 0

ds = r.data_source

# create a callback that will add a number in a random location
def callback():
    global i

    # BEST PRACTICE --- update .data in one step with a new dict
    new_data = dict()
    new_data['x'] = ds.data['x'] + [random()*70 + 15]
    new_data['y'] = ds.data['y'] + [random()*70 + 15]
    new_data['text_color'] = ds.data['text_color'] + [RdYlBu3[i%3]]
    new_data['text'] = ds.data['text'] + [str(i)]
    ds.data = new_data

    i = i + 1

# add a button widget and configure with the call back
button = Button(label="Press Me")
button.on_click(callback)

# put the button and plot in a layout and add to the document
curdoc().add_root(column(button, p))

なお、ローカルサーバーで実行する場合は、myapp.py ファイルのあるフォルダで下記コマンドを打ちましょう。

bokeh serve myapp.py --show

Procfile

Herokuアプリ起動時にアプリで実行するコマンドを指定するファイルです。

web: bokeh serve --port=$PORT --allow-websocket-origin=xxx.herokuapp.com --address=0.0.0.0 --use-xheaders xxx.py

xxx の部分は、適宜変更してください。

--allow-websocket-origin=xxx.herokuapp.com

Heroku で作成したファイル名に合わせる。

xxx.py

実行ファイルのファイル名に合わせる。

requirements.txt

アプリ実行時に必要なライブラリとバージョンを指定してやります。
サンプルコードは Bokeh だけで動きます。

bokeh==2.4.2

runtime.txt

python-3.8.12

Heroku へのデプロイ

以降の処理を行って Heroku へデプロイしてやります。

Heroku CLI をインストールする
Heroku CLI で Heroku にログインする。アカウントがない場合はアカウントを作成。

heroku login

実行ファイルがあるフォルダに移動する。

cd プロジェクトフォルダ

ローカルの Git リポジトリの準備をする

git init
heroku git:remote -a Heroku上のファイル名 
git add .
git commit -am "make it better"

Heroku にプッシュしてデプロイ実行

git push heroku master

以上になります、最後までお読みいただきありがとうございました。