使用 Azure Functions 將 API 新增至 Azure Static Web Apps

發行項
05/08/2024

您可以將無伺服器 API 新增至 Azure Functions 所提供的 Azure Static Web Apps。本文示範如何將 API 新增及部署至 Azure Static Web Apps 網站。

注意

靜態 Web Apps 中預設提供的函式已預先設定為提供安全的 API 端點，且僅支援 HTTP 觸發的函式。如需與獨立 Azure Functions 應用程式有何不同的詳細資訊，請參閱 Azure Functions 的 API 支援。

必要條件

具有有效訂用帳戶的 Azure 帳戶。
- 如果您沒有帳戶，您可以免費建立帳戶。
Visual Studio Code \(英文\)。
適用於 Visual Studio Code 的 Azure Static Web Apps 擴充功能。
適用於 Visual Studio Code 的 Azure Functions 擴充功能。
Node.js v18 來執行前端應用程式和 API。

提示

您可以使用 nvm 工具來管理開發系統上多個版本的Node.js。在 Windows 上，可以透過 Winget 安裝適用於 Windows 的 NVM。

建立靜態 Web 應用程式

新增 API 之前，請遵循使用 Azure Static Web Apps 建置您的第一個靜態網站快速入門，建立前端應用程式並將其部署至 Azure Static Web Apps 。

將前端應用程式部署至 Azure Static Web Apps 之後，請複製您的應用程式存放庫。例如，若要使用 git 命令列複製：

git clone https://github.com/my-username/my-first-static-web-app

在 Visual Studio Code 中，開啟您應用程式存放庫的根目錄。資料夾結構包含前端應用程式的來源，以及 .github/workflows 資料夾中的靜態 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 靜態 Web 應用程式：建立 HTTP 函式...]。如果系統提示您安裝 Azure Functions 擴充功能，請加以安裝並重新執行此命令。

當系統提示時，輸入下列值：

提示	值
選取語言	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， /api/message 並顯示回應訊息。

如果您使用快速入門來建立應用程式，請使用下列指示來套用更新。

使用下列程式代碼更新 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 -g @azure/static-web-apps-cli

提示

如果您不想全域安裝 swa 命令列，您可以在 npx swa 下列指示中使用，而不是 swa 。

建置前端應用程式

如果您的應用程式使用架構，請先建置應用程式以產生輸出，再執行靜態 Web Apps CLI。

不需要建置應用程式。

安裝 npm 相依性，並將應用程式建置至 dist/angular-basic 資料夾。

npm install
npm run build --prod

安裝 npm 相依性，並將應用程式建置至組建資料夾。

npm install
npm run build

安裝 npm 相依性，並將應用程式建置到 dist 資料夾中。

npm install
npm run build

在本機執行應用程式

使用靜態 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
```
Windows 防火牆可能會提示要求 Azure Functions 運行時間可以存取因特網。選取允許。
當 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。

###### 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_locationapp_locationoutput_location不針對任何架構，且這些值會根據架構而變更。

儲存檔案。

部署變更

若要在 Azure 中將變更發佈至靜態 Web 應用程式，請將程式代碼認可並推送至遠端 GitHub 存放庫。

按下 F1 以開啟 [命令選擇區]。
選取 [Git：認可全部] 命令。
當系統提示您輸入認可訊息時，請輸入 壯舉：新增API ，並將所有變更認可至本機 Git 存放庫。
按下 F1 以開啟 [命令選擇區]。
選取 Git：push 命令。

您的變更會推送至 GitHub 中的遠端存放庫，並觸發靜態 Web Apps GitHub Actions 工作流程來建置和部署您的應用程式。
在 GitHub 中開啟您的存放庫，以監視工作流程執行的狀態。
當工作流程執行完成時，請造訪靜態 Web 應用程式以檢視您的變更。

下一步

設定應用程式設定

共用方式為