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

Artikel
06/01/2023

Sie können Azure Static Web Apps, die von Azure Functions unterstützt werden, 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 zum Ausführen der Front-End-App und API

Erstellen der statischen Web-App

Erstellen Sie vor dem Hinzufügen einer API eine Front-End-Anwendung, und stellen Sie sie in Azure Static Web Apps bereit. Verwenden Sie eine vorhandene App, die Sie bereits bereitgestellt haben, oder erstellen Sie eine, indem Sie den Schnellstart Erstellen Ihrer ersten statischen Site mit Azure Static Web Apps befolgen.

Ö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

Auswählen eines Programmiermodells Version 3

Angeben eines Funktionsnamens Nachricht

Tipp

Weitere Informationen zu den Unterschieden zwischen Programmiermodellen finden Sie im Entwicklerhandbuch für 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
│   ├── message
│   │   ├── function.json
│   │   └── index.js
│   ├── host.json
│   ├── local.settings.json
│   └── package.json
│
└── (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 unter api/message/index.js mit dem folgenden Code.
```
module.exports = async function (context, req) {
    context.res.json({
        text: "Hello from the API"
    });
};
```

Prompt	Wert
Sprache auswählen	JavaScript
Auswählen eines Programmiermodells	Version 3
Angeben eines Funktionsnamens	Nachricht

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.

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

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

Starten der CLI

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