含 Code Engine 的無伺服器 Web 應用程式及 API

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

在本指導教學中，您將使用 Object Storage 中的儲存區來建立無伺服器 Web 應用程式，並使用 IBM Cloud Code Engine 及 IBM Cloudant 作為 JSON 文件資料庫來實作應用程式後端。

靜態網站很適合效能和安全。 他們的架構模型有時被稱為 果醬堆在參考JavaScript, API 和標記。 在本指導教學中，您將建立在 Object Storage上管理的靜態網站。 網站有一個訪客簿，使用 JavaScript 來存取 API 以擷取項目或新增項目。 用於與支援資料庫互動的 API 是使用無伺服器方法來實作。 它作為後端應用程式或微服務部署至 IBM Cloud Code Engine。 只有在必要時才會執行後端，因此在使用時會產生費用。

目標

  • 部署無伺服器後端和資料庫
  • 將 REST API 公開為無伺服器應用程式
  • 管理靜態網站

本指導教學中說明的應用程式是一個簡單的留言板網站，使用者可以在其中公佈訊息。

架構
教學的架構圖

  1. 使用者存取 Object Storage 中儲存區上管理的應用程式
  2. 該 Web 應用程式呼叫後端 API。
  3. 具有後端 API 的應用程式已部署至 Code Engine。
  4. 後端使用 IBM Cloudant 來儲存及擷取訪客留言板項目。

建立 Guestbook 資料庫

讓我們從建立 IBM Cloudant 服務實例開始。IBM Cloudant 是完全受管理的 JSON 文件資料庫。 它以 Apache CouchDB為建置基礎且相容。

  1. 在 型錄 的 服務下，跳至 資料庫 種類。 按一下 IBM Cloudant 磚。 在新的對話框中:

    1. 在 多租戶 下選取地區。

    2. 在下面配置Cloudant實例選擇一個獨特的服務的名稱，例如 <yourinitials>-guestbook-db。

    3. 選取資源群組。

    4. 選取 IAM 作為鑑別方法。

    5. 選取精簡方案。 如果您的帳戶中已有「精簡」方案，請選取另一個服務方案。

    6. 按一下建立。

  2. 回到 IBM Cloud 資源清單，在 服務下，按一下您建立用來開啟實例完整詳細資料頁面的 IBM Cloudant 實例。 注意：您可能需要等待，直到服務的狀態變更為 Active。
  3. 按一下啟動儀表板，在新的瀏覽器索引標籤中開啟儀表板。
  4. 在右上方，按一下建立資料庫。 輸入 guestbook 作為名稱，並在 分割下選取 未分割。 按一下建立以建立資料庫。

建立無伺服器後端

在此區段中，您將使用 Code Engine來建立無伺服器後端應用程式。 無伺服器應用程式只會在執行時間產生費用，這適用於不常存取的解決方案，例如訪客留言板。

建立 Code Engine 專案

  1. 導覽至 IBM Cloud Code Engine 概觀 頁面。
  2. 在左側窗格中，按一下專案，然後按一下建立、
    • 選取位置。
    • 使用 <yourinitials>-guestbook 作為專案名稱，並選取與之前相同的資源群組。
    • 按一下建立。
    • 等待專案 status 變更為 作用中。
  3. 按一下專案名稱，以輸入專案儀表板。

建立並部署後端應用程式

  1. 在專案儀表板內，按一下 應用程式，然後按一下 建立。
  2. 在新對話框中，輸入 guestbook-backend 作為名稱。
  3. 保持選取 儲存器映像檔，並使用 icr.io/solution-tutorials/tutorial-serverless-api-webapp:latest 作為 映像檔參照。 它使用已存在的儲存器映像檔。
  4. 在 實例資源下，選取 0.25 vCPU / 0.5 GB for CPU and memory。 這種類型的應用程式不需要太多資源。
  5. 將 實例數下限 增加至 1，並將 實例數上限 減少至 2。 最少一個會讓應用程式在起始測試期間更具回應力。 您可以稍後再將它減少為零。
  6. 按一下 建立，以部署訪客留言板的新後端應用程式。 請注意，如果沒有建立服務連結的下一步，部署將會失敗並產生程式碼錯誤。
  7. 建立與資料庫的服務連結。
    1. 按一下服務綁定索引標籤。
    2. 按一下建立。
    3. 按一下 IBM Cloud 服務實例，然後從下拉清單中選擇資料庫。
    4. 將 角色 保留為 撰寫者。
    5. 按一下新增。
  8. 等待佈建報告為綠色且備妥。 按一下測試應用程式，然後按一下應用程式 URL。 後端應用程式應該載入並傳回頁面，指出 healthy。 記住或複製應用程式 URL，因為下一部分需要用到它。

