GSP1051

概要

Cloud Spanner は Google の水平スケーリングが可能なフルマネージド リレーショナル データベース サービスです。金融サービス、ゲーム、小売など多くの業界のお客様が、大規模な整合性と可用性が要求されるワークロードの実行に使用しています。

このラボでは、Cloud Spanner インスタンスに接続された Node.js アプリケーションをビルドしてデプロイします。この Node.js アプリケーションは、OmegaTrade という株価可視化ツールです。OmegaTrade アプリケーションは、株価を Cloud Spanner に保存し、Google Charts を使ってチャートを表示します。

バックエンド サービスは Node.js Express フレームワークを使用し、デフォルトの接続プール、セッション、タイムアウトで Cloud Spanner に接続します。

演習内容

• プロジェクト環境を構成する
• アプリケーション コードをダウンロードして内容を確認する
• バックエンド アプリケーション コンポーネントをデプロイする
• 株式取引のサンプルデータをデータベースにインポートする
• フロントエンド アプリケーション コンポーネントをデプロイする
• OmegaTrade アプリケーションでオペレーションを実行する

設定と要件

[ラボを開始] ボタンをクリックする前に

こちらの説明をお読みください。ラボには時間制限があり、一時停止することはできません。タイマーは、Google Cloud のリソースを利用できる時間を示しており、[ラボを開始] をクリックするとスタートします。

このハンズオンラボでは、シミュレーションやデモ環境ではなく実際のクラウド環境を使って、ラボのアクティビティを行います。そのため、ラボの受講中に Google Cloud にログインおよびアクセスするための、新しい一時的な認証情報が提供されます。

このラボを完了するためには、下記が必要です。

• 標準的なインターネット ブラウザ（Chrome を推奨）

注: このラボの実行には、シークレット モード（推奨）またはシークレット ブラウジング ウィンドウを使用してください。これにより、個人アカウントと受講者アカウント間の競合を防ぎ、個人アカウントに追加料金が発生しないようにすることができます。

• ラボを完了するための時間（開始後は一時停止できません）

注: このラボでは、受講者アカウントのみを使用してください。別の Google Cloud アカウントを使用すると、そのアカウントに料金が発生する可能性があります。

ラボを開始して Google Cloud コンソールにログインする方法

1. [ラボを開始] ボタンをクリックします。ラボの料金をお支払いいただく必要がある場合は、表示されるダイアログでお支払い方法を選択してください。 左側の [ラボの詳細] ペインには、以下が表示されます。

   • [Google Cloud コンソールを開く] ボタン
   • 残り時間
   • このラボで使用する必要がある一時的な認証情報
   • このラボを行うために必要なその他の情報（ある場合）

2. [Google Cloud コンソールを開く] をクリックします（Chrome ブラウザを使用している場合は、右クリックして [シークレット ウィンドウで開く] を選択します）。

   ラボでリソースがスピンアップし、別のタブで [ログイン] ページが表示されます。

   ヒント: タブをそれぞれ別のウィンドウで開き、並べて表示しておきましょう。

   注: [アカウントの選択] ダイアログが表示されたら、[別のアカウントを使用] をクリックします。

3. 必要に応じて、下のユーザー名をコピーして、[ログイン] ダイアログに貼り付けます。

   {{{user_0.username | "Username"}}}

   [ラボの詳細] ペインでもユーザー名を確認できます。

4. [次へ] をクリックします。

5. 以下のパスワードをコピーして、[ようこそ] ダイアログに貼り付けます。

   {{{user_0.password | "Password"}}}

   [ラボの詳細] ペインでもパスワードを確認できます。

6. [次へ] をクリックします。

   重要: ラボで提供された認証情報を使用する必要があります。Google Cloud アカウントの認証情報は使用しないでください。 注: このラボでご自身の Google Cloud アカウントを使用すると、追加料金が発生する場合があります。

7. その後次のように進みます。

   • 利用規約に同意してください。
   • 一時的なアカウントなので、復元オプションや 2 要素認証プロセスは設定しないでください。
   • 無料トライアルには登録しないでください。

その後、このタブで Google Cloud コンソールが開きます。

注: Google Cloud のプロダクトやサービスにアクセスするには、ナビゲーション メニューをクリックするか、[検索] フィールドにサービス名またはプロダクト名を入力します。

Cloud Shell をアクティブにする

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

1. Google Cloud コンソールの上部にある「Cloud Shell をアクティブにする」アイコン をクリックします。

2. ウィンドウで次の操作を行います。

   • Cloud Shell 情報ウィンドウで操作を進めます。
   • Cloud Shell が認証情報を使用して Google Cloud API を呼び出すことを承認します。

