建置在 IBM Cloudant 中儲存資訊的應用程式

瞭解如何從本端工作站上儲存的原始碼建置 Code Engine 應用程式。 本指導教學使用用來建置應用程式的範例來源。 此應用程式會連接至 IBM Cloudant 資料庫,並儲存來自該應用程式的輸入。

建置或映像檔建置是一種機制,可用來從原始碼建立容器映像檔。Code Engine 支援從 Dockerfile 和 Cloud Native 建置套件進行建置。

開始之前

所有 Code Engine 使用者都必須具有「隨收隨付制」帳戶。 指導教學可能會產生成本。 使用「成本預估器」可根據您的預估用量來產生成本預估。 如需相關資訊,請參閱 Code Engine 定價

建立 IBM Cloudant 服務實例及資料庫

您的首要步驟是建立 IBM Cloudant 服務實例,然後建立資料庫。 您可以 從主控台 或使用 CLI 指令來建立一個。 此外,建立可傳遞至應用程式的服務認證。

  1. 建立 IBM Cloudant 服務實例,遵循 開始使用 IBM Cloudant 中的步驟。 將實例命名為 CloudantFruitCounter。 請務必透過建立服務認證來完成作業。
  2. 開啟實例的 IBM Cloudant 儀表板,然後按一下 建立資料庫
  3. 在「建立資料庫」視窗中,輸入資料庫名稱 fruitcounter
  4. 請勿選取 已分割 選項,然後按一下 建立

在本端測試應用程式

在 Code Engine中建立程式碼作為應用程式之前,請先在本端測試程式碼,以確保其正常運作。

  1. 從 IBM Cloudant 儀表板中擷取 IBM Cloudant 服務認證。 如需擷取認證的相關資訊,請參閱 建立服務認證

  2. 使用服務認證中的值來設定環境變數。

    export CLOUDANT_URL=<your_url>
    
    export CLOUDANT_APIKEY=<your_key>
    
    export DBNAME="fruitcounter"
    
  3. 複製 fruit-counter 儲存庫,切換至此目錄,然後安裝並啟動相依關係。

    git clone https://github.com/IBM/CodeEngine
    cd CodeEngine/fruit-counter
    npm install
    npm run start
    
  4. 開啟瀏覽器,並移至 http://localhost:8080

  5. 挑選您最愛的水果並提交您的選擇。 應用程式接受您的選擇,並顯示累積的挑選總數。

您可以移至 IBM Cloudant 資料庫儀表板,以驗證您的水果選項已在 Cloudant 中登錄。

讓我們來看看這個程式是如何運作的。

此應用程式是使用兩個主要套件的簡式 Node.js 應用程式。

  • @ibm-cloud/cloudant,以連接至 IBM Cloudant 並讀取及寫入資料。
  • 快速: 建立 Web 伺服器,可讓使用者提交他們選擇的水果,並查看我們的資料累積總計。

此應用程式由兩個主要檔案組成。

server.js
server.js 檔用來執行 Web 伺服器,並與 Cloudant通訊。 在使用者選取水果選項之後,前端頁面會將值提交至 /fruit 路徑 (請參閱下文),app.route 函數會將具有水果選項的新文件儲存在 Cloudant 中,然後讀回執行總計以回到前端頁面。
讀取作業使用 Cloudant 設計文件及 MapReduce 視圖來聚集文件。 如需視圖及設計文件的相關資訊,請參閱 建立視圖(MapReduce)
index.html
index.html 檔案是使用 Vue.js 架構之應用程式的網頁。 當載入此頁面時,它會顯示可用的水果選項。
提交您的選擇之後,架構會對應用程式的 /fruit 路徑發出 HTTP POST 要求,並選取您的水果。 應用程式傳回包含水果選項的累積總計,然後會顯示。

將應用程式部署至 Code Engine

既然您瞭解此應用程式的運作方式,您可以將它部署至 Code Engine。 您可以遵循步驟來部署 公用儲存庫中的應用程式,並指定 CODEENGINEREPO 作為映像檔儲存庫。 請務必包含您在步驟 2 本端收集並設定的環境變數。

因為您已在 本端測試應用程式 時複製儲存庫,所以您可以使用 app create 指令,從本端來源建置映像檔,並部署參照此建置映像檔的應用程式。

  1. 執行 app create 指令。 您必須提供應用程式的名稱及原始碼的位置。 下列範例會建立一個稱為 myfruitcounter 的應用程式,它使用 docker 策略並提供原始碼在現行目錄 (.) 中的位置。您也必須設定環境變數,以連接至 Cloudant。

    ibmcloud ce app create --name myfruitcounter --build-source . --strategy dockerfile --env CLOUDANT_URL=<your_url> --env CLOUDANT_APIKEY=<your_key> --env DBNAME=fruitcounter  
    

    輸出範例

    Creating application 'myfruitcounter'...
    Packaging files to upload from source path '.'...
    Submitting build run 'myfruitcounter-run-220727-142949868'...
    Creating image 'private.us.icr.io/ce--6ef04-n2lgvg2l59v/app-myfruitcounter:220727-1929-y8ej0'...
    Waiting for build run to complete...
    Build run status: 'Running'
    Build run completed successfully.
    Run 'ibmcloud ce buildrun get -n myfruitcounter-run-220727-142949868' to check the build run status.
    Waiting for application 'myfruitcounter' to become ready.
    Configuration 'myfruitcounter' is waiting for a Revision to become ready.
    Ingress has not yet been reconciled.
    Waiting for load balancer to be ready.
    Run 'ibmcloud ce application get -n myfruitcounter' to check the application status.
    OK                                                
    
    https://myfruitcounter.n2lfrg2876v.us-south.codeengine.appdomain.cloud
    
  2. 開啟提供給水果選取器應用程式的 URL,以測試應用程式。 挑選您最喜歡的水果並提交。 會顯示水果選項的累積總計。 您可以重新整理應用程式並選擇另一個水果。 加法會顯示在累積總計中。