您可以自行建置映像檔，而不是使用預先建置的容器映像檔。 這可以在或 在 Code Engine 的協助下 外部完成。 如果不使用預先建置的容器映像檔，且如果 使用專用容器登錄，則可能需要其他步驟。 您可以在下列網址找到來源: https://github.com/IBM-Cloud/serverless-guestbook/tree/ce

部署 Web 應用程式

建立 Object Storage 儲存區，並配置靜態網站管理，其中包含使用 IBM Cloudant 資料庫之 Guestbook JavaScript 應用程式的檔案。

建立一個 Object Storage 範例：

  1. 從型錄中選取 Object Storage。
  2. 選取 IBM Cloud (適用於基礎架構) 及 標準 (適用於方案)。
  3. 進入一個獨特的實例的服務名稱，例如 <yourinitials>-guestbook-cos。
  4. 選取資源群組。
  5. 按一下建立。

建立配置給靜態網站管理的儲存區:

  1. 按一下建立儲存區。
  2. 按一下自訂您的水桶。
  3. 輸入在所有 IBM 帳戶之間唯一的儲存區名稱。 請嘗試 <yourinitials>-guestbook。
  4. 選取備援作為 地區。
  5. 選取與 IBM Cloudant 實例一致的 位置。
  6. 保留 儲存類別 預設值
  7. 向下捲動至 靜態網站管理，然後按一下 新增 +。
  8. 保持選取遞送規則 (個別)，並新增「索引」文件 index.html。
  9. 按一下 開啟 的公用存取權
  10. 按一下儲存
  11. 捲動至底部並按一下建立水桶

將 https://github.com/IBM-Cloud/serverless-guestbook/tree/ce 的 docs 目錄中的檔案複製到儲存區:

  1. 在新標籤中開啟 https://github.com/IBM-Cloud/serverless-guestbook/tree/ce。

  2. 按一下 程式碼，然後 下載 ZIP，以下載 zip 檔案。

  3. 解壓縮檔案，並導覽至解壓縮檔案的 docs 目錄。

  4. 編輯 guestbook.js- 將 apiUrl 的值替換為上一節的應用程式 URL。

    請確定 URI 不是以斜線 (/) 結尾。否則應用程式將無法運作。

  5. 開啟儲存區 物件 視圖，並將 guestbook.js 及 index.html 檔案拖放至 COS 儲存區。

  6. 導覽至儲存區的 配置 標籤。 在 端點 區段中，找出 管理端點的靜態網站 區段。 將 公用 端點複製到瀏覽器標籤。

  7. 您應該會看到訪客留言板頁面。

  8. 將新項目新增至訪客留言板。

Guestbook 擷取畫面
Guestbook 擷取畫面

移除資源

若要刪除已建立的儲存區及 Object Storage 服務，請執行下列動作:

  1. 導覽至 Object Storage 儲存區物件
  2. 勾選標題列中的方框，以選取儲存區中的所有物件
  3. 按一下 刪除物件
  4. 在儲存區物件頁面 動作 功能表的右上方，選取 刪除儲存區
  5. 在 Object Storage 實例 動作 功能表的右上方，選取 刪除實例

若要刪除已建立的 IBM Cloudant 服務，

  1. 導覽至 資源清單
  2. 在 資料庫下，按一下 <yourinitials>-guestbook-db 服務旁邊的動作功能表
  3. 按一下刪除

若要刪除應用程式及專案 Code Engine，

  1. 導覽至 Code Engine 登陸頁面。
  2. 在左側窗格中，按一下專案。
  3. 在專案清單中，檢查訪客留言板專案，然後按一下 刪除。

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

相關內容