Een API toevoegen aan Azure Static Web Apps met Azure Functions

Artikel
05/08/2024

U kunt serverloze API's toevoegen aan Azure Static Web Apps die worden mogelijk gemaakt door Azure Functions. Dit artikel laat zien hoe u een API toevoegt en implementeert op een Azure Static Web Apps-site.

Notitie

De functies die standaard worden geleverd in Static Web Apps, zijn vooraf geconfigureerd om beveiligde API-eindpunten te bieden en bieden alleen ondersteuning voor door HTTP geactiveerde functies. Zie API-ondersteuning met Azure Functions voor informatie over hoe deze verschillen van zelfstandige Azure Functions-apps.

Vereisten

Azure-account met een actief abonnement.
- Als u geen account hebt, kunt u er gratis een maken.
Visual Studio Code.
Azure Static Web Apps-extensie voor Visual Studio Code.
Azure Functions-extensie voor Visual Studio Code.
Node.js v18 om de front-end-app en API uit te voeren.

Tip

U kunt het nvm-hulpprogramma gebruiken om meerdere versies van Node.js op uw ontwikkelsysteem te beheren. In Windows kan NVM voor Windows worden geïnstalleerd via Winget.

De statische web-app maken

Voordat u een API toevoegt, maakt en implementeert u een front-endtoepassing in Azure Static Web Apps door de quickstart Uw eerste statische site bouwen met Azure Static Web Apps te volgen.

Zodra u een front-endtoepassing hebt geïmplementeerd in Azure Static Web Apps, kloont u de app-opslagplaats. Als u bijvoorbeeld wilt klonen met behulp van de git opdrachtregel:

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

Open in Visual Studio Code de hoofdmap van de opslagplaats van uw app. De mapstructuur bevat de bron voor uw front-end-app en de GitHub-werkstroom Static Web Apps in de map .github/workflows .

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

De API maken

U maakt een Azure Functions-project voor de API van uw statische web-app. Standaard wordt met de Visual Studio Code-extensie static Web Apps het project gemaakt in een map met de naam API in de hoofdmap van uw opslagplaats.

Druk op F1 om het opdrachtenpalet te openen.
Selecteer Azure Static Web Apps: HTTP-functie maken.... Als u wordt gevraagd om de Azure Functions-extensie te installeren, installeert u deze en voert u deze opdracht opnieuw uit.
Voer de volgende waarden in als u hierom wordt gevraagd:

Prompt Weergegeven als

Een taal selecteren JavaScript

Een programmeermodel selecteren V3

Geef een functienaam op bericht

Tip

Meer informatie over de verschillen tussen programmeermodellen vindt u in de ontwikkelaarshandleiding voor Azure Functions

Er wordt een Azure Functions-project gegenereerd met een door HTTP geactiveerde functie. Uw app heeft nu een projectstructuur die vergelijkbaar is met het volgende voorbeeld.
```
├── .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)
```
Wijzig vervolgens de message functie om een bericht naar de front-end te retourneren. Werk de functie bij in api/message/index.js met de volgende code.
```
module.exports = async function (context, req) {
    context.res.json({
        text: "Hello from the API"
    });
};
```

Prompt	Weergegeven als
Een taal selecteren	JavaScript
Een programmeermodel selecteren	V3
Geef een functienaam op	bericht

Tip

U kunt meer API-functies toevoegen door de opdracht Azure Static Web Apps: HTTP-functie maken... opnieuw uit te voeren.

De front-end-app bijwerken om de API aan te roepen

Werk uw front-end-app bij om de API aan /api/message te roepen en het antwoordbericht weer te geven.

Als u de quickstarts hebt gebruikt om de app te maken, gebruikt u de volgende instructies om de updates toe te passen.

Werk de inhoud van het src/index.html-bestand bij met de volgende code om de tekst van de API-functie op te halen en weer te geven op het scherm.

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

Werk de inhoud van src/app/app.module.ts bij met de volgende code om in te schakelen HttpClient in uw app.

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

Werk de inhoud van src/app/app.component.ts bij met de volgende code om de tekst op te halen uit de API-functie en deze weer te geven op het scherm.

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

Werk de inhoud van src/App.js bij met de volgende code om de tekst op te halen uit de API-functie en deze weer te geven op het scherm.

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;

