你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

使用 Azure Functions 将 API 添加到 Azure 静态 Web 应用

项目
11/08/2023

可以将无服务器 API 添加到由 Azure Functions 提供支持的 Azure Static Web Apps。本文演示如何将 API 添加和部署到 Azure 静态 Web 应用站点。

注意

默认情况下，Static Web Apps 中提供的函数是预先配置的，以提供安全 API 终结点，并且仅支持 HTTP 触发的函数。请参阅通过 Azure Functions 提供 API 支持，了解它们与独立 Azure Functions 应用的不同之处。

先决条件

具有有效订阅的 Azure 帐户。
- 如果没有帐户，可以免费创建一个。
Visual Studio Code
Visual Studio Code 的 Azure Static Web Apps 扩展
适用于 Visual Studio Code 的 Azure Functions 扩展
用于运行前端应用程序和 API 的 Node.js

创建静态 Web 应用

添加 API 之前，请创建前端应用程序并将其部署到 Azure Static Web Apps。使用已部署的现有应用，或按照使用 Azure Static Web Apps 构建第一个静态站点快速入门来创建一个。

在 Visual Studio Code 中，打开应用存储库的根目录。文件夹结构包含前端应用程序的源和“.github/workflows”文件夹中的 Static Web Apps GitHub 工作流。

├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
└── (folders and files from your static web app)

创建 API

为静态 Web 应用的 API 创建 Azure Functions 项目。默认情况下，Static Web Apps Visual Studio Code 扩展会在存储库根目录中名为“api”的文件夹中创建项目。

按 F1 打开命令面板。
选择“Azure Static Web Apps: 创建 HTTP 函数...”。如果系统提示安装 Azure Functions 扩展，请安装并重新运行此命令。

出现提示时，输入以下值：

Prompt	值
选择一种语言	JavaScript
选择编程模型	V3
提供函数名称	message

提示

可以在 Azure Functions 开发人员指南中详细了解编程模型之间的差异

使用 HTTP 触发的函数生成一个 Azure Functions 项目。应用的项目结构现在类似于以下示例。

├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
├── api
│   ├── message
│   │   ├── function.json
│   │   └── index.js
│   ├── host.json
│   ├── local.settings.json
│   └── package.json
│
└── (folders and files from your static web app)

接下来，更改 message 函数，以将消息返回到前端。使用以下代码更新“api/message/index.js”中的函数。
```
module.exports = async function (context, req) {
    context.res.json({
        text: "Hello from the API"
    });
};
```

提示

可以通过再次运行“Azure Static Web Apps：创建 HTTP 函数...”命令来添加更多 API 函数。

更新前端应用程序以调用 API

更新前端应用程序以调用 /api/message 下的 API，并显示响应消息。

如果使用快速入门创建了应用，请使用以下说明来应用更新。

使用以下代码更新 src/index.html 文件的内容，以便从 API 函数中提取文本并将其显示在屏幕上。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Vanilla JavaScript App</title>
</head>

<body>
    <main>
    <h1>Vanilla JavaScript App</h1>
    <p>Loading content from the API: <b id="name">...</b></p>
    </main>

    <script>
    (async function() {
        const { text } = await( await fetch(`/api/message`)).json();
        document.querySelector('#name').textContent = text;
    }());
    </script>
</body>

</html>

使用以下代码更新“src/app/app.module.ts”的内容，以便在应用中启用 HttpClient。

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

使用以下代码更新“src/app/app.component.ts”的内容，以便从 API 函数中提取文本并将其显示在屏幕上。

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div>{{message}}</div>`,
})
export class AppComponent {
  message = '';

  constructor(private http: HttpClient) {
    this.http.get('/api/message')
      .subscribe((resp: any) => this.message = resp.text);
  }
}

使用以下代码更新“src/App.js”的内容，以便从 API 函数中提取文本并将其显示在屏幕上。

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState('');

  useEffect(() => {
    (async function () {
      const { text } = await( await fetch(`/api/message`)).json();
      setData(text);
    })();
  });

  return <div>{data}</div>;
}

export default App;

使用以下代码更新“src/App.vue”的内容，以便从 API 函数中提取文本并将其显示在屏幕上。

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: ""
    };
  },
  async mounted() {
    const { text } = await (await fetch("/api/message")).json();
    this.message = text;
  }
};
</script>

在本地运行前端和 API

若要在本地同时运行前端应用程序和 API，Azure Static Web Apps提供了模拟云环境的 CLI。 CLI 使用 Azure Functions Core Tools 来运行 API。

安装命令行工具

确保已安装了必要的命令行工具。

npm install -D @azure/static-web-apps-cli

构建前端应用程序

如果应用使用框架，请构建应用以在运行 Static Web Apps CLI 之前生成输出。

无需构建应用。

安装 npm 依赖项并在 dist/angular-basic 文件夹中生成应用。

npm install
npm run build --prod

安装 npm 依赖项并在 build 文件夹中生成应用。

npm install
npm run build

安装 npm 依赖项并在 dist 文件夹中生成应用。

npm install
npm run build

启动 CLI

通过使用 Static Web Apps CLI 启动应用来同时运行前端应用程序和 API。通过这种方式运行应用程序的两个部分，CLI 可从文件夹提供前端的构建输出，使正在运行的应用可以访问 API。

在存储库的根目录下，使用 start 命令来启动 Static Web Apps CLI。如果应用具有不同的文件夹结构，请调整参数。
- 无框架
- Angular
- React
- Vue
将当前文件夹 (src) 和 API 文件夹 (api) 传递到 CLI。
```
swa start src --api-location api
```
将构建输出文件夹 (dist/angular-basic) 和 API 文件夹 (api) 传递到 CLI。
```
swa start dist/angular-basic --api-location api
```
将构建输出文件夹 (build) 和 API 文件夹 (api) 传递到 CLI。
```
swa start build --api-location api
```
将构建输出文件夹 (dist) 和 API 文件夹 (api) 传递到 CLI。
```
swa start dist --api-location api
```
当 CLI 进程启动时，在 http://localhost:4280/ 上访问应用。请注意页面如何调用 API 并显示其输出，Hello from the API。
若要停止 CLI，请按 Ctrl + C。

将 API 位置添加到工作流

在将应用部署到 Azure 之前，请用 API 文件夹的正确位置更新存储库的 GitHub Actions 工作流。

在“.github/workflows/azure-static-web-apps-<DEFAULT-HOSTNAME>.yml”中打开工作流。
搜索属性 api_location，并将值设置为 api。
保存文件。

部署更改

若要将更改发布到 Azure 中的静态 Web 应用，请提交代码并将其推送到远程 GitHub 存储库。

按 F1 打开命令面板。
选择“Git: Commit All”命令。
当系统提示提交消息时，输入“feat: add API”，并将所有更改提交到本地 git 存储库。
按 F1 打开命令面板。
选择“Git: push”命令。

更改推送到 GitHub 中的远程存储库，触发 Static Web Apps GitHub 操作工作流构建和部署应用。
打开 GitHub 中的存储库，以监视工作流运行的状态。
工作流运行完成后，访问静态 Web 应用以查看更改。

后续步骤

配置应用设置