Hinzufügen einer API zu Azure Static Web Apps mit Azure Functions

Artikel
12/09/2024

Sie können Azure Static Web Apps mit Azure Functions-Unterstützung serverlose APIs hinzufügen. In diesem Artikel wird veranschaulicht, wie Sie eine API für eine Azure Static Web Apps-Website hinzufügen und bereitstellen.

Hinweis

Die Funktionen, die standardmäßig in Static Web Apps bereitgestellt werden, sind so vorkonfiguriert, dass sie sichere API-Endpunkte bereitstellen und nur HTTP-ausgelöste Funktionen unterstützen. Informationen zu den Unterschieden gegenüber eigenständigen Azure Functions-Apps finden Sie unter API-Unterstützung mit Azure Functions.

Voraussetzungen

Azure-Konto mit einem aktiven Abonnement
- Falls Sie kein Konto besitzen, können Sie kostenlos eines erstellen.
Visual Studio Code.
Azure Static Web Apps-Erweiterung für Visual Studio Code
Azure Functions-Erweiterung für Visual Studio Code
Node.js v18 zum Ausführen der Front-End-App und API

Tipp

Sie können das Tool nvm verwenden, um mehrere Versionen von Node.js auf Ihrem Entwicklungssystem zu verwalten. Unter Windows kann NVM für Windows über Winget installiert werden.

Erstellen der statischen Web-App

Befolgen Sie vor dem Hinzufügen einer API den Schnellstart: Erstellen Ihrer ersten statischen Website mit Azure Static Web Apps, um eine Front-End-App zu erstellen und in Azure Static Web Apps bereitzustellen.

Nachdem Sie eine Front-End-App in Azure Static Web Apps bereitgestellt haben, klonen Sie Ihr App-Repository. Beispielsweise können Sie Ihr Repository mithilfe der git-Befehlszeile klonen.

Bevor Sie den folgenden Befehl ausführen, müssen Sie <YOUR_GITHUB_USERNAME> durch Ihren GitHub-Benutzernamen ersetzen.

git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-first-static-web-app

Öffnen Sie in Visual Studio Code den Stamm des Repositorys Ihrer App. Die Ordnerstruktur enthält die Quelle für Ihre Front-End-App und den Static Web Apps GitHub-Workflow im Ordner .github/workflows.

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

Erstellen der API

Sie erstellen ein Azure Functions-Projekt für die API Ihrer statischen Web-App. Standardmäßig erstellt die Static Web Apps Visual Studio Code-Erweiterung das Projekt in einem Ordner namens api im Stammverzeichnis Ihres Repositorys.

Drücken Sie F1, um die Befehlspalette zu öffnen.
Wählen Sie Azure Static Web Apps: HTTP-Funktion erstellen... aus. Wenn Sie aufgefordert werden, die Azure Functions-Erweiterung zu installieren, installieren Sie sie, und führen Sie diesen Befehl erneut aus.

Geben Sie die folgenden Werte ein, wenn Sie dazu aufgefordert werden:

Prompt	Wert
Sprache auswählen	JavaScript
Programmiermodell auswählen	V4
Angeben eines Funktionsnamens	message

Tipp

Weitere Informationen zu den Unterschieden zwischen den Programmiermodellen finden Sie im Entwicklerhandbuch zu Azure Functions.

Ein Azure Functions-Projekt wird mit einer HTTP-ausgelösten Funktion generiert. Ihre App besitzt jetzt eine Projektstruktur, die dem folgenden Beispiel ähnelt.

├── .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)

Als Nächstes ändern Sie die message-Funktion, um eine Nachricht an das Front-End zurückzugeben. Aktualisieren Sie die Funktion in src/functions/message.js mit dem folgenden Code.

const { app } = require('@azure/functions');

app.http('message', {
    methods: ['GET', 'POST'],
    authLevel: 'anonymous',
    handler: async (request, context) => {
        return { body: `Hello, from the API!` };
    }
});

Tipp

Sie können weitere API-Funktionen hinzufügen, indem Sie den Befehl Azure Static Web Apps: HTTP-Funktion erstellen... erneut ausführen.

Aktualisieren der Front-End-App zum Aufrufen der API

Aktualisieren Sie Ihre Front-End-App, um die API unter /api/message aufzurufen und die Antwortnachricht anzuzeigen.

Wenn Sie die Schnellstartanleitungen zum Erstellen der App verwendet haben, befolgen Sie die folgenden Anweisungen, um die Updates anzuwenden.

Aktualisieren Sie den Inhalt der Datei src/index.html mit dem folgenden Code, um den Text aus der API-Funktion abzurufen und auf dem Bildschirm anzuzeigen.

<!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>

Aktualisieren Sie den Inhalt von src/app/app.module.ts mit dem folgenden Code, um HttpClient in Ihrer App zu aktivieren.

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 {}

Aktualisieren Sie den Inhalt der Datei src/app/app.component.ts mit dem folgenden Code, um den Text aus der API-Funktion abzurufen und auf dem Bildschirm anzuzeigen.

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);
  }
}

Aktualisieren Sie den Inhalt der Datei src/App.js mit dem folgenden Code, um den Text aus der API-Funktion abzurufen und auf dem Bildschirm anzuzeigen.

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;

Aktualisieren Sie den Inhalt der Datei src/App.vue mit dem folgenden Code, um den Text aus der API-Funktion abzurufen und auf dem Bildschirm anzuzeigen.

<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>

Lokales Ausführen von Front-End und API

