GASのWebアプリを作成する時に GCPを使ってデバッグを簡単にする[Cloud Logging、Error Reporting]

#0-0. GASでWebアプリを作りたいけどデバッグしづらい

最近GASでdoPost関数などを利用したLineボットですとか、Webアプリケーションを作成することが良くあります。
その中でエラーが発生したとき、GoogleAppsコンソール画面[ https://script.google.com/home/executions ]では、エラーの詳細がなんかよくわかりません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/ed862725-74bc-3ac9-a976-f4120bc47ed2.png)

スクリプト中のConsole.log()の出力もできないのでスプレッドシートに出力する処理を作らなければいけなかったり、デバッグしづらいと思いました。そこで、Google Cloud Pratform（GCP）の`[Cloud Logging]`と`[ErrorReporting]`の2つを使ったらデバッグがとっても捗りました。

この記事は、この2つのサービスをGASで利用するための手順について纏めたものです。
GCP初心者の私は、意図せぬ課金が怖かったので、無料枠だけで利用するためのテクニックについても少し触れます。




#1-0. GCPのCloud Loggingを使おう

##1-1.GCPとCloud Logging概要
GCPはGoogleがクラウド上で提供するサービス群です。
色々なサービスがある中で今回は、`[Cloud Logging]`と`[ErrorReporting]`の2つを使います。


>（公式）GCPの概要
>https://cloud.google.com/docs/overview?hl=ja
>（公式）GCPスタートガイド
https://cloud.google.com/gcp/getting-started?hl=ja
>（公式）Cloud Loggingの概要
>https://cloud.google.com/logging/?hl=ja
>（公式）Error Reportingの概要
>https://cloud.google.com/error-reporting?hl=ja

##1-2.GCP無料トライアル期間と無料使用枠
GCPは従量課金制の有料サービスですが、初年1年間の無料トライアル期間（300ドルクレジット付き）と、月単位の無料枠が用意されています。ちょっとした業務効率化ツールを作る程度でしたら十分無料枠だけで利用できるかと思います。

>（公式）GCP無料枠
>https://cloud.google.com/free/docs/gcp-free-tier?hl=ja
>（公式）Cloud Loggingの料金
>https://cloud.google.com/stackdriver/pricing?hl=ja#logging-costs

##1-3. 必要なもの
- 支払いに使用するクレジット カード、デビットカード、または銀行口座
    - 無料枠だけで使う予定でも登録が必要になります。
- Googleアカウント

#2-0.GCPの設定方法
GCPをGASで利用する最小手順は下記です。
1. GCPアカウントの登録
2. GCPプロジェクトの登録
3. GCPプロジェクトのOAuthの同意画面設定
4. GASプロジェクトをGCPプロジェクトに変更



##2-1.GCPアカウントの登録
下記の記事などを参考にGCPに無料トライアル登録します。
> （いつも隣にITのお仕事）Google Cloud Platform（GCP）に無料トライアル登録をする方法
> https://tonari-it.com/google-cloud-platform-free-trial/


##2-2. GCPプロジェクトの設定
GCPのサービスを利用するには、なにをするにもプロジェクトの作成が必要です。
プロジェクトに利用するサービスを有効化しながら使います。
GCPの利用料の支払いもプロジェクト単位で請求されます。


###2-2-1.GCPプロジェクトの新規作成
GCPプロジェクトを作成していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/29683fd8-b250-4016-72c7-dcb715994904.png)
GCPコンソール画面を開きます。https://console.cloud.google.com/?hl=ja

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/9abcf808-8c56-8806-9bf7-af066d2b0103.png)
画面上部の▼をクリックします。（ひとつもプロジェクトが無い状態ですと、画像の画面と若干異なるかもしれません。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/67ae34d8-4e28-eafc-ca5e-54b0183b3ac6.png)
新しいプロジェクトをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/1d5d3116-4d93-210b-1d7d-27330ef73dee.png)
プロジェクト名を入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/9d7f117e-7545-7c7b-6745-1da15bd3fe82.png)
作成したプロジェクトがプロジェクトリストに表示されますので作成したプロジェクトをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/ae33a097-7c38-9c70-82bc-ea069e009cee.png)
新規GCPプロジェクトのトップ画面に遷移します。画像の赤枠のところにあるプロジェクト番号をコピ-します。後程必要になります。


###2-2-2. OAuthの同意画面の設定
GASと紐づけるにはOAuthの同意画面の設定を行う必要がありますので設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/22b543c8-e2bf-a9f4-deff-600887ed2cc7.png)
コンソール画面左上のAPIとサービス⇒OAuthの同意画面


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/39a92a68-ec21-d97f-91c5-9eb77535fe94.png)
OAuthの同意画面に遷移しますので、Usertypeを選択して作成をクリックします。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/70f66d47-dc0d-3116-67ca-3626a694d35a.png)
アプリケーション名を入力します。ここで入力するのはGASのスクリプトファイルのプロジェクト名となります。


