コンテナを使ってFlaskアプリをGCPにデプロイし、CI/CDパイプラインの構築もする

この記事では、シンプルなFlaskアプリを使用し、DockerでコンテナライズしGoogle Cloud Platform上(Cloud Build、 Cloud Container Registry、Cloud Runを使用)にデプロイする方法をまとめています。GCPのCloud Buildを使用したCI/CDパイプラインの構築も一緒にまとめています。

###　シンプルなFlaskアプリの作成
##### 1. *app.py*を作成
```python:app.py
from flask import Flask, Response, jsonify, render_template, logging, request
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

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

##### 2. *templates*フォルダーを作り、その中に*index.html*を作成
``` html:templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>hello world!</h1>
</body>
</html>
```

##### 3. *Dockerfile*を作成
```
FROM python:3.8

ENV PORT 80
ENV HOST 0.0.0.0

EXPOSE 80

RUN apt-get update -y && \
    apt-get install -y python3-pip

COPY ./requirements.txt /app/requirements.txt

WORKDIR /app

RUN pip install -r requirements.txt

COPY . /app


ENTRYPOINT ["python", "app.py"]
```

##### 4. `pip freeze -r > requirements.txt`を走らせ、*requirements.txt*を作成
```text:requirements.txt
Flask==1.1.2
```

##### 5. `docker build . `を走らせ、Dockerイメージを作成
> ``NOTE:`` dockerコマンドを使用するためにはDockerをインストールしてください [Dockerインストール](https://docs.docker.com/get-docker/)

##### 6. ```docker images```を使い、IMAGE IDを取得する
![2021101701.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192434/7414217e-ecfc-9a82-2f17-e4fde2f8a78e.png)


### GCPとGitHubの設定
##### 7. GCP上で新しいプロジェクトを作成する
![2021101702.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192434/62a47c72-d56d-0547-5aca-abb1801ea142.png)


**Project name**を記入 > **Billing account**を選択 > **CREATE**

##### 8. Github上で新しいレポジトリの作成をする
![2021101703.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192434/e6287759-1d18-18fe-1c9b-d15cb59f84b1.png)

**Repository name**を記入 > **Create repository**

### DockerイメージをGCP(Container Registory)上にアップロード
##### 9. `docker tag <imageid> gcr.io/<gcp-project-id>/<projectname>`を走らせ、Dockerイメージにタグを追加
> ``＊``　<> 内は自分のプロジェクトに沿って変更

![2021101704.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192434/544a2bc5-b45b-de96-b6c4-4423ac6f1740.png)


`docker images`を走らせ、イメージにタグが付与されているか確認
![2021101705.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192434/ec4ec388-f94d-eea5-801d-d7873bd9dbbc.png)


##### 10. `gcloud init`を走らせ、正しいGCPプロジェクトにいるか確認
> ``NOTE:`` gcloudを使用するためにはインストールが必要です
[Cloud SDKインストール](https://cloud.google.com/sdk/docs/install)

##### 11. `gcloud auth configure-docker`を使い、Credentialを追加

##### 12. GCP上で、Container Registry APIを有効化

##### 13. `docker push gcr.io/<gcp-project-id>/<projectname>`を走らせ、DockerイメージをContainer Registry上にアップロード
![2021101706.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192434/f6a00914-bf21-f544-0402-614cea03399e.png)

**Container Registry**のページに行き、イメージがアップロードされているか確認
![2021101707.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192434/530fcb29-53ab-0eef-8835-c469e5c2b40b.png)



##### 14. GCP上でCloud Build APIを有効化

##### 15. Cloud Run上で, Create serviceページに行き以下を設定
![2021101708.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192434/23ce2b4c-7182-78b1-c314-5cbdbeff92e1.png)

![2021101709.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192434/3943b9d1-23d0-f5e3-a078-02b90cc004eb.png)

**Container image**を選択 (latestのもの) >　**Service name**を記入　> **Region**を選択 (us-west1がおすすめ) > Authenticationのセクションで, **Allow unauthenticated invocations**を選択> **Create**

##### 16. Edit & Deploy new revisionのページを選択
![2021101710.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192434/b7c1db69-bb57-efa8-442e-51297d5bbdd9.png)

**Container**タブ > **Container port**を80に変更 > Autoscalingのセクションで, **maximum**を1に変更 > **Deploy**
緑のアイコンが表示されたら, Cloud Run上にあるURLからウェブサイトにアクセス
以下のように表示されれば成功！

![2021101713.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192434/592c6a3b-838d-6534-55de-2c7116e22124.png)


### CI/CDパイプラインの構築

##### 17. *cloudbuild.yaml* を作成
(参照: https://cloud.google.com/build/docs/deploying-builds/deploy-cloud-run#building_and_deploying_a_container)
![2021101711.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192434/8ef99be8-fd77-4f57-6b52-b445dfbb8f35.png)

Cloud Runのargs部分を写真黄色枠のように変更`'--region', 'us-west1', '--platform', 'managed', '--port', '80'`
　
オプション: index.html上のタイトルを変更　（CICD設定後の変化確認のため）

##### 18. ファイルをGitHubにPUSH
> git init

> git remote add origin your-repo-url

> git  add .

> git commit -m "first commit"

> git push origin master


##### 19. Cloud Build上で, トリガーの作成
**Triggers** タブ > **Create Trigger** > **Name**を記入 > Source **Repositry**上で, 自分のGithubレポジトリを選択 > Configuration **Type**上で, **Cloud Build configuration file**を選択　> **Create**

この設定により、GithubのレポジトリにPUSHが行われるたびにこのトリガーが走ります

オプション: **RUN**をクリック > **Run Trigger** > **History**タブをチェック > 赤いアイコンがでたら, **Settings**タブ > **Cloud run admin**　と　**service accounts** を有効化　> **Triggers**に戻る > **RUN**を再び走らせる
![2021101712.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192434/425420a7-3846-0960-2685-04a1d1d4683a.png)



##### 20. 緑アイコンになれば、URL上からアクセス可能に！


##### プロジェクトコード
[https://github.com/risatoy/demo-flask-app](https://github.com/risatoy/demo-flask-app)