练习 - 创建 Azure Functions 项目

6 分钟

你的购物列表 Web 应用需要 API。在本练习中，你将使用 Azure Functions 项目生成并运行 API。然后，您可以使用适用于 Visual Studio Code 的 Azure Functions 扩展，通过新函数来扩展该 API。

在本练习中，你要执行以下步骤：

在准备对 Web 应用进行更改时创建分支。
浏览 Azure Function 项目。
创建 HTTP GET 函数。
将函数起始代码替换为获取产品的逻辑。
配置 Web 应用以将 HTTP 请求代理到 API。
运行 API 和 Web 应用。

获取函数应用

现在，添加 API 并将其连接到前端应用。该 api-starter 文件夹包含不完整的 Azure Functions 项目。因此，现在让我们完成这一点。

创建 API 分支

对应用进行更改之前，最好为更改创建新分支。即将完成应用的 API，因此现在是创建分支的好时机。

在 Visual Studio Code 中，按 F1 打开命令面板。
输入并选择“Git:签出到…”。
选择“ 创建新分支”。
输入新分支名称的 API ，然后按 Enter。

你刚刚创建了 API git 分支。

完成 Azure Functions API

若要完成 API，首先将初学者 API 代码移动到名为 api的文件夹。创建静态 Web 应用实例时，为 api_location 输入了此文件夹名称。

在 Visual Studio Code 中，按 F1 打开命令面板。
输入并选择终端：创建新终端（在活动工作区中）。
请确保位于项目的根文件夹中。
运行以下 git 命令，将 api-starter 文件夹重命名为 api。
```
git mv api-starter api
```
按 F1 打开命令面板。
输入并选择“Git:全部提交”。
输入提交消息 API ，然后按 Enter。

现在，可在 Visual Studio Code 资源管理器中看到 API 文件夹。 API 文件夹包含 Azure Functions 项目以及三个函数。

文件夹和文件	方法	路线
api/products-post	POST	`products`
api/products-put	PUT	`products/:id`
api/products-delete	DELETE	`products/:id`

创建 HTTP GET 函数

你的 API 具有用于为购物列表操作产品的路由，但它缺少用于获取产品的路线。现在添加它。

安装用于 Visual Studio Code 的 Azure Functions 扩展

可以使用适用于 Visual Studio Code 的 Azure Functions 扩展创建和管理 Azure Functions 应用程序。

转到 Visual Studio 市场，并安装适用于 Visual Studio Code 的 Azure Functions 扩展。
在 Visual Studio Code 中的扩展选项卡加载后，选择“安装”。
安装完成后，请选择“重载”。

注释

请务必安装 Azure Functions Core Tools，以便在本地运行 Azure Functions。

创建函数

现在，使用函数扩展 Azure Function 应用来获取产品。

在 Visual Studio Code 中，按 F1 打开命令面板。
输入并选择 Azure Functions：创建函数。
当系统提示创建函数时，请选择 “HTTP 触发器”。
输入 products-get 作为函数的名称。
选择 “匿名 ”作为身份验证级别。

注释

Functions 应用位于 api 文件夹中，它将它与单个 Web 应用项目分开。使用前端框架的所有 Web 应用都调用同一 API。你可以决定如何构造应用程序，但对于此示例，这有助于分开查看它们。

配置 HTTP 方法和路由终结点

请注意，文件夹 api/products-get 包含文件 function.json。此文件包含函数的配置。

按照惯例，路由终结点的名称与包含该函数的文件夹的名称相同。由于函数是在 products-get 文件夹中创建的，因此默认情况下，路由终结点将生成为 products-get。但是，你希望端点设为产品。

配置您的函数：

打开文件 api/products-get/function.json。
请注意，方法允许GET 和 POST这两者。
将方法数组更改为仅允许 GET 请求。
在方法数组后面添加一个 "route": "products" 条目。

