你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站,请访问 https://docs.azure.cn。
使用 Azure Functions 将 API 添加到 Azure 静态 Web 应用
可以将无服务器 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 扩展。
- Node.js v18 运行前端应用和 API。
提示
可以使用 nvm 工具管理开发系统上多个版本的 Node.js。 在 Windows 上,NVM for Windows 可以通过 Winget 安装。
在添加 API 之前,按照使用 Azure Static Web Apps 生成第一个静态站点快速入门,创建前端应用程序并将其部署到 Azure Static Web Apps。
将前端应用程序部署到 Azure Static Web Apps 后,克隆应用存储库。 例如,可以使用 git
命令行来克隆存储库。
在运行以下命令之前,请确保将 <YOUR_GITHUB_USERNAME>
替换为你的 GitHub 用户名。
git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-first-static-web-app
在 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)
为静态 Web 应用的 API 创建 Azure Functions 项目。 默认情况下,Static Web Apps Visual Studio Code 扩展会在存储库根目录中名为“api”的文件夹中创建项目。
按 F1 打开命令面板。
选择“Azure Static Web Apps: 创建 HTTP 函数...”。如果系统提示安装 Azure Functions 扩展,请安装并重新运行此命令。
出现提示时,输入以下值:
Prompt 值 选择一种语言 JavaScript 选择编程模型 V4 提供函数名称 message 提示
可以在 Azure Functions 开发人员指南中详细了解编程模型之间的差异
使用 HTTP 触发的函数生成一个 Azure Functions 项目。 应用的项目结构现在类似于以下示例。
├── .github │ └── workflows │ └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml │ ├── api ├── └──src │ │ │ functions │ │ │ └── message.js │ │ └── index.js │ ├── .funcignore │ ├── host.json │ ├── local.settings.json │ ├── package-lock.json │ └── package.json │ └── (...plus other folders and files from your static web app)
接下来,更改
message
函数,以将消息返回到前端。 使用以下代码更新 src/functions/message.js 中的函数。const { app } = require('@azure/functions'); app.http('message', { methods: ['GET', 'POST'], authLevel: 'anonymous', handler: async (request, context) => { return { body: `Hello, from the API!` }; } });
提示
可以通过再次运行“Azure Static Web Apps:创建 HTTP 函数...”命令来添加更多 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>
若要在本地同时运行前端应用程序和 API,Azure Static Web Apps提供了模拟云环境的 CLI。 CLI 使用 Azure Functions Core Tools 来运行 API。
确保已安装了必要的命令行工具。
npm install -g @azure/static-web-apps-cli
提示
如果不想全局安装 swa
命令行,可以在以下说明中使用 npx swa
而不是 swa
。
如果应用使用框架,请构建应用以在运行 Static Web Apps CLI 之前生成输出。
通过使用 Static Web Apps CLI 启动应用来同时运行前端应用程序和 API。 通过这种方式运行应用程序的两个部分,CLI 可从文件夹提供前端的构建输出,使正在运行的应用可以访问 API。
在存储库的根目录下,使用
start
命令来启动 Static Web Apps CLI。 如果应用具有不同的文件夹结构,请调整参数。Windows 防火墙可能会进行提示,要求 Azure Functions 运行时可以访问 Internet。 选择允许。
当 CLI 进程启动时,在
http://localhost:4280/
上访问应用。 请注意页面如何调用 API 并显示其输出,Hello from the API
。若要停止 CLI,请按 Ctrl + C。
在将应用部署到 Azure 之前,请用 API 文件夹的正确位置更新存储库的 GitHub Actions 工作流。
在“.github/workflows/azure-static-web-apps-<DEFAULT-HOSTNAME>.yml”中打开工作流。
搜索属性
api_location
,并将值设置为api
。###### Repository/Build Configurations - These values can be configured to match your app requirements. ###### # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig app_location: "src" # App source code path api_location: "api" # Api source code path - optional output_location: "" # Built app content directory - optional ###### End of Repository/Build Configurations ######
注意:上述
api_location
、app_location
、output_location
值适用于无框架的情况,这些值因框架而异。保存文件。
若要将更改发布到 Azure 中的静态 Web 应用,请提交代码并将其推送到远程 GitHub 存储库。
按 F1 打开命令面板。
选择“Git: Commit All”命令。
当系统提示提交消息时,输入“feat: add API”,并将所有更改提交到本地 git 存储库。
按 F1 打开命令面板。
选择“Git: push”命令。
更改推送到 GitHub 中的远程存储库,触发 Static Web Apps GitHub 操作工作流构建和部署应用。
打开 GitHub 中的存储库,以监视工作流运行的状态。
工作流运行完成后,访问静态 Web 应用以查看更改。