概要

このラボでは Cloud デバッガと Error Reporting を使用して、実行中のアプリケーションのエラーを診断、修正します。

目標

このラボでは、次のタスクの実行方法について学びます。

• Cloud Source Repositories のリポジトリを作成してアプリケーション コードを push する。

• Cloud デバッガをインストールして構成する。

• デバッグ スナップショットとログポイントを使って、アプリケーションの変数をキャプチャして表示する。

• Cloud Error Reporting をインストールして構成する。

• Cloud Error Reporting を利用してアプリケーション エラーを特定する。

設定と要件

各ラボでは、新しい Google Cloud プロジェクトとリソースセットを一定時間無料で利用できます。

1. Qwiklabs にシークレット ウィンドウでログインします。

2. ラボのアクセス時間（例: 1:15:00）に注意し、時間内に完了できるようにしてください。
   一時停止機能はありません。必要な場合はやり直せますが、最初からになります。

3. 準備ができたら、[ラボを開始] をクリックします。

4. ラボの認証情報（ユーザー名とパスワード）をメモしておきます。この情報は、Google Cloud Console にログインする際に使用します。

5. [Google Console を開く] をクリックします。

6. [別のアカウントを使用] をクリックし、このラボの認証情報をコピーしてプロンプトに貼り付けます。
   他の認証情報を使用すると、エラーが発生したり、料金の請求が発生したりします。

7. 利用規約に同意し、再設定用のリソースページをスキップします。

Google Cloud Shell の有効化

Google Cloud Shell は、デベロッパー ツールと一緒に読み込まれる仮想マシンです。5 GB の永続ホーム ディレクトリが用意されており、Google Cloud で稼働します。 Google Cloud Shell は、GCP リソースへのコマンドライン アクセスを提供します。

1. GCP Console の右上のツールバーにある、「Cloud Shell をアクティブにする」ボタンをクリックします。

   

2. Continue をクリックします。

   

環境がプロビジョニングされ、接続されるまでしばらく待ちます。接続した時点で認証が完了しており、プロジェクトに各自のプロジェクト ID が設定されます。以下に例を示します。

gcloud は Google Cloud Platform のコマンドライン ツールです。このツールは、Cloud Shell にプリインストールされており、タブ補完がサポートされています。

次のコマンドを使用すると、有効なアカウント名を一覧表示できます。

gcloud auth list

出力:

Credentialed accounts:
 - <アカウント名>@<ドメイン名>.com（有効）

出力例:

Credentialed accounts:
 - google1623327_student@qwiklabs.net

次のコマンドを使用すると、プロジェクト ID を一覧表示できます。

gcloud config list project

出力:

[core]
project = <プロジェクト ID>

出力例:

[core]
project = qwiklabs-gcp-44776a13dea667a6

ケーススタディ用アプリケーションの準備

このセクションでは、Cloud Shell にアクセスしてクイズ アプリケーションを含む Git リポジトリのクローンを作成してから、環境変数を構成してアプリケーションを実行します。

Cloud Shell でソースコードのクローンを作成する

1. 次のコマンドを実行して、クラスのリポジトリのクローンを作成します。

git clone --depth=1 https://github.com/GoogleCloudPlatform/training-data-analyst

2. 作業ディレクトリへのショートカットとしてソフトリンクを作成します。

ln -s ~/training-data-analyst/courses/developingapps/v1.3/nodejs/stackdriver-debug-errorreporting ~/stackdriver-debug-errorreporting

ケーススタディ用アプリケーションを構成、実行する

1. このラボのサンプル ファイルが含まれているディレクトリに移動します。

cd ~/stackdriver-debug-errorreporting/start

2. 次のコマンドを実行して、クイズ アプリケーションを構成します。

. prepare_incomplete_environment.sh

Cloud Source Repositories のリポジトリを作成する

このセクションでは、Cloud Source Repository のリポジトリを作成し、現在のラボのクイズ アプリケーションのコードをそのリポジトリに push します。

Cloud Source Repositories のリポジトリを作成する

