GCE + Flask + Bokehでダッシュボードを作った話

Yukiyoshi Sato

2019年7月23日 21:03

先日、以下のダッシュボードを公開しましたので、作る際に参考にさせていただいたサイトをご紹介したいと思います。

GCEでインスタンス作成

まずはGoogle Compute Engineでインスタンスを作成しますが、ここは普通にガイドに従ってやればできるかと思いますので、まずはインスタンスをひとつ用意します。ちなみに私のインスタンスはCPUもメモリも最小構成です。

独自ドメインを取得してGCEと紐付け

私はお名前ドットコムを使いました。若干記憶が定かでは無いのですが、多分こちらの記事を参考にして作業したと思います。

FlaskをGCE上で起動する

Flask自体は特に特殊なことは何もしていないので、色々と転がっている記事をご覧いただければと思いますが、GCE上で起動してそれを外部からアクセスできるようにするにはコツが入りますので、その点はこちらの記事が参考になりました。

app.run(host="0.0.0.0",port=80)

これですね。記事にもありますが、0.0.0.0で外部公開、GCEはport=80が解放されているので、これを指定します。

Bokehで描画したチャートをFlask上で表示する

Bokehは、Pythonで描画できるInteractive Plot Libraryです。

これをFlask上で表示するには、以下のようにします。componentsというメソッドを使ってBokehで描画処理してきたオブジェクトを変換します。Bokehの描画処理に関しては、公式ドキュメントや私のマガジンなどご参考いただければと思います。

ftom bokeh.plotting import figure
from bokeh.embed import components

@crypto_controller.route("/crypto_historical_data")
def crypto_historical_data():

    p = figure()

    # Bokehの描画処理
    p.line...

    # FlaskでHTML上に表示するためにBokehのライブラリで生成されたJavaScriptとdiv要素を返す
    script, div = components(p)

    # Flaskのテンプレートに投げる
    return render_template('crypto_historical_data.html', script=script, div=div)

crypto_historical_data.htmは以下の通りです。{{ div|safe }}ってやるだけですね。Jinja2の書き方になります。

{% extends "index.html" %}

{% block body %}

<div class="content">
   <h4>BTC/JPY Historical Data</h4>
   <div>
       {{ div|safe }}
   </div>
   <h3> </h3>
</div>

{% endblock %}

index.html（抜粋）はこちら。真ん中あたりに{{ script|safe }}とあります。Flaskでrender_templateした際に投げたscriptがここに入ってきます。

<!doctype html>
<html lang="en">

<head>
 <title>Bokeh Dashboard</title>
 ...
 <!-- Bokeh -->
 <link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-1.2.0.min.css" type="text/css" />
 <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-1.2.0.min.js"></script>
 {{ script|safe }}
</head>

<body>
 ...
</body>

</html>

そうするとこんな感じのページが描画されます。

微妙にちょこちょことハマりポイントありますが、結構簡単にできちゃいます。