接続した時点で認証が完了しており、プロジェクトに各自の Project_ID、 が設定されます。出力には、このセッションの PROJECT_ID を宣言する次の行が含まれています。

Your Cloud Platform project in this session is set to {{{project_0.project_id | "PROJECT_ID"}}}

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

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

gcloud auth list

4. [承認] をクリックします。

出力:

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} To set the active account, run: $ gcloud config set account `ACCOUNT`

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

gcloud config list project

出力:

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} 注: Google Cloud における gcloud ドキュメントの全文については、gcloud CLI の概要ガイドをご覧ください。

Cloud Spanner インスタンス

このラボをより迅速に進められるように、OmegaTrade アプリケーションに必要な Cloud Spanner のインスタンス、データベース、テーブルが自動的に作成されています。

参考までに、詳細を以下に示します。

項目	名前	詳細
Cloud Spanner インスタンス	omegatrade-instance	プロジェクト レベルのインスタンスです。
Cloud Spanner データベース	omegatrade-db	インスタンス固有のデータベースです。
テーブル	Users	ユーザー アカウントが含まれます。
テーブル	Companies	会社名と銘柄コードが含まれます。
テーブル	CompanyStocks	株価が含まれます。
テーブル	Simulations	各シミュレーションの状態を追跡します。

タスク 1. 必要な Google Cloud APIs を有効にする

まず、Cloud Spanner、Container Registry、Cloud Run の Google Cloud APIs を有効にします。

1. Cloud Shell で次のコマンドを入力します。

gcloud services enable spanner.googleapis.com gcloud services enable artifactregistry.googleapis.com gcloud services enable containerregistry.googleapis.com gcloud services enable run.googleapis.com

タスク 2. アプリケーション コードをダウンロードして内容を確認する

1. このラボで使用するコード リポジトリをダウンロードします。Cloud Shell で、次のように入力します。

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

2. アプリケーション コードを含むフォルダに移動します。

cd training-data-analyst/courses/cloud-spanner/omegatrade/

3. コードは主に、バックエンドとフロントエンドの 2 つの部分に分かれています。アプリケーション アーキテクチャを以下の図に示します。

4. アプリケーションは、Cloud Spanner インスタンスと正常に通信するために、.env というデプロイ固有のファイルを使用します。このファイルは次のタスクで作成します。

5. バックエンドに関しては、バインディングおよび Cloud Spanner テーブルとのやり取りの一部が Node.js モデルによって管理されます。これらのモデルのうち、company.model.js、simulation.model.js、user.model.js の 3 つは models フォルダにあります。次のコマンドを実行して、models フォルダに移動します。

cd backend/app/models

6. 次のコマンドを実行して、company.model.js ファイルの内容を確認します。このファイルには、companies テーブルとやり取りするためのデータベース オペレーションが含まれています。

more company.model.js

Space キーを押してファイルの最後まで進みます。途中でファイルを閉じる場合は、「q」を入力して more コマンドを閉じます。

7. Node.js バックエンドのこれらのモデルやその他の構造とのフロントエンドとのやり取りの一部は、components フォルダにある Angular コンポーネントを介して行われます。次のコマンドを実行して、components フォルダに移動します。

cd ../../../frontend/src/app/components

8. たとえば、company コンポーネントには、会社情報を管理および更新するための基本アプリケーション コードが含まれています。

9. 次のコマンドを実行して、manage-company.component.ts TypeScript 構成ファイルの内容を確認します。このファイルには、会社の削除や編集などを行う方法が記載されています。

more company/manage-company/manage-company.component.ts

Space キーを押してファイルの最後まで進みます。途中でファイルを閉じる場合は、「q」を入力して more コマンドを閉じます。

タスク 3. バックエンド コンポーネントをビルドしてデプロイする

1. バックエンドのビルドとデプロイに必要なコードを含むフォルダに移動します。

cd ../../../../backend

2. .env ファイルを作成します。前述したように、このファイルにはプロジェクト固有の情報が含まれており、アプリケーションのバックエンド コンポーネントが Cloud Spanner インスタンスと通信できるようになっています。

Cloud Shell で次のコマンドを入力して nano テキスト エディタを呼び出し、新しい .env ファイルを作成します。

nano .env

以下のコードブロックを貼り付けます。

PROJECTID = {{{project_0.project_id|Project ID}}} INSTANCE = omegatrade-instance DATABASE = omegatrade-db JWT_KEY = w54p3Y?4dj%8Xqa2jjVC84narhe5Pk EXPIRE_IN = 30d

Ctrl+X キーで nano を終了したら、Y キーで更新を確認し、Enter キーを押して変更を保存します。

