DashをGoogle App Engine(GAE)にデブロイする

この記事は、[Deploying Dash to Google App Engine][1] （© Jamie Phillips [クリエイティブ・コモンズ・ライセンス（表示4.0 国際）][2]）を翻訳、一部改変して書いています。  

[1]:https://www.phillipsj.net/posts/deploying-dash-to-google-app-engine
[2]:https://creativecommons.org/licenses/by/4.0/

## Deploying Dash to Google App Engine

Flaskのデブロイする記事はちょこちょこ見るのですが、Dashの日本語記事がなかったため、自分の備忘用も兼ねて訳したものを残します。

開発環境は、Ubuntu 18.04.LTSです。

### Step 1: 仮想環境の構築

```sh
$ cd ~
$ python3 -m venv .venvs/dash
```
構築後、仮想環境に入ります。

```sh
$ source .venvs/dash/bin/activate
```

### Step 2: project folderのsetup

以下の様にフォルダ・ファイル構成にします。

```:フォルダ構成
.
┗ dash-gcp
   ┣ app.yaml
   ┣ main.py
   ┗ requirements.txt※
```
※ 次のStepで作成します。

```sh:コマンド
$ mkdir dash-gcp 
$ cd dash-gcp
$ touch app.yaml
$ touch main.py
```

### Step 3: Dashをインストール&requirements.txtの作成

[公式](https://dash.plot.ly/installation)に従ってDashをインストールします。('19/5/7)

```sh
$ pip install dash==0.42.0
$ pip install dash-daq==0.1.0
```
Version 0.37.0以降は、dash-html-components等のインストール別途不要とのこと。

```sh
$ pip freeze > requirements.txt
```

元記事では、「requirements.txtに "pkg-resources==0.0.0"が含まれてて、エラーになるから削除してね！」とあったが私の環境では含まれていなかった。

### Step 4:Dash appのビルド

今回は、[公式](https://dash.plot.ly/getting-started)の以下サンプルと同じものをmain.pyに編集します。

```python
import dash
import dash_core_components as dcc
import dash_html_components as html

dash_app = dash.Dash()
app = dash_app.server

dash_app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        This is Dash running on Google App Engine.
    '''),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montreal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])

if __name__ == '__main__':
    dash_app.run_server(debug=True)
```
※ éはeに置き換えました。

保存したら、動作確認のためローカルで実行します。


```sh
$ python main.py
```
ブラウザから、http://localhost:8050/にアクセスし正しく動作しているか確認します。

### Step 5:app.yamlの編集
app.yamlを開いて、以下の様に編集します。

```
runtime: python37
```

以上で準備が整ったので、次はいよいよデブロイです。

Step 6: Publishing to Google App Engine

デブロイには[Google Cloud SDK](https://cloud.google.com/sdk/docs/)が必要なので、インストールしてない場合は、インストールします。

Let's deploy!
ロケーションとかは適当に好きなところを選んでください。

```sh
$ gcloud app deploy
You are creating an app for project [dash-gcp].
WARNING: Creating an App Engine application for a project is irreversible and the region
cannot be changed. More information about regions is at
<https://cloud.google.com/appengine/docs/locations>.

Please choose the region where you want your App Engine application located:

 [1] asia-east2    (supports standard and flexible)
 [2] asia-northeast1 (supports standard and flexible)
 [3] asia-south1   (supports standard and flexible)
 [4] australia-southeast1 (supports standard and flexible)
 [5] europe-west   (supports standard and flexible)
 [6] europe-west2  (supports standard and flexible)
 [7] europe-west3  (supports standard and flexible)
 [8] northamerica-northeast1 (supports standard and flexible)
 [9] southamerica-east1 (supports standard and flexible)
 [10] us-central    (supports standard and flexible)
 [11] us-east1      (supports standard and flexible)
 [12] us-east4      (supports standard and flexible)
 [13] us-west2      (supports standard and flexible)
 [14] cancel
Please enter your numeric choice:  11

Creating App Engine application in project [dash-gcp] and region [us-east1]....done.

Services to deploy:

descriptor:      [~/code/dash-gcp/app.yaml]
source:          [~/code/dash-gcp]
target project:  [dash-gcp]
target service:  [default]
target version:  [20190223t141951]
target url:      [https://dash-gcp.appspot.com]


Do you want to continue (Y/n)?  


Beginning deployment of service [default]...
Created .gcloudignore file. See `gcloud topic gcloudignore` for details.
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 3 files to Google Cloud Storage                ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [default]...failed.

ERROR: (gcloud.app.deploy) Error Response: [7] Access Not Configured. Cloud Build has not been used in project dash-gcp before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/cloudbuild.googleapis.com/overview?project=dash-gcp then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.
```

元記事だと、上記の様に「おや?」っとErrorが出たそうです。ただ、私の環境では、以下の様なエラーが出ました。

```sh
Updating service [default]...failed.                                                                                                                            
ERROR: (gcloud.app.deploy) Error Response: [7] Access Not Configured. Cloud Build has not been used in project denoleagc before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/cloudbuild.googleapis.com/overview?project=denoleagc then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.
```

APIが有効になってないとのことですので、記載してあるURLにアクセスして有効化しました。

その後、再度実行すると、以下の様な感じで無事実行できました。

```sh
$ gcloud app deploy
Services to deploy:

descriptor:      [~/code/dash-gcp/app.yaml]
source:          [~/code/dash-gcp]
target project:  [dash-gcp]
target service:  [default]
target version:  [20190223t142211]
target url:      [https://dash-gcp.appspot.com]


Do you want to continue (Y/n)?  Y

Beginning deployment of service [default]...
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 0 files to Google Cloud Storage                ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [default]...done.

Setting traffic split for service [default]...done.

Deployed service [default] to [https://dash-gcp.appspot.com]

You can stream logs from the command line by running:
  $ gcloud app logs tail -s default

To view your application in the web browser run:
  $ gcloud app browse
```
うまく動作していると以下のような画面が表示されます。

![Screenshot from 2019-05-07 22-43-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131167/63acf083-c0b0-eab0-220a-918e21a87750.png)

以上


最後まで読んでいただきありがとうございました。