Um Ihre Front-End-App und API zusammen lokal auszuführen, bietet Azure Static Web Apps eine CLI, die die Cloudumgebung emuliert. Die CLI nutzt die Azure Functions Core Tools zum Ausführen der API.

Installieren von Befehlszeilentools

Stellen Sie sicher, dass die erforderlichen Befehlszeilentools installiert sind.

Wichtig

Um die Sicherheit von Bereitstellungen aus der Static Web Apps CLI zu verbessern, wurde ein Breaking Change eingeführt, der es erforderlich macht, bis zum 15. Januar 2025 ein Upgrade auf die neueste Version (2.0.2) der Static Web Apps CLI durchzuführen.

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

Tipp

Wenn Sie die swa-Befehlszeile nicht global installieren möchten, können Sie npx swa anstelle von swa in den folgenden Anweisungen verwenden.

Erstellen der Front-End-App

Wenn Ihre App ein Framework verwendet, erstellen Sie die App, um die Ausgabe zu generieren, bevor Sie die Static Web Apps-CLI ausführen.

Es ist nicht erforderlich, die App zu erstellen.

Installieren Sie npm-Abhängigkeiten, und erstellen Sie die App in den Ordner „dist/angular-basic“.

npm install
npm run build --prod

Installieren Sie npm-Abhängigkeiten, und erstellen Sie die App im Ordner build.

npm install
npm run build

Installieren Sie npm-Abhängigkeiten, und erstellen Sie die App im Ordner dist.

npm install
npm run build

Lokales Ausführen der Anwendung

Führen Sie die Front-End-App und API zusammen aus, indem Sie die App mit der Static Web Apps-CLI starten. Wenn Sie die beiden Teile Ihrer Anwendung auf diese Weise ausführen, kann die CLI die Buildausgabe Ihres Front-End aus einem Ordner bereitstellen und die API für die ausgeführte App zugänglich machen.

Starten Sie im Stammverzeichnis Ihres Repositorys die Static Web Apps-CLI mit dem Befehl start. Passen Sie die Argumente an, wenn Ihre App eine andere Ordnerstruktur aufweist.
- Kein Framework
- Angular
- React
- Vue
Übergeben Sie den aktuellen Ordner (src) und den API-Ordner (api) an die CLI.
```
swa start src --api-location api
```
Übergeben Sie den Buildausgabeordner (dist/angular-basic) und den API-Ordner (api) an die CLI.
```
swa start dist/angular-basic --api-location api
```
Übergeben Sie den Buildausgabeordner (build) und den API-Ordner (api) an die CLI.
```
swa start build --api-location api
```
Übergeben Sie den Buildausgabeordner (dist) und den API-Ordner (api) an die CLI.
```
swa start dist --api-location api
```
Die Windows-Firewall fordert möglicherweise zur Bestätigung auf, dass die Azure Functions-Runtime auf das Internet zugreifen kann. Klicken Sie auf Zulassen.
Wenn die CLI-Prozesse gestartet werden, greifen Sie unter http://localhost:4280/ auf Ihre App zu. Beachten Sie, wie die Seite die API aufruft und ihre Ausgabe Hello from the API anzeigt.
Um die CLI zu beenden, drücken Sie STRG+C.

Hinzufügen eines API-Speicherorts zum Workflow

Bevor Sie Ihre App in Azure bereitstellen können, aktualisieren Sie den GitHub Actions-Workflow Ihres Repositorys mit dem richtigen Speicherort Ihres API-Ordners.

Öffnen Sie Ihren Workflow unter .github/workflows/azure-static-web-apps-<DEFAULT-HOSTNAME>.yml.

Suchen Sie nach der Eigenschaft api_location, und legen Sie den Wert auf api fest.

###### 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 ######

Hinweis: Die oben genannten Werte von api_location ,app_location und output_location gelten für kein Framework, und diese Werte ändern sich je nach Framework.

Speichern Sie die Datei.

Bereitstellen von Änderungen

Um Änderungen an Ihrer statischen Web-App in Azure zu veröffentlichen, committen Sie Ihren Code, und pushen Sie ihn in das GitHub-Remoterepository.

Drücken Sie F1, um die Befehlspalette zu öffnen.
Wählen Sie den Befehl Git: Commit All aus.
Wenn Sie zur Eingabe einer Commitnachricht aufgefordert werden, geben Sie feat: add API ein, und committen Sie alle Änderungen in Ihr lokales Git-Repository.
Drücken Sie F1, um die Befehlspalette zu öffnen.
Wählen Sie den Befehl Git: push aus.

Ihre Änderungen werden in das Remoterepository in GitHub gepusht, was den Static Web Apps GitHub Actions-Workflow zum Erstellen und Bereitstellen Ihrer App auslöst.
Öffnen Sie Ihr Repository in GitHub, um den Status Ihrer Workflowausführung zu überwachen.
Wenn die Workflowausführung abgeschlossen ist, besuchen Sie Ihre statische Web-App, um Ihre Änderungen anzuzeigen.

Nächste Schritte

Konfigurieren von App-Einstellungen

Freigeben über

Hinzufügen einer API zu Azure Static Web Apps mit Azure Functions

Voraussetzungen

Erstellen der statischen Web-App

Erstellen der API

Aktualisieren der Front-End-App zum Aufrufen der API

Lokales Ausführen von Front-End und API

Installieren von Befehlszeilentools

Erstellen der Front-End-App

Lokales Ausführen der Anwendung

Hinzufügen eines API-Speicherorts zum Workflow

Bereitstellen von Änderungen

Nächste Schritte

Feedback

Zusätzliche Ressourcen