3. 先に進む前に、バックエンドを適切にコンパイルできるように、npm の更新されたコンポーネントをインストールする必要があります。npm は JavaScript のパッケージ マネージャーであり、JavaScript ランタイム環境 Node.js のデフォルトのパッケージ マネージャーです。

nvm install 22.6 npm install npm -g npm install --loglevel=error

4. 次に、リポジトリ フォルダにあるリファレンス Dockerfile を使用して、バックエンド アプリケーションをビルドします。

docker build -t gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1 -f dockerfile.prod . 注: ビルドプロセス中に表示される「npm notice...」というメッセージは無視してかまいません。

5. 新しいアプリケーション パッケージを push する前に、Cloud Shell で次のコマンドを実行して構成権限を設定します。

続行を確認するメッセージが表示されたら、「y」と入力します。

gcloud auth configure-docker

6. 新しく作成したアプリケーション パッケージを、Qwiklabs プロジェクトのコンテナ リポジトリに push します。

docker push gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1

7. 最後に、Cloud Run を使用してバックエンド アプリケーションをデプロイします。Cloud Run は、インフラストラクチャ管理を抽象化し、トラフィックに応じてほぼ瞬時に自動的にスケールアップまたはスケールダウンするサーバーレス デプロイ フレームワークです。

gcloud run deploy omegatrade-backend --platform managed --region {{{project_0.default_region|Default Region}}} --image gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1 --memory 512Mi --allow-unauthenticated

8. デプロイの最後に表示される URL をコピーし、メモ帳やテキスト ファイルなど、すぐにアクセスできる場所に保存します。この URL は、ユーザー インターフェースがバックエンドを介して Cloud Spanner データベースと適切に通信できるように、フロントエンド アプリケーションに提供されます。

バックエンド サービスの URL は次の形式で表示されます。

https://omegatrade-backend-zzzyyyxx1x-uw.a.run.app

タスク 4. 株式取引のサンプルデータをデータベースにインポートする

1. 以下のコマンドを現在の（メインのバックエンド）フォルダで実行して、会社と株式のサンプルデータをインポートします。

unset SPANNER_EMULATOR_HOST node seed-data.js

2. テーブルが正常に読み込まれたことを示す確認メッセージが表示されます。

Inserting Companies... done Inserting Simulations... done Inserting Stocks... done Data Loaded successfully

