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

發行項
12/09/2023

您可以將無伺服器 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 擴充功能 \(英文\)
要執行前端應用程式和 API 的 Node.js

建立靜態 Web 應用程式

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

在 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 -D @azure/static-web-apps-cli

建置前端應用程式

如果您的應用程式使用架構，請先建置應用程式以產生輸出，再執行靜態 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

啟動 CLI

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

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

下一步

設定應用程式設定