LoginSignup
7
10

More than 3 years have passed since last update.

[GCP]Cloud FunctionsでWebアプリを作成する手順(Python + Flask)

Last updated at Posted at 2020-01-21

はじめに

Flaskをさわれる人向けに、Cloud Functionsを用いた超単純なWebアプリの作成・公開・削除方法をまとめています。

手順

1. Cloud Shell起動

https://console.cloud.google.com にアクセスし、画面右上にあるプロンプトのアイコン(下図でいう左から2番目)をクリックしてください。

image.png

その後、Cloud Shellが表示されますので以下のコマンドを実行してください。

gcloud config set project <プロジェクト名>

するとプロンプトにプロジェクト名が追加されます。

username@cloudshell:~ (プロジェクト名)$

プロジェクトについて不明な方は以下をご覧ください。
https://cloud.google.com/resource-manager/docs/creating-managing-projects?hl=ja

2. ファイル構成

Cloud Shellで以下のようなファイル構成で作成します。

root/
|--main.py
|--templates/
      |--index.html

3. main.pyの作成

main.pyを作成してください。
port=80 の部分を変更しても80番ポートでしか接続できませんでした。

main.py
from flask import render_template, Flask

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def webapp(request):
    return render_template('index.html')

if __name__ == "__main__":
    app.run(debug=False, host='0.0.0.0', port=80)

4. index.htmlの作成

index.htmlを作成してください。

<html>
    <head>
    </head>
    <body>
        hello
    </body>
</html>

5. デプロイ

Cloud Shellでmain.pyと同じフォルダに移動したのち、以下のコマンドを実行してください。
deployの後ろにはmain.pyに記載した最初に呼び出したい関数名を記載してください。
今回は関数名をwebappにしたので以下のようなコマンドになります。

gcloud beta functions deploy webapp --runtime python37 --trigger-http

リージョンを指定する場合は--region=asia-northeast1をつけます。

デプロイコマンドの詳細は以下に記載されています。
https://cloud.google.com/functions/docs/deploying/filesystem?hl=ja

6. 公開したWebアプリの表示

デプロイ完了するとCloud Shellにメッセージが表示されますが、その中にhttpsTriggerという記載があります。
ここに公開されたWebアプリのURLが表示されますのでブラウザで接続してください。

httpsTrigger:
  url: https://us-central1-<プロジェクト名>.cloudfunctions.net/webapp

すると今回の場合は「hello」と表示されたページが見えます。

7. 公開したWebアプリの削除

https://console.cloud.google.com にアクセスし、[Cloud Functions]をクリックしてください。

image.png

すると先ほど公開したWebアプリが表示されますので、左側のチェックボックスにチェックを入れ、画面上部の[削除]をクリックしてください。

image.png

これで削除完了です。

7
10
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
7
10