練習 - 分析輪詢型 Web 應用程式的限制

15 分鐘

變更原型之前，您必須先執行原型，驗證假設。原型位於 GitHub 的原始程式碼存放庫。

建立 Azure 資源

在不同的瀏覽器索引標籤或視窗，使用下列連結派生 GitHub 上的存放庫範例：mslearn-advocates.azure-functions-and-signalr。這可讓您將變更推送至自己的原始程式碼版本。為了稍後在課程模組將原始程式碼部署至 Azure，這是必要的步驟。

在終端複製存放庫。在下列命令，使用您的帳戶取代 MicrosoftDocs：

git clone https://github.com/MicrosoftDocs/mslearn-advocates.azure-functions-and-signalr stock-prototype

在 setup-resources 資料夾安裝相依性。
```
cd stock-prototype/setup-resources && npm install
```
如果您收到有關 EBADENGINE 的警告，大可忽略。
使用 Azure CLI 登入 Azure。
```
az login
```
檢視您的訂用帳戶，並設定預設的 Azure 訂用帳戶。

檢視訂用帳戶。
```
az account list --output json | jq -r '.[] | .name' | sort
```
若要設定預設訂用帳戶，請用先前 Azure CLI 輸出的訂用帳戶識別碼取代 YOUR-SUBSCRIPTION-ID。
```
az account set --subscription <YOUR-SUBSCRIPTION-ID>
```
此預設訂用帳戶可用來建立 Azure 資源。
建立 Azure 資源，並將範例資料上傳至資料庫。流程可能需要幾分鐘才能完成。
```
bash create-start-resources.sh "<YOUR-SUBSCRIPTION-NAME>"
```
請務必以雙引號括住名稱。如果指令碼錯誤與位置缺少可用資源的錯誤有關，請編輯指令碼以變更位置： LOCATION=<NEW LOCATION>。
複製必要的資訊，這些是執行原型需要的資訊。

資源類型環境變數

Azure Cosmos DB 稱為 COSMOSDB_CONNECTION_STRING

Azure 儲存體稱為 STORAGE_CONNECTION_STRING

資源群組稱為 RESOURCE_GROUP_NAME。
使用 Node.js 指令碼，利用下列命令將範例資料上傳至資料庫。
```
npm start
```
在終端機瀏覽至根資料夾。
```
cd ..
```

資源類型	環境變數
Azure Cosmos DB	稱為 COSMOSDB_CONNECTION_STRING
Azure 儲存體	稱為 STORAGE_CONNECTION_STRING
資源群組	稱為 RESOURCE_GROUP_NAME。

安裝相依性並執行原型

安裝相依性。

cd start/client && npm install && cd ../..
cd start/server && npm install && cd ../..

如果通知要求您選取工作區的 Azure 函數應用程式，請選取 [start/server]。這是您用來執行伺服器端程式碼的函數應用程式。
如果您收到有關安裝最新 Azure Functions Core Tools 的通知，請選取 [安裝]。

取得客戶端和伺服器 URL

在本機執行時，用戶端和伺服器應用程式必須知道找到對方的位置。 URL 為：

用戶端：http://localhost:3000
伺服器：http://localhost:7071

更新 Azure Functions 應用程式的本機設定

將連接字串新增至原型的 Azure Functions 應用程式。

建立 ./start/server/local.settings.json 檔案，並貼上下列內容。此檔案具有本機函式專案的組態設定。

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "<STORAGE_CONNECTION_STRING>",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
    "COSMOSDB_CONNECTION_STRING": "<COSMOSDB_CONNECTION_STRING>"
  },
  "Host" : {
    "LocalHttpPort": 7071,
    "CORS": "http://localhost:3000",
    "CORSCredentials": true
  }
}

使用您從上方複製的值更新下列變數。

屬性值

AzureWebJobsStorage 用儲存體連接字串取代。

COSMOSDB_CONNECTION_STRING 用 Cosmos DB 連接字串取代。

現在函數應用程式可以接收來自用戶端的要求，然後連線到資料庫並正確管理計時器觸發程序。

屬性	值
AzureWebJobsStorage	用儲存體連接字串取代。
COSMOSDB_CONNECTION_STRING	用 Cosmos DB 連接字串取代。

新增用戶端應用程式的本機設定

將伺服器 URL 新增至原型的用戶端應用程式。

開啟 ./start/client，並使用下列內容建立 .env 檔案。

BACKEND_URL=http://localhost:7071

執行伺服器應用程式

在終端啟動 Azure Functions 應用程式。
```
cd start/server && npm start
```

等候終端顯示 API 端點。

Functions:

        getStocks: [GET] http://localhost:7071/api/getStocks

        setPrice: timerTrigger

執行用戶端應用程式

在新終端啟動用戶端應用程式。
```
cd start/client && npm start
```
通知顯示應用程式正在執行時，選取 [在瀏覽器開啟] 即可使用原型。
安排瀏覽器視窗，以便同時查看終端和股價的原型。
在原型瀏覽器視窗，開啟瀏覽器的開發人員工具。請注意，即使資料尚未變更，瀏覽器依舊每隔 5 秒向 API 提出要求。
在瀏覽器視窗中，監看 Azure Functions 應用程式的輸出。股價每分鐘都會改變。如果 API 中的價格變更，下一次用戶端擷取所有資料時會包含該變更。
在啟動用戶端和啟動伺服器終端，使用 Ctrl + C 停止應用程式，或是選取垃圾桶圖示終止終端。

在此單元中，您已執行原型。雖然用戶端執行成功，但效率並不高。雖然因為股票數量少，每個個別客戶可能不會注意到這一點，但隨著股票數量增加，加上從伺服器提取的客戶數量，情況將有所不同。原型可以改善。下一個單元來學習如何改善。