# GCP(クラウド勉強会)
INNOTECHS様向け資料

[About Takayuki](https://taka-baya-work.com/about/)

## アジェンダ

### 成果物1

日本の輸入出とサービス業の国際収支の推移を表示するページを作成する。
https://learning-gcp-403802.ue.r.appspot.com/


【成果物のクラウド設計】

### 成果物2
成果物1カスタマイズして、より可視化されたグラフなど、改良して良いものを作ってください。

## 今回使用するもの

### プログラミング言語
・Python
・HTML
・JavaScript (Chart.js)

### ツール
・Google Cloud Pratform(GCP)

---

## 事前準備

### 事前準備その１：GCPへの登録

以下リンクの記事を参考にGCPへの登録(クレジットカードの追加)をお願いします。

【日本語】
https://www.n-study.com/gcp/start-gcp/

【英語】
https://cloud.google.com/docs/get-started?hl=en

### 事前準備その２：Pythonのインストール

<span style="color:red">**Pythonをインストールするときは、バージョン3.10でインストールしてください(環境の統一&gcloud CLIがv3.10しか対応してないので)**</span>.

#### Windows
●WindowsでPython実行環境のインストール方法
1. **PythonをWindowsにインストールするには、以下の手順を実行します。**
公式ウェブサイトからインストーラをダウンロード:
【Pythonの公式ウェブサイト】
https://www.python.org/ftp/python/3.10.11/python-3.10.11-amd64.exe
にアクセスし、ダウンロードページからPythonの最新バージョンのインストーラをダウンロードします。

2. **インストーラを実行:**
ダウンロードしたインストーラをダブルクリックして実行します。

3. **パスにPythonを追加:**
インストーラの最初の画面で、「Add Python X.Y to PATH」（X.YはダウンロードしたPythonのバージョン番号）というオプションをチェックします。これにより、PythonがシステムのPATH環境変数に追加され、コマンドプロンプトから直接Pythonを実行できるようになります。

3. **インストール:**
「Install Now」をクリックして、インストールを開始します。

4. **インストールの確認:**
インストールが完了すると、「Setup was successful」または類似のメッセージが表示されます。これでPythonのインストールは完了です。

5. **Pythonの動作確認:**
コマンドプロンプトを開き、python --versionと入力して、Pythonのバージョンが正しく表示されることを確認します。

6. **（オプショナル）追加のパッケージのインストール:**
必要に応じて、Pythonのパッケージマネージャであるpipを使用して、追加のパッケージをインストールします。たとえば、pip install numpyを実行すると、NumPyという数値計算ライブラリをインストールできます。

これで、Windows上でPythonを使用する準備が整いました。

#### OS X
●MacでPythonをインストールするには、いくつかの方法がありますが、ここでは主に2つの方法を紹介します。

【インストーラーを使ったインストールの場合】
1. **公式ウェブサイトからインストーラをダウンロード:**
Pythonの公式ウェブサイト
https://www.python.org/ftp/python/3.10.11/python-3.10.11-macos11.pkg
にアクセスし、Pythonの最新バージョンのインストーラをダウンロードします。

2. **ダウンロードしたインストーラをダブルクリックして実行し、画面の指示に従ってインストールを完了させます。**

【Homebrewを使用】

1. **ターミナルを開き、以下のコマンドを実行してPythonをインストールします:**

brew install python3.10

どちらの方法でも、インストールが完了したらターミナルを開き、python3 --versionコマンドを実行してPythonのバージョンを確認することができます。これでPythonのインストールは完了し、MacでPythonを使用する準備が整いました。

また、OSXでPythonのバージョン管理を行いたい場合は、pyenvを使用することもお勧めします。pyenvは、複数のPythonバージョンを管理し、プロジェクトごとに異なるPythonバージョンを使用することを簡単にします。

### 事前準備その３：Cloud SDKのインストール
*gcloud CLI*はパソコン端末からコマンドでGCPのクラウド環境を操作するツール(コマンド)です。

基本的には以下URLを参照して頂ければ幸いです。

#### ●Windowsでのインストール方法

1. CLIインストーラーのダウンロード
[Google Cloud CLI インストーラ](https://dl.google.com/dl/cloudsdk/channels/rapid/GoogleCloudSDKInstaller.exe?hl=ja)をダウンロードします。
or
または、PowerShell ターミナルを開き、以下の PowerShell コマンドを実行します。

(New-Object Net.WebClient).DownloadFile("https://dl.google.com/dl/cloudsdk/channels/rapid/GoogleCloudSDKInstaller.exe", "$env:Temp\GoogleCloudSDKInstaller.exe")

& $env:Temp\GoogleCloudSDKInstaller.exe

2. **インストーラを起動して、画面の指示に沿って操作します。インストーラには Google LLC による署名が付いています。**
スクリーン リーダーを使用している場合は、[スクリーン リーダー モードをオンにする] チェックボックスをオンにします。このオプションで gcloud を構成すると、Unicode スピナーの代わりにステータス トラッカーが使用され、進行状況が割合で表示されます。また、テーブルがフラット化されます。詳しくは、ユーザー補助機能のガイドをご覧ください。

※*Google Cloud CLI には Python が必要です。サポートされているバージョンは Python 3（3.8～3.10）です。デフォルトでは、Google Cloud CLI の Windows バージョンには Python 3 がバンドルされています。Google Cloud CLI を使用するには、お使いのオペレーティング システムでサポートされているバージョンの Python を実行できる必要があります。*

CLIのインストールが終わったら、**gcloud CLI**を実行して、以下コマンドを実行してください。

gcloud auth login

実行すると、Googleアカウントの認証表示されるので、GCPに登録したアカウントでログインしてください。

#### ●MacOSでのインストール方法

1. **サポートされているバージョンの Python を使用していることを確認します。**
現在の Python バージョンを確認するには、 python3 -V または python -V を実行します。サポートされているバージョンは Python 3（3.8～3.10）です。
Google Cloud CLI リリース バージョン 352.0.0 以降の場合、メインのインストール スクリプトでは、Intel ベースの Mac に CPython の Python 3.10 をインストールできます。
そうでない場合は、サポートされている Python バージョンをインストールするには、Python.org の macOS 用 Python リリースにアクセスしてください。
マシンに複数の Python インタープリタがインストールされている場合は、希望するインタープリタのパスを指すようにシェル内に CLOUDSDK_PYTHON 環境変数を設定します。
Python インタープリタの選択方法と構成方法についてはgcloud topic startup をご覧ください。

2. **インストーラをダウンロードします。**

| パッケージ | サイズ | SHA256 | チェックサム |
| -------- | -------- | -------- | -------- |
|macOS 64 ビット (x86_64) | [google-cloud-cli-452.0.1-darwin-x86_64.tar.gz](https://dl.google.com/dl/cloudsdk/channels/rapid/downloads/google-cloud-cli-452.0.1-darwin-x86_64.tar.gz?hl=ja) | 123.0 MB | 2afce77c2a4c98bf6a133018b71c92bf22ef63940867f1e919c8b4d0959e13c6 |
|macOS 64 ビット (ARM64, Apple M1 silicon) | [google-cloud-cli-452.0.1-darwin-arm.tar.gz](https://dl.google.com/dl/cloudsdk/channels/rapid/downloads/google-cloud-cli-452.0.1-darwin-arm.tar.gz?hl=ja) | 120.1 MB | b57abce33c044ddd2608b2d4993d91b2148c823abb1bb4dfadb6034c1ab9343c |
| macOS 32 ビット (x86) | [google-cloud-cli-452.0.1-darwin-x86.tar.gz](https://dl.google.com/dl/cloudsdk/channels/rapid/downloads/google-cloud-cli-452.0.1-darwin-x86.tar.gz?hl=ja) | 121.7 MB | b3b35a6bc0eea9e5f7ea1c2f0407c571a63457a31c2c31d55e326fe17eb3169d |

3. **インストーラーの展開**
アーカイブをファイル システム上の任意の場所に展開します。ホーム ディレクトリを使用することをおすすめします。macOS では、ダウンロードした .tar.gz アーカイブ ファイルを任意の場所で開くことでこれを実現できます。
既存のインストールを置き換えるには、既存の google-cloud-sdk ディレクトリを削除し、同じ場所にアーカイブを展開します。

4. **インストーラの実行**
インストール スクリプトを使用して、gcloud CLI ツールを PATH に追加します。また、シェル、使用統計情報の収集ではコマンドの補完を利用し、Python 3.10 をインストールできます。
このコマンドを使用して（前の手順で展開したフォルダのルートから）スクリプトを実行します。

./google-cloud-sdk/install.sh

5. **gcloud CLI を初期化するには、gcloud init を実行します。**

CLIのインストールが終わったら、**gcloud CLI**を実行して、以下コマンドを実行してください。

gcloud auth login

実行すると、Googleアカウントの認証表示されるので、GCPに登録したアカウントでログインしてください。

**以上で事前準備終了です**、お疲れさまでした。

---

## ハンズオン課題

### a. 今回使用するプログラムのダウンロード

以下githubのlinkから今回使用するプログラム一式をダウンロードできます。

[github link](https://github.com/taka-baya/learning_gcp_appengine)

or

コマンド

git clone https://github.com/taka-baya/learning_gcp_appengine.git

●フォルダ階層

./app/
 |-main.py
 |-app.yaml
 |-templates
    |-chart.html

● ./app/main.py

import os

from flask import Flask, render_template, request
from google.cloud import bigquery

from google.cloud import bigquery
from google.oauth2 import service_account


#key_path = "..\\ssh\\credencial-key.json"
#credentials = service_account.Credentials.from_service_account_file(
#    key_path, scopes=["https://www.googleapis.com/auth/cloud-platform"],
#)
#bigquery_client = bigquery.Client(credentials=credentials, project=credentials.project_id,)

bigquery_client = bigquery.Client()
app = Flask(__name__)

# リクエストを受け付ける関数
@app.route('/', methods=['GET'])
def diplay():

    #BigQueryにクエリを投げる
    query_job = bigquery_client.query(
        """
        SELECT
            *
        FROM 
            `your-databse-name`
        ORDER BY 
            day
        """
    )

    # クエリの実行結果をデータフレームに取得する
    df = query_job.to_dataframe()
    
    #print(type(df))
    # print(df.fillna(0))
    # df = df.fillna(0)
    
    labels = df["day"]
    datas = [df["Goods_and_services"], df["Goods_total"], df["Exports"], df["Imports"], df["Services"]]
    
    return render_template('chart.html', datas=datas, labels=labels)


if __name__ == '__main__':
    #ローカル実行時はCloud Shell推奨の8080ポートを使用する
    app.run(host='0.0.0.0', port=8080)

./app/app.yaml

runtime: python310
service: default

./app/requirements.txt

db-dtypes==1.1.1
Flask==3.0.0
google-cloud-bigquery==3.13.0
pandas==2.1.2
pyarrow==13.0.0

./app/templates/chart.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>課題</title>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0"></script>
  </head>
  <body>
    <canvas id="chart"></canvas>

    <script>
    window.chartColors = {
        red: 'rgb(255, 99, 132)',
        orange: 'rgb(255, 159, 64)',
        yellow: 'rgb(255, 205, 86)',
        green: 'rgb(75, 192, 192)',
        blue: 'rgb(54, 162, 235)',
        purple: 'rgb(153, 102, 255)',
        grey: 'rgb(201, 203, 207)'
    };

    var chartDatas = {
        type: 'bar',
        data: {
            labels: [
                {% for label in labels %}
                    "{{label}}",
                {% endfor %}
            ],
            datasets: [{
                label: '輸入出とサービス事業の国際支出',
                type: 'bar',
                backgroundColor: window.chartColors.red,
                borderColor: window.chartColors.red,
                yAxisID: 'yaxis1',
                data: [
                    {% for data in datas[0] %}
                        {{data}},
                    {% endfor %}
                ],
                fill: false,
            }, {
                label: '貿易支出トータル',
                type: 'bar',
                fill: false,
                backgroundColor: window.chartColors.green,
                borderColor: window.chartColors.green,
                yAxisID: 'yaxis1',
                data: [
                    {% for data in datas[1] %}
                        {{data}},
                    {% endfor %}
                ],
            }, {
                label: '輸出',
                type: 'line',
                fill: false,
                backgroundColor: window.chartColors.orange,
                borderColor: window.chartColors.orange,
                yAxisID: 'yaxis1',
                data: [
                    {% for data in datas[2] %}
                        {{data}},
                    {% endfor %}
                ],
            }, {
                label: '輸入',
                type: 'line',
                fill: false,
                backgroundColor: window.chartColors.grey,
                borderColor: window.chartColors.grey,
                yAxisID: 'yaxis1',
                data: [
                    {% for data in datas[3] %}
                        {{data}},
                    {% endfor %}
                ],
            },  {
                label: 'サービス事業',
                type: 'line',
                fill: false,
                backgroundColor: window.chartColors.purple,
                borderColor: window.chartColors.purple,
                yAxisID: 'yaxis1',
                data: [
                    {% for data in datas[4] %}
                        {{data}},
                    {% endfor %}
                ],
            }]
        },
        options: {
            responsive: true,
            title: {
                display: true,
                text: '日本の感染状況'
            },
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            scales: {
                x: {
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: '日付'
                    }
                },
                yaxis1 : {
                    display: true,
                    position: 'left',
                    scaleLabel: {
                        display: true,
                        labelString: '￥'
                    }
                },
                yaxis2 : {
                    display: true,
                    position: 'right',
                    scaleLabel: {
                        display: true,
                        labelString: '￥'
                    }
                }
            }
        }
    };
    var mychart = document.getElementById("chart");
    var chart = new Chart(mychart, chartDatas);
    </script>
  </body>
</html>

### b. BigQueryにデータを追加

#### データのダウンロード

今回使うデータは以下リンクのページの「6s-1-4 国際収支総括表【月次】」からダウンロードできます。
https://www.mof.go.jp/policy/international_policy/reference/balance_of_payments/bpnet.htm

既に整形済みのものを用意しているので、以下URL or コマンドでダウンロードしてください。

[整形済みデータダウンロードURL](https://storage.googleapis.com/balance-of-payments/Sample_data.csv)

or

 curl -O https://storage.googleapis.com/balance-of-payments/Sample_data.csv

任意のフォルダに「Sample_data.csv」がダウンロードされていることを確認してください。

#### BigQueryにデータを追加する。

**●GUIの場合**

以下画面のように。左横のタブから「BigQuery」を選択して、「＋追加」を選択してください。


その後、「一般的なソース」の下に「ローカル ファイル」があるのでそちらを選択してください。
すると、以下画像のようにテーブルを作成する画面が出てきます。


> 項目ソース：こちらはダウンロードしたデータセットを選択してアップロードしてください・

> 送信先：対象のプロジェクトを選択、項目「データセット」はDBです。任意のDB名を入力してどこのリージョンに保存するか選択してください。項目「テーブル」はテーブルなので、任意のテーブル名を入力してください。

> スキーマ：こちらの項目はカラム名の編集です。基本的に自動でカラム名が認識されますが、自分で編集したい場合はこちらを設定してください。

**CLIの場合**

CLIの場合はgcloud CLIを使ってローカルのダウンロードしたCSVファイルからBigQueryにデータベースを作成します。以下URLのドキュメントのページ内タブ「bq」を選択して参照して構築してみてください。

https://cloud.google.com/bigquery/docs/batch-loading-data?hl=ja#bq

例）
・テーブルの作成

bq load --skip_leading_rows=1 --source_format=CSV mydataset.mytable data.csv my_schema.json

スキーマ.jsonの例

[
  {"name": "day", "type": "date", "mode": "required"},
  {"name": "Goods_and_services", "type": "integer", "mode": "required"},
  {"name": "Goods_total", "type": "integer", "mode": "required"},
  {"name": "Exports", "type": "integer", "mode": "required"},
    {"name": "Imports", "type": "integer", "mode": "required"},
  {"name": "Services", "type": "integer", "mode": "required"}
]

テーブルが作成完了したら、「BigQuery Studio」に戻り以下SQLを実行してみてください。

SELECT * FROM `learning-gcp-403802.Finance_data.balance_of_payments` LIMIT 1000

### c. クレデンシャルキーの作成

「IAMと管理」を選択して、「サービスアカウント」を選択してください。


その後、「サービスアカウント作成」を選択してクレデンシャルキーを作成します。作成するサービスアカウント名は任意に決めて頂いて問題無いです。
ただし、アクセス権限に関しては「BigQuery 管理者」としてロールを設定してください


新しくサービスアカウントを作成したらサービスアカウント一覧に、新しく作成したサービスアカウントの名前が表示されます。
それを選択すると、キーというタブが表示されると思います。

「キー」というタブが表示されたら、
> 「新しい鍵を追加」->「新しい鍵を作成」->「Json」-「作成」

を選択してください。するとJson形式のファイルがダウンロードされると思います。**しっかりとした場所に保管しておきましょう(例えば ~./.ssh/ とか)**


### d. ローカル端末での実行

※本作業では、クレデンシャルキーとBigQueryでのDB構築が終えてから取り組んでください。

**step1.** まずは、ダウンロードしたサンプルプログラムのフォルダ内のmain.pyを開いてください。
**step2.** 開いた後に以下のように10行目～のコメントアウト「#」を削除して、16行目をコメントアウト「#」してください。
**step3.** 次に、10行目の変数key_pathにダウンロードしたクレデンシャルキーのパスを記載してください。
**step4.** 次に、29行目の'your-databse-name'をBigQueryで作成したデータベース名を指定してください。

import os

from flask import Flask, render_template, request
from google.cloud import bigquery

from google.cloud import bigquery
from google.oauth2 import service_account


key_path = "..\\ssh\\credencial-key.json"
credentials = service_account.Credentials.from_service_account_file(
    key_path, scopes=["https://www.googleapis.com/auth/cloud-platform"],
)
bigquery_client = bigquery.Client(credentials=credentials, project=credentials.project_id,)

#bigquery_client = bigquery.Client()
app = Flask(__name__)

# リクエストを受け付ける関数
@app.route('/', methods=['GET'])
def diplay():

    #BigQueryにクエリを投げる
    query_job = bigquery_client.query(
        """
        SELECT
            *
        FROM 
            `your-databse-name`
        ORDER BY 
            day
        """
    )

    # クエリの実行結果をデータフレームに取得する
    df = query_job.to_dataframe()
    
    #print(type(df))
    # print(df.fillna(0))
    # df = df.fillna(0)
    
    labels = df["day"]
    datas = [df["Goods_and_services"], df["Goods_total"], df["Exports"], df["Imports"], df["Services"]]
    
    return render_template('chart.html', datas=datas, labels=labels)


if __name__ == '__main__':
    #ローカル実行時はCloud Shell推奨の8080ポートを使用する
    app.run(host='0.0.0.0', port=8080)

**step5.** 最後に、更新したmain.pyを保存して、ターミナルやコマンドなのでmain.pyがあるフォルダに対して以下コマンドを実行してください。

python main.py

**step6.** 最後に http://localhost:8080 でグラフチャートが表示されるかを確認してください。

### e. AppEngineにデプロイ

AppEngineの概要に関しては以下資料を参照してください。
https://cloud.google.com/appengine/docs/the-appengine-environments?hl=ja

それでは最後に、AppEngineでデプロイする用にプログラムを書き直します。
main.pyを開いた後に以下のように10行目～のコメントアウト「#」を追記し、16行目をコメントアウト「#」を外してください。

import os

from flask import Flask, render_template, request
from google.cloud import bigquery

from google.cloud import bigquery
from google.oauth2 import service_account


#key_path = "..\\ssh\\credencial-key.json"
#credentials = #service_account.Credentials.from_service_account_file(
#    key_path, scopes=["https://www.googleapis.com/auth/cloud-platform"],
#)
#bigquery_client = bigquery.Client(credentials=credentials, project=credentials.project_id,)

bigquery_client = bigquery.Client()
app = Flask(__name__)

# リクエストを受け付ける関数
@app.route('/', methods=['GET'])
def diplay():

    #BigQueryにクエリを投げる
    query_job = bigquery_client.query(
        """
        SELECT
            *
        FROM 
            `your-databse-name`
        ORDER BY 
            day
        """
    )

    # クエリの実行結果をデータフレームに取得する
    df = query_job.to_dataframe()
    
    #print(type(df))
    # print(df.fillna(0))
    # df = df.fillna(0)
    
    labels = df["day"]
    datas = [df["Goods_and_services"], df["Goods_total"], df["Exports"], df["Imports"], df["Services"]]
    
    return render_template('chart.html', datas=datas, labels=labels)


if __name__ == '__main__':
    #ローカル実行時はCloud Shell推奨の8080ポートを使用する
    app.run(host='0.0.0.0', port=8080)

main.pyへの修正が終わった場合は保存してください。

クラウドへのデプロイは簡単です。
app.yamlがあるフォルダに対してターミナルで移動して以下コマンドを実行するだけです。

gcloud app deploy

#### ※Python Runtime について
app.yamlについてもっと知りたい方は以下記事を参照してください。
https://cloud.google.com/appengine/docs/standard/python3/runtime?hl=ja

### f. カスタマイズ開発

課題1 : もっと見やすいグラフにしてください。
課題2 : 輸出と輸入の割合の円グラフとか作れないですかね...