3. [進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。

株式取引のサンプルデータをデータベースにインポートする

タスク 5. フロントエンド コンポーネントをビルドしてデプロイする

1. フロントエンド コードが含まれるディレクトリに移動します。具体的には、environments フォルダに移動して、バックエンド コンポーネントを指すように構成ファイルを更新します。

cd ../frontend/src/environments

2. Cloud Shell で次のコマンドを入力して nano テキスト エディタを呼び出し、environment.ts ファイルを開きます。

nano environment.ts

3. http://localhost:3000 という文字列を慎重に削除し、バックエンドの URL に置き換えます。

注: URL の /api/v1/ の部分は必ず保持してください。

Ctrl+X キーで nano を終了したら、Y キーで更新を確認し、Enter キーを押して変更を保存します。

更新された environment.ts ファイルは、以下の例のようになります。

export const environment = { production: false, name: "dev", // バックエンドの URL に応じて baseUrl を変更 baseUrl:"https://omegatrade-backend-zzzyyyxx1x-uw.a.run.app/api/v1/", // clientId を OAuth コンソールに表示された実際の値に変更 clientId: "" };

4. メインのフロントエンド フォルダに移動します。

cd ../..

5. フロントエンドを適切にコンパイルできるように、npm の更新されたコンポーネントをインストールします。

npm install npm -g npm install --loglevel=error 注: インストール プロセス中に表示される「npm WARN config...」というメッセージは無視してかまいません。

6. 次に、リポジトリ フォルダにあるリファレンス Dockerfile を使用して、フロントエンド アプリケーションをビルドします。フロントエンドのビルドが完了するまでに 5～10 分かかる場合があります。

docker build -t gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1 -f dockerfile . 注: ビルドプロセス中に表示される「npm notice...」というメッセージは無視してかまいません。

7. 新しく作成したアプリケーション パッケージを、Qwiklabs プロジェクトのコンテナ リポジトリに push します。

docker push gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1

8. 最後に、Cloud Run を使用してフロントエンド アプリケーションをデプロイします。

gcloud run deploy omegatrade-frontend --platform managed --region {{{project_0.default_region|Default Region}}} --image gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1 --allow-unauthenticated

9. フロントエンド サービスの URL は次の形式で表示されます。URL を直接クリックして開くか、URL をコピーして新しいタブに貼り付けます。

https://omegatrade-frontend-zzzyyyxx1x-uw.a.run.app

タスク 6. OmegaTrade アプリケーションでオペレーションを実行する

1. アプリケーションの起動ページで、[sign up] リンクをクリックします。

2. 以下の詳細情報を使用して、Spanner1 という架空の会社の新しいアカウントを作成します。

項目	値
Business email	admin@spanner1.com
Full Name	Spanner1 Admin
Password	Spanner1
Confirm your Password	Spanner1

3. アカウントが作成され、ログインした状態になります。

4. OmegaTrade アプリケーションを調べるには、[Dashboard] に移動し、セレクタから [Foobar Inc] を選択して、Foobar Inc の株価パフォーマンス チャートを表示します。Foobar Inc の株価のシミュレーション結果が時系列で表示されるはずです。

5. [Manage Company] に移動し、Spanner1 を新しい会社として追加します。

6. ページの右側にある [Add Company] をクリックします。ポップアップ ウィンドウで、次の値を入力します。

項目	値
Company Name	Spanner1
Short Code	SPN

[Save] をクリックします。

7. [Spanner1] が会社のリストに表示されます。

8. [Dashboard] に移動し、[Spanner1] がまだ選択されていない場合は選択します。[Spanner1] のシミュレーションは存在しないことがわかります。[here] というリンクをクリックしてシミュレーションを生成します。

9. [Simulate Data] で、次の詳細を入力します。

項目	値
Select Company	Spanner1
Select Interval	5
Number of Records	50

[Simulate] をクリックします。

10. [Dashboard] に移動します。シミュレーションが進むにつれて、[Spanner1] のグラフがすぐに更新されます。シミュレーションが完了するまで 3～6 分かかります。

11. OmegaTrade アプリケーションでは、既存の会社情報を変更することもできます。[Manage Company] タブで、[Acme Corp] の [Action] の下にある鉛筆アイコンをクリックします。

12. 会社名を Coyote Inc に更新します。ショートコードはユーザー インターフェースで更新できないことに注意してください。[Update] をクリックして、変更を確定し、ダイアログを閉じます。

13. 会社名の更新は即座に反映されます。[Dashboard] に移動すると、[Acme Corp] が表示されなくなり、代わりに [Coyote Inc] が表示されているはずです。

14. アプリケーション コードでは対応できないデータ変更が必要になることがあります。権限を持つユーザーとして、Cloud Spanner データベースに直接変更を加えることで、OmegaTrade アプリケーションで使用されるデータを更新できます。

15. Cloud コンソールで、ナビゲーション メニュー（）> [すべてのプロダクトを表示] > [データベース] > [Spanner] をクリックします。

16. 表示される確認ウィンドウや情報ウィンドウで [OK] をクリックします。

17. [omegatrade-instance] の名前をクリックし、[データベース] の下にある [omegatrade-db] をクリックします。ページの下部にあるテーブルのリストから、[companies] をクリックします。

18. 左側のペインで [データ] をクリックして、テーブルの内容を表示します。

19. Bar Industries エンティティの名前を更新します。

20. Bar Industries 行のチェックボックスをオンにします。次に、テーブルの行の上に表示される選択肢から [編集] をクリックします。

21. Spanner Studio が表示されます。[+ 新しいタブ] をクリックします。次のクエリを入力して、companyName の値を Bar Industries から Consolidated Enterprises Inc に更新します。

UPDATE companies SET companyName='Consolidated Enterprises Inc' WHERE companyName='Bar Industries'; 注: Cloud Spanner のクエリ ウィンドウでは、ショートコードの値を変更できます。アプリケーション コードの設計上、ユーザー インターフェースからこの値を更新することはできません。

22. [実行] をクリックして更新を処理します。

23. アプリケーション ページに戻り、ブラウザを更新して [Dashboard] タブに移動します。[Bar Industries] が表示されなくなり、[Consolidated Enterprises Inc] が表示されるはずです。

お疲れさまでした

このラボでは、Cloud Spanner インスタンスに接続された Node.js アプリケーションをデプロイし、アプリケーションを使用してデータベースに対する基本的なオペレーションを実行しました。また、データベース内のデータを直接編集しました。

Google Cloud トレーニングと認定資格

Google Cloud トレーニングと認定資格を通して、Google Cloud 技術を最大限に活用できるようになります。必要な技術スキルとベスト プラクティスについて取り扱うクラスでは、学習を継続的に進めることができます。トレーニングは基礎レベルから上級レベルまであり、オンデマンド、ライブ、バーチャル参加など、多忙なスケジュールにも対応できるオプションが用意されています。認定資格を取得することで、Google Cloud テクノロジーに関するスキルと知識を証明できます。

マニュアルの最終更新日: 2025 年 5 月 12 日

ラボの最終テスト日: 2025 年 5 月 12 日

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