9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

Deploying Dash to Google App Engine

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

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

Step 1: 仮想環境の構築

$ cd ~
$ python3 -m venv .venvs/dash

構築後、仮想環境に入ります。

$ source .venvs/dash/bin/activate

Step 2: project folderのsetup

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

フォルダ構成
.
┗ dash-gcp
   ┣ app.yaml
   ┣ main.py
   ┗ requirements.txt※

※ 次のStepで作成します。

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

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

公式に従ってDashをインストールします。('19/5/7)

$ pip install dash==0.42.0
$ pip install dash-daq==0.1.0

Version 0.37.0以降は、dash-html-components等のインストール別途不要とのこと。

$ pip freeze > requirements.txt

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

Step 4:Dash appのビルド

今回は、公式の以下サンプルと同じものをmain.pyに編集します。

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に置き換えました。

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

$ python main.py

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

Step 5:app.yamlの編集

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

runtime: python37

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

Step 6: Publishing to Google App Engine

デブロイにはGoogle Cloud SDKが必要なので、インストールしてない場合は、インストールします。

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

$ 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が出たそうです。ただ、私の環境では、以下の様なエラーが出ました。

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にアクセスして有効化しました。

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

$ 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

以上

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

9
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?