GCPでのFlaskのWEBアプリのデプロイ方法(初心者向け)

## はじめに

ここでは、なるべく誰でも簡単にわかるようにGCPでFlaskで作ったWEBアプリのデプロイ方法について解説していきます。

今回デプロイしたアプリはこちらになります。mediapipeを活用して、カメラからユーザーの出したじゃんけんの手を判定する技術を使って、限られた時間内でコンピュータの指示にどれだけ正確に従えるかを競うゲームとなっています。良ければ遊んでみてください。　またこのゲームの作成についても記事を書く予定です。

https://time-challenge-janken-game.an.r.appspot.com/


## 1. GCPにログインして新規プロジェクトを作成

まずは、ご自身のGCPにログインしてください。(アカウントが無ければ、作成してください）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794915/516d5946-8fdc-2868-c0c6-c1f8090afbd3.png)

左上のナビゲーションメニュー（≡）を開き、「プロジェクトの選択」→「新しいプロジェクト」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794915/b855a877-beb6-8b67-67a5-192afd38fcfc.png)

自分でプロジェクト名を決めて作成してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794915/1011f884-37cc-9b56-cb5d-e93089b4d385.png)

## App Engine APIの有効化

プロジェクトが作成されたら、検索バーで「App Engine」を検索して、「App Engine」→「App Engine APIを有効にする」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794915/92069800-0f28-229c-75a4-eded201bc66e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794915/a65cd446-a53c-d0cb-6f49-50637aebb115.png)
リージョンは一度設定すると変更できないので、選択に注意してください。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794915/591effe0-f8bf-f9b2-d138-25b5b973666f.png)


:::note info
補足：リージョン選択時の注意点
リージョンは、アプリケーションがデプロイされる物理的な場所を指します。選択したリージョンは一度設定すると変更できないため、慎重に選ぶ必要があります。ユーザーが主にどこからアクセスするかを考慮して選びます。日本を拠点にしている場合は、アジア地域（asia-northeast1）を選択すると東京になるので、迷えば東京を選択するといいでしょう。
:::

AppのEngineのダッシュボードにて、リソースのLanguageがPythonで　標準となっていることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794915/e3c7f35e-bf2d-562e-c9a5-b6da7e3ded6d.png)

Google Cloud Consoleで、左側のメニューから「IAMと管理」→「IAM」を選択し、サービスアカウントを確認します。
次に、権限の追加を行います。ご自身のサービスアカウントに対してストレージ管理者を追加します。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794915/3495cf29-fd66-423d-289a-a2209432436a.png)

以下のようにストレージ管理者が追加されれば完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794915/f33d0fd2-f76b-29bb-fdb1-f153f505accf.png)

## Flaskアプリの準備

Flaskアプリのファイルを準備します。一般的には、以下のような構造です。

```
my-flask-app/
├── app.yaml
├── app.py
├── requirements.txt
```

ここで、app.yamlには、以下のようにセットアップしましょう。
```yaml
runtime: python312

entrypoint: gunicorn -b :$PORT app:app
```

また、requirements.txtには、必要なライブラリと、gunicornを追加してください。
※バージョンは例です。　最新のものを調べてください。
```requirements.txt
Flask==3.0.3
gunicorn==23.0.0
```


## Google Cloud SDKのセットアップ

ここに関しては、以下のような記事を参考にしてみてください。

https://qiita.com/RyutoYoda/items/a9a7e5323dcd55036cb1

https://qiita.com/G-awa/items/e6904b040caa0096fba0

公式

https://cloud.google.com/sdk/docs/install?hl=ja

### Google Cloud SDKインストール後のセットアップ
SDKのインストールが完了したら、ターミナルまたはコマンドプロンプトで次のコマンドを実行し、GCPアカウントでログインします。

```bash
gcloud auth login
```

:::note info
実行時にgcloud : このシステムではスクリプトの実行が無効になっているためなどとエラーがでる場合は、以下のコマンドを実行して、実行ポリシーを一時的に変更します。
```bash
Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
```
:::




次のコマンドで作成したプロジェクトIDを使って、デフォルトプロジェクトを設定します。

```bash
gcloud config set project YOUR_PROJECT_ID
```

※YOUR_PROJECT_IDはあなたのプロジェクトIDに変えてください。


## App Engineへのデプロイ
準備が整ったので、いよいよデプロイします。

あなたのプロジェクトがあるフォルダまで、コマンドで移動して以下を実行してください。
途中で、進めるか聞かれた時は、Y　などを教えて進んでください。

```bash
gcloud app deploy
```

これで、デプロイが完了します。もし、エラーなどがでていいる場合は、以下のコマンドで、アプリケーションのログをリアルタイムで確認できます。

```bash
gcloud app logs tail -s default
```


## 終わりに
GCPを使ってFlaskアプリをデプロイするのは、初めての方にとっては少し難しく感じるかもしれません。(僕もそうでした。）しかし、この記事で説明した手順に従えば、誰でも簡単に自分の作成したWebアプリを公開することができます。GCPの豊富な[無料枠](https://cloud.google.com/free/?hl=ja)を利用しながら、さまざまなプロジェクトに挑戦してみてください。また、デプロイが成功した後は、アプリのパフォーマンスを監視したり、スケーリングの設定を調整したりすることで、より本格的なWebアプリケーション開発のスキルを身につけることができると思います。

最後に、デプロイや設定で問題が発生した場合は、GCPの公式ドキュメントやサポートを活用してみてください。また、新たな技術に挑戦しながら楽しんで学んでいきましょう。