下一步

练习 - 将 Next.js Web 应用与 IoT 数据管道集成

20 分钟

此练习概述了如何将 Next.js 与 IoT 数据管道集成。

在本练习中，你将：

配置 Next.js 应用程序。
部署托管 Next.js 应用程序的 Azure Web 应用。
验证 Azure Web 应用的功能。

先决条件

若要执行此练习，需要：

Azure 订阅。
在 Microsoft Entra 租户中具有全局管理员角色的 Microsoft 帐户或 Microsoft Entra 帐户。租户必须与 Azure 订阅及其中的“所有者”或“参与者”角色相关联。
完成练习单元“设置 Azure Cosmos DB”和“将 Azure Cosmos DB 与 IoT 数据管道集成”。

在此练习中，你将使用现有的 Next.js 应用程序代码，该代码从本模块上一个练习单元中实现的 Cosmos DB 集合检索 IoT 遥测数据。

配置 Next.js 应用程序

配置一个示例 Next.js 应用程序，该应用程序从 Cosmos DB 集合检索数据。

启动 Web 浏览器，导航到 Azure 门户并登录要在本模块中使用的 Azure 订阅。
在 Azure 门户的工具栏中，选择位于搜索框旁的“Cloud Shell”图标。

备注

或者，可以通过导航到 https://shell.azure.com 来直接访问 Cloud Shell。
如果系统提示选择“Bash”或“PowerShell”，请选择“Bash”。

备注

如果这是你第一次启动 Cloud Shell 且向你显示了“未装载任何存储”消息，请选择要在此实验室中使用的订阅，然后选择“创建存储”。
运行以下命令，以克隆包含将在本练习中使用的示例 Next.js 应用程序代码的 GitHub 存储库。
```
git clone https://github.com/MicrosoftDocs/mslearn-cloud-native-apps.git
```
运行以下命令，切换到包含 GitHub 存储库克隆的目录。
```
cd ./mslearn-cloud-native-apps/m05u08/
```
运行以下命令以显示 index.js 文件的内容。此文件包含 Next.js 脚本，该脚本与在本模块的第一个练习中创建的 Cosmos DB 帐户建立连接。它还会查询在本模块第二个练习中创建的 iotdb 数据库中 iotcollection 的内容。
```
cat ./pages/index.js
```
运行以下命令以显示 config.js 文件的内容。此文件存储表示 Cosmos DB SQL API 终结点的值。它还会存储相应的访问密钥，以及托管你在本模块上一练习中收集的 IoT 数据的目标数据库和容器。
```
cat ./config.js
```
注意

数据库和容器的名称已预先填充。接下来，你将设置终结点和对应访问密钥的值。

运行以下命令，检索 Cosmos DB SQL API 终结点和对应访问密钥的值，然后将这些值存储在临时变量中。

RG1NAME=cosmos-db-RG
ACCOUNTNAME=$(az cosmosdb list --resource-group $RG1NAME --query "[0].name" --output tsv)
ENDPOINT=$(az cosmosdb show --name $ACCOUNTNAME --resource-group $RG1NAME --query "locations[0].documentEndpoint" --output tsv)
KEY=$(az cosmosdb keys list --name $ACCOUNTNAME --resource-group $RG1NAME --query "primaryMasterKey" --output tsv)

在“Cloud Shell”窗格中通过 Bash 会话运行以下命令，以将 config.js 文件的占位符替换为在上一步中检索到的值。

 ENDPOINT="$(echo $ENDPOINT | sed -e 's/\\/\\\\/g; s/\//\\\//g; s/&/\\\&/g')"
 sed -i 's/"COSMOS_DB_SQL_API_ENDPOINT"/"'"$ENDPOINT"'"/' ./config.js

 KEY="$(echo $KEY | sed -e 's/\\/\\\\/g; s/\//\\\//g; s/&/\\\&/g')"
 sed -i 's/"COSMOS_DB_ACCESS_KEY"/"'"$KEY"'"/' ./config.js

在“Cloud Shell”窗格中通过 Bash 会话运行以下命令，以验证 config.js 文件是否包含 Cosmos DB SQL API 终结点和对应访问密钥的实际值。
```
cat ./config.js
```
备注

此时，你应详细了解如何安装依赖项包和生成应用程序。由于版本控制问题，你将无法在 Azure Cloud Shell 中运行生成。而是会在部署后执行此任务。

部署托管 Next.js 应用程序的 Azure Web 应用

将新配置的 Next.js 应用程序部署到 Azure Web 应用并验证其功能。

注意

可以将相同应用程序部署到提供 Node.js 运行时环境的其他 Azure 服务，包括 Azure 虚拟机、Azure 容器实例或 Azure Kubernetes 服务。

