使用 MEAN 堆疊的現代 Web 應用程式

本指導教學可能會產生成本。 使用「成本估算器」根據您的預計用量生成成本估算。

本指導教學將全程指導您使用熱門 MEAN 堆疊建立 Web 應用程式。 它由 MongoDB、Express 網頁框架、Angular 前端框架和 Nodeode.js 運行時組成。 您將學習如何在本機執行 MEAN 範例應用程式、建立並使用受管理的資料庫即服務 DBasS )、將應用程式部署到 IBM Cloud 以及擴充執行時與資料庫資源。

目標

  • 在本機建立並執行 Node.js 應用程式範例。
  • 建立受管理 Databases for MongoDB 實例。
  • 使用 IBM Cloud® Code Engine 將 Node.js 應用程式部署到雲端。
  • 調整執行時期 CPU 和記憶體資源。
  • 擴充資料庫記憶體和磁碟資源。

架構圖
教學架構圖

  1. 使用者使用 Web 瀏覽器存取應用程式。
  2. 在 Code Engine 中執行的 Node.js 應用程式會存取 Databases for MongoDB 資料庫以提取資料。

開始之前

本指導教學需要:

  • IBM Cloud CLI-此 CLI 工具可讓您與 IBM Cloud互動。
    • Code Engine 資源之 CLI 存取的 code-engine/ce 外掛程式 (code-engine/ce)。
    • 選用 Container Registry 外掛程式 (container-registry)，用於管理容器映像檔。
  • git，以複製原始碼儲存庫。
  • 選用，如果您想要在本端測試執行應用程式，則需要 安裝 Node.js。

您將在 指導教學入門 手冊中找到針對您的作業環境下載及安裝這些工具的指示。

若要避免安裝這些工具，您可以從 IBM Cloud 主控台使用 Cloud Shell。

本指導教學示範如何使用指令行來建立資料庫 IBM Cloud® Code Engine 專案和應用程式。 隨附的 GitHub 儲存庫 中有指示可讓您在工作站本端使用 Terraform 進行佈建，甚至只要按幾下即可使用 Schematics 進行更簡單的佈建。

在雲端中建立 MongoDB 資料庫的實例

在本節中，您將在雲端中建立 Databases for MongoDB 實例。Databases for MongoDB 是一種資料庫即服務，易於配置並提供內建備份及調整。 您可以在 IBM Cloud 型錄找到許多不同類型的資料庫。 若要建立 Databases for MongoDB 實例，請遵循下列步驟。

  1. 如果您尚未登入，請使用 ibmcloud login 或 ibmcloud login --sso 以互動方式登入。 將您偏好的 IBM Cloud 地區及資源群組設為目標。 在下列範例中，我們將使用 ca-tor (Toronto) 地區及 default 資源群組。

    ibmcloud target -r ca-tor -g default

    您可以在文件的 一般 IBM Cloud CLI(ibmcloud)指令 主題中找到更多 CLI 指令。

  2. 透過 指令行 建立 Databases for MongoDB 的實例，或使用 主控台使用者介面。 服務名稱必須命名為 mean-stack-mongodb， 因為本教學中使用的應用程式已設定為以此名稱尋找服務。 對於 <region>，您可以選擇更接近您的地區，不過我們將在本指導教學中使用 ca-tor。

    ibmcloud resource service-instance-create mean-stack-mongodb databases-for-mongodb standard ca-tor

  3. 等待實例準備就緒。 可以使用下列指令檢查佈建的狀態：

    ibmcloud resource service-instance mean-stack-mongodb

  4. 確認服務狀態變更為「建立成功」後，您就可以繼續建立服務金鑰。

    ibmcloud resource service-key-create mean-stack-mongodb-key --instance-name mean-stack-mongodb

本端執行 MEAN 應用程式

在此區段中，您將複製 MEAN 範例程式碼，並在本端執行應用程式，以測試與 IBM Cloud 上執行的 MongoDB 資料庫的連線。

  1. 複製 MEAN 範例程式碼。

    git clone https://github.com/IBM-Cloud/nodejs-MEAN-stack
cd nodejs-MEAN-stack

  2. 將 .env.example 檔案複製到 .env.

    cp .env.example .env

  3. 在 .env 檔案中，新增您自己的 SESSION_SECRET。 針對 MONGODB_URL 和 CERTIFICATE_BASE64，執行下列指令：

    ibmcloud resource service-key mean-stack-mongodb-key --output json

    在傳回的 JSON 輸出中，您可以在 credentials -> connection -> mongodb -> composed 下找到 MONGODB_URL 所需的值，並在 credentials -> connection -> mongodb -> certificate -> certificate_base64 下找到 CERTIFICATE_BASE64 的值。 請確定新增至 .env 的值不包含任何引號或空格。

  4. 可選 - 安裝所需的套件。

    npm install

  5. 可選 - 在本機執行應用程式。 使用輸出中提供的 URL 存取應用程式，建立新使用者並登入。

    node server.js

