练习 - 分析基于轮询的 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
```
若要设置默认订阅，请将 YOUR-SUBSCRIPTION-ID 替换为上一 Azure CLI 输出中的订阅 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 Functions 应用，请选择 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
  }
}

使用从上面复制的值更新以下变量。

属性 Value

AzureWebJobsStorage 替换为存储连接字符串。

COSMOSDB_CONNECTION_STRING 替换为 Cosmos DB 连接字符串。

现在，Functions 应用可以接收来自客户端的请求，然后连接到数据库并正确管理计时器触发器。

属性	Value
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 按键组合停止应用程序，或通过选择垃圾桶图标来终止终端。

在本单元中，你运行了原型。虽然客户端确实成功运行，但效率并不高。虽然在股票数量较少的情况下，每个客户可能不会注意到这一点，但随着股票数量的增加和从服务器上提取的客户数量的增多，情况就会发生变化。可以改进原型。让我们在下一单元中了解操作方法。