在 Azure Cloud Shell 中，运行以下命令以创建资源组来托管 Azure web 应用，你需要将 Next.js 应用程序部署到其中。

RG1NAME=cosmos-db-RG
LOCATION=$(az group show --resource-group $RG1NAME --query location --output tsv)
RG2NAME=nextjs-webapp-RG
az group create --name $RG2NAME --location $LOCATION

运行以下命令，创建托管新 Azure Web 应用的 Azure 应用服务计划。

SPNAME=nextjs-webapp-sp
az appservice plan create --name $SPNAME --resource-group $RG2NAME --sku S1

运行以下命令，创建新的 Azure Web 应用。

WEBAPPNAME=nextjs$RANDOM$RANDOM
az webapp create --name $WEBAPPNAME --resource-group $RG2NAME --plan $SPNAME

运行以下命令，重新初始化本地 Git 存储库并提交主分支中的所有更改。

git config --global user.email "user1@adatum.com"
git config --global user.name "Adatum User"
git init
git add -A
git commit -m "Initial Commit"

运行以下命令，设置用户级部署凭据。

DEPLOYMENTUSER=m05u08User$RANDOM
DEPLOYMENTPASS=m05u08Pass$RANDOM$RANDOM
az webapp deployment user set --user-name $DEPLOYMENTUSER --password $DEPLOYMENTPASS

运行以下命令，标识用户级部署凭据。确保记录它们的值，因为你稍后将在本练习中用到它们。
```
echo $DEPLOYMENTUSER
echo $DEPLOYMENTPASS
```

运行以下命令，标识将用作 git push 命令的目标的 Azure Web 应用部署 URL。

RG2NAME=nextjs-webapp-RG
WEBAPPNAME=$(az webapp list --resource-group $RG2NAME --query "[0].name" --output tsv)

DEPLOYMENTURL=$(az webapp deployment source config-local-git --name $WEBAPPNAME --resource-group $RG2NAME --output tsv)

运行以下命令，配置名为 azure 的远程存储库，以表示上一步中标识的部署 URL。
```
git remote add azure $DEPLOYMENTURL
```
运行以下命令，基于 main 分支创建 master 分支，并将其内容推送到 Azure Web 应用。系统会提示输入你之前记录的用户级部署凭据中的密码。
```
git checkout -b master
git push --set-upstream azure master
```
注意

等待部署完成。应收到一条消息，指出部署已成功。
关闭“Cloud Shell”窗格。

验证 Azure Web 应用的功能

验证托管 Next.js 应用程序的 Azure Web 应用程序的功能。

在显示 Azure 门户的 Web 浏览器窗口中，使用 Azure 门户页面顶部的“搜索资源、服务和文档”文本框搜索“应用服务”。
在“应用服务”窗格上的应用服务实例列表中，选择表示本练习的上一任务中所部署的 Azure Web 应用的条目。名称应包含 nextjs 前缀，后跟数字字符串。
在显示 Web 应用属性的窗格上，在“开发工具”部分下选择“应用服务编辑器(预览版)”条目。然后选择“打开编辑器”。
选择“打开控制台”图标。
在控制台提示中运行以下命令。
```
npm run build
```
此命令生成推送到 Azure Web 应用的 Next.js 应用程序。
等待生成过程完成。此过程可能需要大约 5 分钟。
关闭“应用服务编辑器”页面的 Web 浏览器选项卡。
在“Web 应用”窗格上，选择“概述”。在“概要”窗格中，选择标记为“URL”的链接。

备注

此时会打开显示 Azure Web 应用的新 Web 浏览器选项卡。
验证 Web 浏览器页面是否显示“Next.js - Cosmos DB IoT 遥测数据”页面，其中列出了从 Azure Cosmos DB 集合检索到的 IoT 遥测数据点。

结果

祝贺你！你已完成本模块的第三个练习。在本练习中，你创建了一个记录 HTTP 请求有效负载的 Azure 函数。然后，你配置并验证了 Azure IoT Central 应用程序的 IoT 遥测规则。最后，你创建了一个 Azure 存储帐户，用于存储 IoT 遥测数据，并配置和验证了 Azure IoT Central 应用程序的数据导出。

清理资源

若要避免使用 Azure 资源时产生不必要的费用，可删除在此练习中创建的 cosmos-db-RG、nextjs-webapp-RG 和 function-app-RG 资源组。在 Azure 门户中导航到每个资源组，然后选择工具栏中的“删除资源组”条目。在“键入资源组名称”文本框中，输入资源组的名称，然后选择“删除”。

继续