App Engine 用の基本的なウェブサービスの作成

Flask を使用して、静的 HTML ファイルを提供するウェブサービスを作成し、ローカルでテストします。次に、App Engine にウェブサービスをデプロイするために必要な構成ファイルを作成します。

このステップでは、プレースホルダ データを表示できるバージョンのウェブサービスを作成し、ローカルでテストします。Cloud Datastore と Firebase Authentication を追加する前に、基本的なウェブサービスが動作していることを確認することが目標になります。

始める前に

  1. GCP プロジェクトをまだ作成していなければ、GCP プロジェクトを作成します。

  2. Python 3 開発用のローカル環境をまだ設定していなければ、次の手順で設定します。

    • ウェブサービスの開発と Cloud SDK の実行用に、Python 2 および 3 をダウンロードしてインストールします。

    • 次のコマンドを実行して、ローカルテスト用に virtualenv をインストールします。

      Mac OS / Linux

      sudo pip install virtualenv

      Windows

      pip install virtualenv

    • GCP ユーザー認証情報を使用して Cloud SDK への認証を行い、Cloud Datastore でローカルテストを実行できるようにします。

      gcloud auth application-default login
      

      ヒント: さらに広範なテストを行う場合は、エンドユーザー認証情報を使用せず、サービス アカウントを設定することをおすすめします。サービス アカウントやその他の種類の認証について詳しくは、認証の概要をご覧ください。

ウェブサービス ファイルの構造化

ウェブサービスを作成するプロジェクト ディレクトリは、次のようなファイル構造になります。

  • building-an-app/
    • app.yaml
    • main.py
    • requirements.txt
    • static/
      • script.js
      • style.css
    • templates/
      • index.html

ヒント: これらのファイルのコピーはこちらでダウンロードできます。

ウェブサービスの作成

ウェブサービスの初期の工程では、Flask を使用して Jinja ベースの HTML テンプレートを提供します。

ウェブサービスを設定するには:

  1. templates/index.html ファイルを作成します。

    <!doctype html>
    <html>
    <head>
      <title>Datastore and Firebase Auth Example</title>
      <script src="{{ url_for('static', filename='script.js') }}"></script>
      <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    </head>
    <body>
    
      <h1>Datastore and Firebase Auth Example</h1>
    
      <h2>Last 10 visits</h2>
      {% for time in times %}
        <p>{{ time }}</p>
      {% endfor %}
    
    </body>
    </html>
    
  2. static/script.js および static/style.css ファイルを使用して動作とスタイルを追加します。

    'use strict';
    
    window.addEventListener('load', function () {
    
      console.log("Hello World!");
    
    });
    body {
      font-family: "helvetica", sans-serif;
      text-align: center;
    }
    
  3. main.py ファイルで Flask を使用して、プレースホルダ データで HTML テンプレートをレンダリングします。

    import datetime
    
    from flask import Flask, render_template
    
    app = Flask(__name__)
    
    @app.route('/')
    def root():
        # For the sake of example, use static information to inflate the template.
        # This will be replaced with real information in later steps.
        dummy_times = [datetime.datetime(2018, 1, 1, 10, 0, 0),
                       datetime.datetime(2018, 1, 2, 10, 30, 0),
                       datetime.datetime(2018, 1, 3, 11, 0, 0),
                       ]
    
        return render_template('index.html', times=dummy_times)
    
    if __name__ == '__main__':
        # This is used when running locally only. When deploying to Google App
        # Engine, a webserver process such as Gunicorn will serve the app. This
        # can be configured by adding an `entrypoint` to app.yaml.
        # Flask's development server will automatically serve static files in
        # the "static" directory. See:
        # http://flask.pocoo.org/docs/1.0/quickstart/#static-files. Once deployed,
        # App Engine itself will serve those files as configured in app.yaml.
        app.run(host='127.0.0.1', port=8080, debug=True)
    
  4. requirements.txt ファイルで、ウェブサービスに必要なすべての依存関係を構成します。

    Flask==1.0.2
    

ウェブサービスをテストする

ウェブサービスをローカルで実行して(依存関係は virtualenv で処理)、テストを行うことができます。

Mac OS / Linux

  1. プロジェクトの外部のディレクトリに隔離された Python 環境を作成し、それを有効化します。
    virtualenv env
    source env/bin/activate
  2. プロジェクト ディレクトリに移動し、依存関係をインストールします。
    cd YOUR_PROJECT
    pip install  -r requirements.txt
  3. アプリケーションを実行します。
    python main.py
  4. ウェブブラウザに次のアドレスを入力します。
    http://localhost:8080

Windows

PowerShell を使用して Python パッケージを実行します。

  1. インストールされた PowerShell を探します。
  2. PowerShell へのショートカットを右クリックし、管理者として PowerShell を起動します。
  3. プロジェクトの外部のディレクトリに隔離された Python 環境を作成し、それを有効化します。
    virtualenv env
    env\Scripts\activate
  4. プロジェクト ディレクトリに移動し、依存関係をインストールします。
    cd YOUR_PROJECT
    pip install -r requirements.txt
  5. アプリケーションを実行します。
    python main.py
  6. ウェブブラウザに次のアドレスを入力します。
    http://localhost:8080

App Engine 用のウェブサービスの構成

ウェブサービスを App Engine にデプロイするには、app.yaml ファイルが必要です。この構成ファイルでは、App Engine 用のウェブサービスの設定を定義します。

ウェブサービスを構成して App Engine にデプロイするには、次のようにプロジェクトのルート ディレクトリで app.yaml ファイルを作成します。例: building-an-app

runtime: python37

handlers:
  # This configures Google App Engine to serve the files in the app's static
  # directory.
- url: /static
  static_dir: static

  # This handler routes all requests not caught above to your main app. It is
  # required when static routes are defined, but can be omitted (along with
  # the entire handlers section) when there are no static files defined.
- url: /.*
  script: auto

このシンプルなウェブサービスでは、app.yaml ファイルで定義する必要があるのはランタイム設定と静的ファイルのハンドラだけです。

さらに複雑なウェブサービスの場合は、スケーリング、追加のハンドラ、環境変数やサービス名などのアプリケーション要素などの追加設定を app.yaml で構成します。詳細について、またサポートされているすべての要素の一覧については、app.yaml リファレンスをご覧ください。

次のステップ

ウェブサービスの構成、作成、テストが完了したので、次にこのバージョンのウェブサービスを App Engine にデプロイします。

このページは役立ちましたか?評価をお願いいたします。

フィードバックを送信...

Python 3 の App Engine スタンダード環境