使用雲端 Shell 可以開啟應用程式，方法是按一下右上方的 眼睛 圖示，然後按一下埠 8080 上的預覽。

將應用程式部署到雲端

IBM Cloud® Code Engine 是完全受管理的無伺服器平台，可執行容器化工作負載，包括 Web 應用程式、微服務、事件驅動功能或批次工作。 在此區段中，您將建立 Code Engine 專案，並將容器化 Node.js 應用程式部署至專案。 在上一節中，原始碼會讀取您本機的 .env，以取得 MongoDB 服務的 URL 和憑證。 您將在專案中建立密鑰，以包含應用程式執行時將讀取的這些相同索引鍵/值。

我們已建置應用程式的容器映像檔，並將它推送至公用 IBM Cloud Container Registry。 您將使用此預先建置容器映像檔來部署應用程式。

  1. 在 IBM Cloud Code Engine 中建立專案。

    ibmcloud code-engine project create --name mean-stack

  2. 在專案中建立密鑰，其中包含先前用來在本端執行應用程式的 .env 檔案中的金鑰/值，在雲端中執行的應用程式將會耗用此密鑰。 如需密碼的相關資訊，請參閱 使用密碼。

    ibmcloud code-engine secret create --name mean-stack-secrets --from-env-file .env

  3. 根據公用容器映像檔來建立應用程式，而公用容器映像檔是根據從 https://github.com/IBM-Cloud/nodejs-MEAN-stack 儲存庫下載的相同原始碼。 如果您對用來建立此映像檔的步驟感興趣，則可以檢閱 create-container-image.md。

    ibmcloud code-engine application create --name mean-stack-application --image icr.io/solution-tutorials/tutorial-mean-stack --env-from-secret mean-stack-secrets

  4. 程式碼推送完成後，您應該可以在瀏覽器中檢視應用程式。 已產生主機名稱，可能看起來如下: https://mean-stack.<CE_SUBDOMAIN>.ca-tor.codeengine.appdomain.cloud/。 CE_SUBDOMAIN 是 注入專案中的變數，及其在建立專案期間所決定的值。 您可以從主控台儀表板或命令列取得應用程式 URL。 一旦您存取應用程式，它應該看起來如下:

    即時應用程式
    即時應用程式

在 Code Engine 中調整計算資源

Code Engine 監控系統中的要求數量，並 實體的增減，以滿足傳入要求的負載，包括任何 連線到您的應用程式。擴展應用程式 HTTP 如果您的服務需要其他計算資源，或您想要減少配置的計算資源數量，您可以在特定的應用程式頁面中進行這些變更。

  1. 導覽至 Code Engine 專案頁面。

  2. 按一下先前建立的 mean-stack 專案。

  3. 在 摘要下，按一下 應用程式。

  4. 按一下先前建立的 mean-stack-application。

  5. 按一下 配置，然後按一下 執行時期，以檢視現行配置。

    調整資源
    調整資源

  6. 按一下 編輯並建立新修訂，以不僅調整 CPU 和記憶體、實例數下限/上限 以及 並行。

  7. 按一下 儲存並建立 以觸發變更。 當完成時，它會指出應用程式是 Deploying 和 Ready。

在 Databases for MongoDB 中調整資料庫資源

如果您的服務需要額外儲存空間，或者您要減少配置給服務的儲存空間量，可以透過調整資源來完成此動作。

  1. 從 資料庫下的 資源清單 存取 Databases for MongoDB 服務實例。
  2. 按一下 資源 畫面。
    調整資源
    調整資源
  3. 調整調節器以增加或減少配置給 Databases for MongoDB 資料庫服務的儲存空間量。
  4. 按一下調整部署以觸發重新調整並回到儀表板概觀頁面。 這將指出正在進行重新調整。
  5. 或者，配置自動調整規則，以自動增加資料庫資源的用量。

移除資源

若要移除資源，請遵循下列步驟：

  1. 使用下面的指令，刪除專案以刪除其所有元件 (應用程式、工作等)。
    ibmcloud code-engine project delete --name mean-stack
  2. 刪除 Databases for MongoDB 服務金鑰。
    ibmcloud resource service-key-delete mean-stack-mongodb-key
  3. 刪除 Databases for MongoDB 服務。
    ibmcloud resource service-instance-delete mean-stack-mongodb

視資源而定，它可能不會立即刪除，但會保留 (依預設會保留 7 天)。 您可以透過永久刪除資源或在保留期間內還原資源來收回資源。 請參閱本文件，以瞭解如何 使用資源收回。

相關內容