###2-3-1.GASプロジェクトをGCPプロジェクトに変更

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/4c697b9a-9489-82c2-5e12-36b19ddaa8f3.png)
GASのスクリプトファイルを開きます。リソース→CloudPratformプロジェクトをクリックします。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/9fa012e7-6caf-8e31-5339-e0a83e46a18a.png)
先ほどコピーしたGCPプロジェクト番号をテキストボックスに張り付け[プロジェクトを設定]をクリックします。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/6c917489-57c3-9c39-2a60-778c6bff4fe5.png)
確認画面が表示されますので確認して閉じます。[GCP管理設定を1度行ってしまうとappsScriptの管理に戻すことはできないようです。]
別のGCPプロジェクトに管理プロジェクトを変更することはできます。



#3-0 GCPでのログの確認
ここまでGASでGCPを利用する設定が出来ました。
実際に確認してみたいと思います。

今回はGASで作ったChatwork Botで試していきます。
Chatwork Botにメッセージを送ってエラーを発生させてみました。またスクリプト中に`Console.log('hoge')`の一文を加えてログで確認できるか試します。

##3-1 Cloud Loggingの確認


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/bff8a8f9-5b43-a480-184a-f1f0e49e337d.png)
GASを開き、表示→StackdriverLoggingをクリックします。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/ea6fe7be-1ff1-c495-884d-14c3ca01c5ae.png)
図のように、いくつかログ出力結果を確認することが出来ました！Console.log()の引数に渡した"hoge"も確認出来ました！



##3-2-1 Error Reportingの確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/556461f8-095a-2e16-7626-0bb49fa1f018.png)
GASを開き、表示→StackdriverErrorReportingをクリックします。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/568115da-1536-5d96-7d5d-839a7cde7900.png)
こちらはErrorReportingの画面です。エラーが表示されます。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/8da32ff1-0bfb-c63a-10bf-00b43a77913a.png)
エラーステータスを変更できたり、発生回数を見れます。デバッグに便利です。



###3-2-2 Error Reportingの通知設定
エラー発生時にメール通知を受け取ることが出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/9785c218-adfa-c2ed-ceaf-bb7b6596a8c4.png)



#4-0.課金管理

##4-1.意図せぬ課金対策と無料枠で頑張る方法

- 予算アラートを設定しましょう
    - 予算アラートを設定すると設定した費用を超えそうな場合・超えた場合にメール通知を受け取ることが出来ます。
- 支払いレポートを確認する
    - GCPプロジェクトがどれくらいの費用になっているか支払いレポートを定期チェックしましょう。
- GCPプロジェクトを作りまくらない
    - 課金はプロジェクト単位で発生しますので、プロジェクトが増えると管理が難しくなります。不要になったプロジェクトは削除したり、一つにまとめること出来るものはまとめましょう。
- ログをエクスポートする。ログレベルを下げる
    - Cloud Loggingはログ容量で課金されていきます。増えてきたらエクスポートする、とか、出力するログレベルを下げてログ出力を抑えたりすることにより費用を抑えるテクニックがあるようです。


##4-2.予算アラートの設定
下記に設定方法が紹介されています。
> （公式）予算と予算アラートの設定
> https://cloud.google.com/billing/docs/how-to/budgets?hl=JA&visit_id=637263517369581582-2041745480&rd=1



##4-3.レポートを確認する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/6a35e694-03b8-5b37-be63-0481a0f4dfab.png)
ナビゲーションメニューから[お支払い]をクリックします。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/5a72de05-9c0d-d26f-23f9-21b5b9d65cc2.png)
②にレポートを表示する期間を選択すると③の領域にレポートが表示されます。



##4-4.GCPプロジェクトの削除
不要なプロジェクトを削除する方法です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/a79d0d8d-79f5-ce40-6001-d324a3673962.png)
GCPコンソール画面を開き、削除するプロジェクトを開きます。画面右上の縦並び「・・・」をクリックします。
その中のプロジェクトの設定をクリックします。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/69da4e9a-dc7f-2214-ac73-743063ed4c12.png)
プロジェクトの設定画面に画面遷移したら、画面上部のゴミ箱アイコンのシャットダウンをクリックします。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/f5b1d833-f6a7-3989-bcc6-934e08e3aa38.png)
プロジェクトのシャットダウン画面が開きます。画面内のテキストボックスにプロジェクト名を入力してシャットダウンをクリックします。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/5846c514-2385-a2a9-54f8-ca8bdbdbc97f.png)
プロジェクトがシャットダウンされ、削除までの猶予期間についてのメッセージが表示されますので確認して閉じます。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/477acbfc-308c-e426-8a63-63e2ec5b116d.png)
シャットダウン後にGASコンソールからGCPプロジェクトにアクセスしようとすると上図のようにアクセス禁止画面が表示されます。


## プロジェクトの復元
30日以内であれば復元が可能なようです。



#5 設定中のエラー

- プロジェクトの紐づけのときにエラーが出た。
    - OAuth同意画面の設定がうまくできていない可能性があります。
    - OAuth同意画面にて設定した「アプリケーション名」に誤りがある可能性があります。
    - GASに登録しようとしているGCPプロジェクト番号に誤りがある可能性があります。


#6 おしまい
以上です。
わたしはまだGCPの課金の仕組について正直わからない部分が多いです。
記事について誤りがあるかもしれませんのでご注意ください！