1. Cloud Platform Console のナビゲーション メニューで、[Source Repositories] をクリックします。
2. 右上にある [リポジトリを追加] をクリックします。
3. [新しいリポジトリを作成] を選択し、[続行] をクリックします。
4. リポジトリに「default」という名前を付けます。[プロジェクト] では、名前に GCP プロジェクト ID が付いているプロジェクトをプルダウン メニューから選択します。
5. [作成] をクリックします。

[リポジトリにコードを追加] ダイアログが開きます。

リポジトリのクローンを作成する

1. Cloud Shell ウィンドウに戻ります。

2. 次のコマンドを実行して、作業ディレクトリをホームフォルダに戻します。

cd ~

3. 次のコマンドを実行して、Cloud Source Repositories の default リポジトリのクローンを作成します。

gcloud source repos clone default

4. 次のコマンドを実行して、クイズ アプリケーションのファイルをラボのフォルダからこのリポジトリにコピーします。

cp -r ~/stackdriver-debug-errorreporting/start/quiz-app/* ~/default

5. 作業ディレクトリを default ディレクトリに変更します。

cd ~/default

6. default フォルダに .gitignore ファイルを作成して、以降の git コマンドに node_modules フォルダが含まれないようにします。

echo node_modules > .gitignore

7. 次の git コマンドを入力して、commit するファイルを add します。

git add .

8. 次のコマンドを入力して、自分のメールアドレスと名前で git を構成します。

git config --global user.email "student@example.com" git config --global user.name "A Student"

9. 次の git コマンドを入力して、"Quiz application initial check-in" というメッセージを付けて変更を commit します。

git commit -m "Quiz application initial check-in"

10. 次の git コマンドを入力して、変更を default リポジトリに push します。

git push

11. Source Repository のウィンドウに戻り、ブラウザタブを更新します。

Cloud デバッガの使用

このセクションでは、クイズ アプリケーションで Cloud デバッガを作成して起動するためのコードを記述し、Cloud Platform Console でデバッグ スナップショットとログポイントを設定します。

Cloud デバッガを設定するためのコードを記述する

1. Cloud デバッガ用に Node.js エージェントをインストールするには、Cloud Shell で次のコマンドを実行します。

cd ~/default npm install --save @google-cloud/debug-agent

2. [エディタを開く] をクリックします。

エラーが「サードパーティの Cookie が無効になっているためコードエディタを読み込めなかった」という内容である場合は、[新しいウィンドウで開く] をクリックし、新しいタブに切り替えます。

3. default/app.js ファイルで、'@google-cloud/debug-agent' モジュールをインポートして起動します。詳細については、https://cloud.google.com/debugger/docs/setup/nodejs をご覧ください。

default/app.js

// TODO: Add the following statement to import and start // Stackdriver debug-agent // The start(...) method takes an 'options' object that you // can use to configure the Cloud Debugger agent. // You will need to pass through an object with an // allowExpressions Boolean property set to true. require('@google-cloud/debug-agent').start({ allowExpressions: true }); // END TODO

4. ファイルを保存します。

Cloud Source Repositories のリポジトリを更新してソース コンテキストを生成する

1. Cloud Shell ウィンドウに戻ります。

Cloud Shell が表示されない場合、[ターミナルを開く] をクリックします。

2. 次のコマンドを実行して、Cloud Source Repositories の default リポジトリに対する変更を add、commit、push します。

cd ~/default git add . git commit -m "Added Cloud Debug Agent" git push

3. 次のコマンドを実行して、ソース コンテキスト ファイルを生成します。

gcloud debug source gen-repo-info-file --output-directory .

スナップショットを使ってウェブ アプリケーションをデバッグする

1. 次のコマンドを実行して、クイズ アプリケーションの依存関係をインストールし、アプリケーションを開始します。

npm install npm start

2. App listening on port 8080 と表示されてアプリケーションがポート 8080 でリッスンするようになったら、[ウェブでプレビュー] アイコン > [ポート 8080 でプレビュー] をクリックしてクイズ アプリケーションをプレビューします。
3. Cloud Platform Console に戻ります。
4. ナビゲーション メニューで、[デバッガ] をクリックします。

5. ソースコード ナビゲータを使用して web-app/questions.js ファイルを選択します。
6. 質問が追加される POST ハンドラ（router.post('/add..)）を見つけて、let data = req.body の直後の空のステートメントの左側にある行番号をクリックします。[スナップショットを作成] をクリックします。

7. クイズ アプリケーションに戻り、[Create Question] をクリックします。
8. フォームに次の値を入力して、[Save] をクリックします。

フォームの項目	値
Author	[自分の名前]
Quiz	Google Cloud Platform
Title	Google Cloud プロダクトはどれですか。
Answer 1	Debug
Answer 2	Error Reporting
Answer 3	Logging
Answer 4	All of the above（[Answer 4] を正解として選択します）

9. Cloud Platform Console の デバッガ のウィンドウに戻ります。

10. data 変数を展開します。

ログポイントを使ってウェブ アプリケーションをデバッグする

1. questions.js を開いたまま、[デバッグ] ウィンドウの右側のパネルにある [ログポイント] タブをクリックします。
2. スナップショットの挿入に使用したのと同じソースコード行をクリックし、[ログポイントを作成] をクリックします。

3. ログポイントのインタラクティブ エディタで、次のログ ステートメントを記述して [追加] をクリックします。

if (true) logpoint("Quiz = {data.quiz}")

このログ ステートメントは、quiz フォームの項目の値を出力します。

4. クイズ アプリケーションに戻り、[Create Question] をクリックします。
5. フォームに次の値を入力して、[Save] をクリックします。

フォームの項目	値
Author	[自分の名前]
Quiz	Google Cloud Platform
Title	スナップショットとログポイントを含む Google Cloud プロダクトはどれですか。
Answer 1	Debugger（[Answer 1] を正解として選択します）
Answer 2	Error Reporting
Answer 3	Logging
Answer 4	All of the above

6. Cloud Shell ウィンドウに戻ります。

Cloud Error Reporting の使用

このセクションでは、クイズ アプリケーションに Cloud Error Reporting を統合するためのコードを記述し、このウェブ アプリケーションからのエラーと Cloud Functions からのエラーを確認します。

Cloud Error Reporting を設定するためのコードを記述する

1. Cloud Shell で、Ctrl+C キーを押してウェブ アプリケーションを停止します。

2. 次のコマンドを実行し、Cloud Error Reporting 用の Node.js ライブラリをインストールします。

cd ~/default npm install --save @google-cloud/error-reporting

3. Cloud Shell コードエディタで、default/app.js に移動します。

4. app.js ファイルで、'@google-cloud/error-reporting' モジュールを読み込みます。

5. Cloud Error Reporting クライアントを作成します。

default/app.js

// TODO: Load the error-reporting module const {ErrorReporting} = require( '@google-cloud/error-reporting'); // END TODO const path = require('path'); const express = require('express'); const config = require('./config'); const app = express(); // TODO: Create the errorReporting client object const errorReporting = new ErrorReporting(); // END TODO

6. Express で Cloud Error Reporting を使用するようにアプリケーションを構成します。

default/app.js

// TODO: Use Stackdriver Error Reporting // middleware for Express app.use(errorReporting.express); // END TODO

7. ファイルを保存します。

Cloud Source Repositories のリポジトリを更新して新しいソース コンテキストを生成する

1. Cloud Shell ウィンドウに戻り、以下のコマンドを実行して、デフォルトのクラウド ソース リポジトリに変更を追加、コミット、およびプッシュします。

cd ~/default git add . git commit -m "Added Cloud Error Reporting" git push

2. 次のコマンドを実行して、ソース コンテキスト ファイルを生成します。

gcloud debug source gen-repo-info-file --output-directory .

Error Reporting を使用してウェブ アプリケーションのエラーを表示する

1. デフォルトでは、アプリケーションが本番環境にないと Cloud Error Reporting がアクティブにならないため、値を production に設定した環境変数 NODE_ENV をエクスポートします。

export NODE_ENV=production

2. 次のコマンドを実行して、アプリケーションを開始します。

npm start

3. ウェブ アプリケーションをプレビューします。
4. Cloud Platform Console に戻ります。
5. ナビゲーション メニューで [Error Reporting] をクリックします。

6. クイズ アプリケーションに戻り、[Take Test] をクリックします。
7. [Places] をクリックします。
8. 質問に答えて評価とフィードバックを入力し、[Send Feedback] をクリックします。

9. Cloud Platform Console に戻ります。
10. ナビゲーション メニューで [Error Reporting] をクリックします。
11. [自動再読み込み] をクリックします。

Error Reporting を使用して Cloud ファンクションのエラーを表示する

1. Cloud Shell に戻り、Ctrl+C キーを押してウェブ アプリケーションを停止します。

2. 次のコマンドを実行して、不足している Pub/Sub トピックを作成します。

gcloud pubsub topics create feedback

3. 次のコマンドを実行して、feedback トピックをサブスクライブし、Cloud Spanner にレコードを挿入する Cloud Functions の関数を作成します。

cd ~/stackdriver-debug-errorreporting/start/ gcloud functions deploy process-feedback --runtime nodejs14 \ --trigger-topic feedback --source ./function \ --stage-bucket $GCLOUD_BUCKET --entry-point subscribe cd ~/default

4. 次のコマンドを実行して、ウェブ アプリケーションを開始します。

npm start

5. ウェブ アプリケーションをプレビューします。
6. クイズ アプリケーションに戻り、[Take Test] をクリックします。
7. [Places] をクリックします。
8. 質問に答えて評価とフィードバックを入力し、[Send Feedback] をクリックします。

9. Cloud Platform Console に戻ります。
10. ナビゲーション メニューで [Error Reporting] をクリックします。

11. 「Error: ERROR processing feedback:」というリンクをクリックします。

12. ウィンドウの [最近のサンプル] セクションで、この Cloud Functions エラーの [ログを表示] をクリックします。

13. データベースと Feedback テーブルを作成するには、Cloud Shell に戻り、ウェブ アプリケーションを停止してから次のコマンドを実行します。

gcloud spanner databases create quiz-database --instance quiz-instance --ddl "CREATE TABLE Feedback ( feedbackId STRING(100) NOT NULL, email STRING(100), quiz STRING(20), feedback STRING(MAX), rating INT64, score FLOAT64, timestamp INT64 ) PRIMARY KEY (feedbackId);"

参考: クイズ アプリケーションのロジックエラーを見つける

このセクションでは、クイズ アプリケーションでエラーを見つけて、Cloud デバッガを使用して原因を特定します。

クイズ アプリケーションのエラーを再現する

1. ウェブ アプリケーションを開始します。
2. クイズ アプリケーションのホームページに移動して、[Take Test] をクリックします。
3. [Places] をクリックします。
4. 正しい答えを選択します。
5. [GCP] をクリックし、もう一度 [Places] をクリックします。
6. 間違った答えを選択します。
7. スコアを確認します。

ラボを終了する

ラボが完了したら、[ラボを終了] をクリックします。ラボで使用したリソースが Google Cloud Skills Boost から削除され、アカウントの情報も消去されます。

ラボの評価を求めるダイアログが表示されたら、星の数を選択してコメントを入力し、[送信] をクリックします。

星の数は、それぞれ次の評価を表します。

• 星 1 つ = 非常に不満
• 星 2 つ = 不満
• 星 3 つ = どちらともいえない
• 星 4 つ = 満足
• 星 5 つ = 非常に満足

フィードバックを送信しない場合は、ダイアログ ボックスを閉じてください。

フィードバックやご提案の送信、修正が必要な箇所をご報告いただく際は、[サポート] タブをご利用ください。

Copyright 2020 Google LLC All rights reserved. Google および Google のロゴは Google LLC の商標です。その他すべての企業名および商品名はそれぞれ各社の商標または登録商標です。