Werk de inhoud van src/App.vue bij met de volgende code om de tekst op te halen uit de API-functie en deze weer te geven op het scherm.

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

De front-end en API lokaal uitvoeren

Als u uw front-end-app en API lokaal wilt uitvoeren, biedt Azure Static Web Apps een CLI waarmee de cloudomgeving wordt geëmuleerd. De CLI gebruikt de Azure Functions Core Tools om de API uit te voeren.

Opdrachtregelprogramma's installeren

Zorg ervoor dat de benodigde opdrachtregelprogramma's zijn geïnstalleerd.

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

Tip

Als u de swa opdrachtregel niet globaal wilt installeren, kunt u deze gebruiken npx swa in plaats van swa in de volgende instructies.

Front-end-app bouwen

Als uw app gebruikmaakt van een framework, bouwt u de app om de uitvoer te genereren voordat u de Static Web Apps CLI uitvoert.

U hoeft de app niet te bouwen.

Installeer npm-afhankelijkheden en bouw de app in de map dist/angular-basic .

npm install
npm run build --prod

Installeer npm-afhankelijkheden en bouw de app in de buildmap .

npm install
npm run build

Installeer npm-afhankelijkheden en bouw de app in de dist-map .

npm install
npm run build

De toepassing lokaal uitvoeren

Voer de front-end-app en API samen uit door de app te starten met de Static Web Apps CLI. Door de twee onderdelen van uw toepassing op deze manier uit te voeren, kan de CLI de builduitvoer van uw front-end uit een map leveren en maakt de API toegankelijk voor de actieve app.

Start in de hoofdmap van uw opslagplaats de Static Web Apps CLI met de start opdracht. Pas de argumenten aan als uw app een andere mapstructuur heeft.
- Geen framework
- Angular
- React
- Vue
Geef de huidige map (src) en de API-map (api) door aan de CLI.
```
swa start src --api-location api
```
Geef de uitvoermap van de build (dist/angular-basic) en de API-map (api) door aan de CLI.
```
swa start dist/angular-basic --api-location api
```
Geef de uitvoermap van de build (build) en de API-map (api) door aan de CLI.
```
swa start build --api-location api
```
Geef de uitvoermap van de build (dist) en de API-map (api) door aan de CLI.
```
swa start dist --api-location api
```
Windows Firewall kan vragen om te vragen of de Azure Functions-runtime toegang heeft tot internet. Selecteer Toestaan.
Wanneer de CLI-processen worden gestart, opent u uw app op http://localhost:4280/. U ziet hoe de pagina de API aanroept en de uitvoer weergeeft. Hello from the API
Als u de CLI wilt stoppen, typt u Ctrl+C.

API-locatie toevoegen aan werkstroom

Voordat u uw app in Azure kunt implementeren, moet u de GitHub Actions-werkstroom van uw opslagplaats bijwerken met de juiste locatie van uw API-map.

Open uw werkstroom op .github/workflows/azure-static-web-apps-DEFAULT-HOSTNAME<>.yml.

Zoek de eigenschap api_location en stel de waarde in op 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 ######

Opmerking: de bovenstaande waarden van api_location ,output_locationapp_location zijn voor geen framework en deze waardewijzigingen zijn gebaseerd op framework.

Sla het bestand op.

Wijzigingen implementeren

Als u wijzigingen in uw statische web-app in Azure wilt publiceren, voert u uw code door en pusht u deze naar de externe GitHub-opslagplaats.

Druk op F1 om het opdrachtenpalet te openen.
Selecteer de Git: Alle opdracht doorvoeren.
Wanneer u wordt gevraagd om een doorvoerbericht, voert u feat in : API toevoegen en alle wijzigingen doorvoeren in uw lokale Git-opslagplaats.
Druk op F1 om het opdrachtenpalet te openen.
Selecteer de Git: push-opdracht .

Uw wijzigingen worden naar de externe opslagplaats in GitHub gepusht, waardoor de werkstroom Static Web Apps GitHub Actions wordt geactiveerd om uw app te bouwen en implementeren.
Open uw opslagplaats in GitHub om de status van uw werkstroomuitvoering te controleren.
Wanneer de uitvoering van de werkstroom is voltooid, gaat u naar uw statische web-app om uw wijzigingen weer te geven.

Volgende stappen

App-instellingen configureren

Delen via