现在，当 HTTP GET 请求发送到 products 时，函数就会被触发。 function.json 应类似于以下代码：

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "products"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

更新函数逻辑

文件夹中api/products-get 包含向路由发出 HTTP 请求时运行的逻辑。

需要更新该逻辑以获取产品。 JavaScript 模块 /shared/product-data.js中有数据访问逻辑。该 product-data 模块公开一个函数 getProducts 来获取购物清单的产品。

现在，更改函数终结点以返回产品：

打开文件 api/products-get/index.js。

将其内容替换为以下代码：

const data = require('../shared/product-data');

module.exports = async function (context, req) {
  try {
    const products = data.getProducts();
    context.res.status(200).json(products);
  } catch (error) {
    context.res.status(500).send(error);
  }
};

函数获取产品，并在成功时返回状态代码为 200 的产品。

发布到 Azure 静态 Web 应用时，无需担心 CORS。 Azure 静态 Web 应用会自动配置应用，使它可以使用反向代理与 Azure 上的 API 进行通信。但在本地运行时，需要配置 CORS 以允许 Web 应用和 API 进行通信。

现在，告知 Azure Functions 允许 Web 应用在计算机上向 API 发出 HTTP 请求。

创建名为 api/local.settings.json 的文件。

将以下内容添加到该文件：

{
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

{
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

{
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

{
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

注释

local.settings.json 文件会在 .gitignore 文件中列出，可防止此文件发布到 GitHub。该文件列在 .gitignore 中，因为你可能会在其中存储不希望保存在 GitHub 上的机密。此清单就是为什么在从模板创建存储库时必须创建文件的原因。

运行 API

现在是时候观察 Web 应用和 Azure Functions 项目协同工作了。首先，请按照以下步骤在本地运行 Azure Functions 项目：

注释

请务必安装 Azure Functions Core Tools，以便在本地运行 Azure Functions。

打开 git 终端并转到 api 文件夹：
```
cd api
```
在本地运行 Azure Functions 应用：
```
npm install
```
```
npm start
```

运行 Web 应用

API 正在运行。现在，需要将前端应用配置为向 API 发出 HTTP 请求。前端应用在一个端口上运行，API 在不同的端口（7071）上运行。可以将每个前端框架配置为安全地将 HTTP 请求代理到端口。

配置代理端口

使用以下步骤为前端应用配置代理：

打开文件 angular-app/proxy.conf.json。
找到 target: 'http://localhost:7071' 设置。
请注意，目标的端口指向 7071。

打开文件 react-app/package.json。
找到 "proxy": "http://localhost:7071/", 设置。
请注意，代理的端口指向 7071。

打开文件 svelte-app/rollup.config.js。
找到代码行const api = 'http://localhost:7071/api';。
请注意，API 的端口指向 7071。

打开文件 vue-app/vue.config.js。
找到 target: 'http://localhost:7071', 设置。
请注意，目标的端口指向 7071。

运行前端 Web 应用

API 已在端口 7071 上运行。现在，运行 Web 应用时，它会向 API 发出 HTTP 请求。按照以下步骤运行 Web 应用：

打开第二个 git 终端实例。
接下来，输入此命令以转到首选前端框架的文件夹：
```
cd angular-app
```
```
cd react-app
```
```
cd svelte-app
```
```
cd vue-app
```

运行前端客户端应用程序：

npm start

npm start

npm run dev

npm run serve

浏览到你的应用

现在是时候看看您的应用程序在本地如何与 Azure Functions API 对接运行了。

浏览到 http://localhost:4200。

浏览到 http://localhost:3000。

浏览到 http://localhost:5000。

浏览到 http://localhost:8080。

你生成了应用程序，现在它本地运行，向 API 发出 HTTP GET 请求。现在，通过在终端中按 Ctrl-C 停止正在运行的应用和 API。

后续步骤

应用在本地工作，下一步是使用 API 发布应用。