GSP1051

總覽

Cloud Spanner 是 Google 全代管、可水平擴充的關聯式資料庫服務。金融服務、遊戲、零售業和許多其他產業的客戶，都將最嚴苛的工作負載託付給這項服務，確保大規模作業的一致性和可用性。

在本實驗室中，您將建構並部署連至 Cloud Spanner 執行個體的 Node.js 應用程式。Node.js 應用程式是名為 OmegaTrade 的股價圖表工具，會將股價儲存在 Cloud Spanner，並透過 Google Charts 呈現圖表。

後端服務使用 Node.js Express 架構，並透過預設連線集區、工作階段和逾時功能連線至 Cloud Spanner。

學習內容

• 設定專案環境
• 下載並檢查應用程式程式碼
• 部署後端應用程式元件
• 將股票交易範例資料匯入資料庫
• 部署前端應用程式元件
• 在 OmegaTrade 應用程式中執行操作

設定和需求

瞭解以下事項後，再點選「Start Lab」按鈕

請詳閱以下操作說明。實驗室活動會計時，且中途無法暫停。點選「Start Lab」後就會開始計時，顯示可使用 Google Cloud 資源的時間。

您將在真正的雲端環境完成實作實驗室活動，而不是模擬或示範環境。為此，我們會提供新的暫時憑證，供您在實驗室活動期間登入及存取 Google Cloud。

為了順利完成這個實驗室，請先確認：

• 可以使用標準的網際網路瀏覽器 (Chrome 瀏覽器為佳)。

注意事項：請使用無痕模式 (建議選項) 或私密瀏覽視窗執行此實驗室，這可以防止個人帳戶和學員帳戶之間的衝突，避免個人帳戶產生額外費用。

• 是時候完成實驗室活動了！別忘了，活動一旦開始將無法暫停。

注意事項：務必使用實驗室專用的學員帳戶。如果使用其他 Google Cloud 帳戶，可能會產生額外費用。

如何開始研究室及登入 Google Cloud 控制台

1. 點選「Start Lab」按鈕。如果實驗室會產生費用，畫面上會出現選擇付款方式的對話方塊。左側的「Lab Details」窗格會顯示下列項目：

   • 「Open Google Cloud console」按鈕
   • 剩餘時間
   • 必須在這個研究室中使用的臨時憑證
   • 完成這個實驗室所需的其他資訊 (如有)

2. 點選「Open Google Cloud console」；如果使用 Chrome 瀏覽器，也能按一下滑鼠右鍵，選取「在無痕視窗中開啟連結」。

   接著，實驗室會啟動相關資源，並開啟另一個分頁，顯示「登入」頁面。

   提示：您可以在不同的視窗中並排開啟分頁。

   注意：如果頁面中顯示「選擇帳戶」對話方塊，請點選「使用其他帳戶」。

3. 如有必要，請將下方的 Username 貼到「登入」對話方塊。

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

   您也可以在「Lab Details」窗格找到 Username。

4. 點選「下一步」。

5. 複製下方的 Password，並貼到「歡迎使用」對話方塊。

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

   您也可以在「Lab Details」窗格找到 Password。

6. 點選「下一步」。

   重要事項：請務必使用實驗室提供的憑證，而非自己的 Google Cloud 帳戶憑證。 注意：如果使用自己的 Google Cloud 帳戶來進行這個實驗室，可能會產生額外費用。

7. 按過後續的所有頁面：

   • 接受條款及細則。
   • 由於這是臨時帳戶，請勿新增救援選項或雙重驗證機制。
   • 請勿申請免費試用。

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，並支援 Tab 鍵自動完成功能。

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"}}} 注意：如需 gcloud 的完整說明，請前往 Google Cloud 參閱 gcloud CLI 總覽指南。

Cloud Spanner 執行個體

為了方便您更快完成本實驗室，系統已自動為您建立 OmegaTrade 應用程式所需的 Cloud Spanner 執行個體、資料庫和資料表。

以下列出詳細資料供您參考：

項目	名稱	詳細資料
Cloud Spanner 執行個體	omegatrade-instance	這是專案層級執行個體
Cloud Spanner 資料庫	omegatrade-db	這是執行個體專屬資料庫
資料表	Users	包含使用者帳戶
資料表	Companies	包含公司名稱和股票代號
資料表	CompanyStocks	包含股價
資料表	Simulations	追蹤各項模擬作業的狀態

工作 1：啟用必要的 Google Cloud API

首先，請啟用 Cloud Spanner、Container Registry 和 Cloud Run 的 Google Cloud API。

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. 程式碼主要分為後端和前端兩部分。應用程式架構如下圖所示：

4. 應用程式需使用名為 .env 的部署專屬檔案，才能與 Cloud Spanner 執行個體順利通訊。您將在下一個工作建立這個檔案。

5. 就後端而言，Cloud Spanner 資料表的繫結和互動會由 Node.js 模型管理，其中三個模型 company.model.js、simulation.model.js 和 user.model.js 位於 models 資料夾。執行下列指令，前往 models 資料夾：

cd backend/app/models

6. 執行下列指令來檢視 company.model.js 檔案。這個檔案包含與 companies 資料表互動的資料庫作業。

more company.model.js

按空格鍵即可逐頁瀏覽檔案，直到最後一頁。如要提前關閉檔案，請輸入 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

