练习 - 创建 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 的文件夹。你在创建 Static Web Apps 实例时为 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 Marketplace，安装适用于 Visual Studio Code 的 Azure Functions 扩展。
在 Visual Studio Code 中的扩展选项卡加载后，选择“安装”。
安装完成后，请选择“重载”。

注意

确保安装 Azure Functions Core Tools，以便在本地运行 AzureFunctions。

创建函数

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

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

注意

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

配置 HTTP 方法和路由终结点

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

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

配置函数：

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

现在，函数会在对 products 进行 HTTP GET 请求时触发。 function.json 应如以下代码所示：

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

更新函数逻辑

文件夹 api/products-get 中的文件 index.js 包含在对路由进行 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 Static Web Apps 时，无需担心 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。这是因为你可以在此文件中存储机密，而你不希望在 GitHub 中存储该内容。这便是为何在从模板创建存储库时，必须创建该文件。

运行 API

现在可以监视 Web 应用和 Azure Functions 项目一起工作。首先，执行以下步骤，在本地运行 Azure Functions 项目：

注意

确保安装 Azure Functions Core Tools，以便在本地运行 AzureFunctions。

打开 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 一起发布。