按空格鍵即可逐頁瀏覽檔案，直到最後一頁。如要提前關閉檔案，請輸入 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 > Y 鍵 > Enter 鍵，在退出 Nano 時確認更新並儲存變更。

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. 推送新的應用程式套件前，請先執行下列指令，在 Cloud Shell 中設定權限。

系統詢問是否繼續時，請輸入「y」。

gcloud auth configure-docker

6. 將新建立的應用程式套件推送至 Qwiklabs 專案的 Container Repository。

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. 複製部署作業結束時提供的網址，並儲存在記事本、文字檔或其他方便存取的位置。這個網址會提供給前端應用程式，確保使用者介面能透過後端與 Cloud Spanner 資料庫正常通訊。

後端服務網址會顯示為以下格式：

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. 點選「Check my progress」確認目標已達成。

將股票交易範例資料匯入資料庫

工作 5：建構及部署前端元件

1. 前往包含前端程式碼的目錄，即 environments 資料夾，更新設定檔以指向後端元件。

cd ../frontend/src/environments

2. 在 Cloud Shell 輸入下列指令，叫用 Nano 文字編輯器，並開啟 environment.ts 檔案。

nano environment.ts

3. 小心刪除 http://localhost:3000 字串，並替換成後端網址。

注意：請務必保留網址中的 /api/v1/ 部分

依序按下 Ctrl+X > Y 鍵 > Enter 鍵，在退出 Nano 時確認更新並儲存變更。

更新後的 environment.ts 檔案應如下所示。

export const environment = { production: false, name: "dev", // change baseUrl according to backend URL baseUrl:"https://omegatrade-backend-zzzyyyxx1x-uw.a.run.app/api/v1/", // change clientId to actual value you have received from Oauth console 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 專案的 Container Repository。

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. 前端服務網址會顯示為以下格式。您可以直接點按網址來開啟網頁，也可以複製網址並貼到新分頁。

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

工作 6：在 OmegaTrade 應用程式中執行操作

1. 在應用程式啟動頁面點按「sign up」連結。

2. 使用下列詳細資料，為虛構公司 Spanner1 建立新帳戶。

項目	值
公司電子郵件地址	admin@spanner1.com
全名	Spanner1 Admin
密碼	Spanner1
確認密碼	Spanner1

3. 系統會建立帳戶並登入。

4. 檢查 OmegaTrade 應用程式：前往「Dashboard」，然後從選取器選擇「Foobar Inc」，即可查看 Foobar Inc 的股票成效圖表，當中會呈現 Foobar Inc 的模擬股價走勢。

5. 前往「Manage Company」，然後新增「Spanner1」做為新公司。

6. 點選頁面右側的「Add Company」，然後在彈出式視窗中輸入下列值：

項目	值
公司名稱	Spanner1
短碼	SPN

完成後點按「Save」。

7. 「Spanner1」現在已加入公司清單。

8. 前往「Dashboard」，然後選取「Spanner1」 (如果尚未選取)。您會看到「Spanner1」還沒有模擬資料，點選「here」連結即可產生。

9. 在「Simulate Data」部分，提供下列詳細資料：

項目	值
選取公司	Spanner1
選取間隔	5
記錄數	50

接著點按「Simulate」。

10. 前往「Dashboard」，就會看到「Spanner1」模擬圖表即時更新。模擬作業會在 3 到 6 分鐘內完成。

11. 您也可以在 OmegaTrade 應用程式修改現有公司資訊：在「Manage Company」分頁中找到「Acme Corp」，然後點按「Action」旁的鉛筆圖示。

12. 將公司名稱更新為「Coyote Inc」。請注意，「Short Code」無法在使用者介面更新。點選「Update」關閉視窗並接受變更。

13. 公司名稱會立即更新。前往「Dashboard」，即可看到「Acme Corp」已改為顯示「Coyote Inc」。

14. 應用程式程式碼有時無法處理部分資料變更，這時您可透過授權使用者的身分，直接在 Cloud Spanner 資料庫進行變更，更新 OmegaTrade 應用程式使用的資料。

15. 前往 Cloud 控制台，依序點按「導覽選單」圖示 >「查看所有產品」>「資料庫」>「Spanner」。

16. 如果出現確認或資訊視窗，請點按「接受」。

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 查詢視窗中變更 Short Code 值，因為應用程式程式碼的設計不支援透過使用者介面更新這個值。

22. 點選「執行」來更新。

23. 返回應用程式頁面並重新整理瀏覽器，然後前往「Dashboard」分頁，就會發現「Bar Industries」已改為顯示「Consolidated Enterprises Inc」。

恭喜！

您已成功部署連線至 Cloud Spanner 執行個體的 Node.js 應用程式，並使用該應用程式對資料庫執行基本操作，以及直接在資料庫中編輯資料。

Google Cloud 教育訓練與認證

協助您瞭解如何充分運用 Google Cloud 的技術。我們的課程會介紹專業技能和最佳做法，讓您可以快速掌握要領並持續進修。我們提供從基本到進階等級的訓練課程，並有隨選、線上和虛擬課程等選項，方便您抽空參加。認證可協助您驗證及證明自己在 Google Cloud 技術方面的技能和專業知識。

使用手冊上次更新日期：2025 年 5 月 12 日

實驗室上次測試日期：2025 年 5 月 12 日

Copyright 2025 Google LLC 保留所有權利。Google 和 Google 標誌是 Google LLC 的商標，其他公司和產品名稱則有可能是其關聯公司的商標。