Lägga till ett API i Azure Static Web Apps med Azure Functions

Artikel
05/08/2024

Du kan lägga till serverlösa API:er i Azure Static Web Apps som drivs av Azure Functions. Den här artikeln visar hur du lägger till och distribuerar ett API till en Azure Static Web Apps-webbplats.

Kommentar

Funktionerna som tillhandahålls som standard i Static Web Apps är förkonfigurerade för att tillhandahålla säkra API-slutpunkter och stöder endast HTTP-utlösta funktioner. Mer information om hur de skiljer sig från fristående Azure Functions-appar finns i API-stöd med Azure Functions .

Förutsättningar

Azure-konto med en aktiv prenumeration.
- Om du inte har något konto kan du skapa ett kostnadsfritt.
Visual Studio Code.
Azure Static Web Apps-tillägget för Visual Studio Code.
Azure Functions-tillägget för Visual Studio Code.
Node.js v18 för att köra klientdelsappen och API:et.

Dricks

Du kan använda nvm-verktyget för att hantera flera versioner av Node.js i ditt utvecklingssystem. I Windows kan NVM för Windows installeras via Winget.

Skapa den statiska webbappen

Innan du lägger till ett API skapar och distribuerar du ett klientdelsprogram till Azure Static Web Apps genom att följa snabbstarten Skapa din första statiska webbplats med Azure Static Web Apps .

När du har distribuerat ett klientdelsprogram till Azure Static Web Apps klonar du din applagringsplats. Om du till exempel vill klona med hjälp av kommandoraden git :

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

Öppna roten för appens lagringsplats i Visual Studio Code. Mappstrukturen innehåller källan för klientdelsappen och GitHub-arbetsflödet för Static Web Apps i mappen .github/workflows .

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

Skapa API:et

Du skapar ett Azure Functions-projekt för din statiska webbapps API. Som standard skapar Visual Studio Code-tillägget Static Web Apps projektet i en mapp med namnet API i roten på lagringsplatsen.

Tryck på F1 för att öppna kommandopaletten.
Välj Azure Static Web Apps: Skapa HTTP-funktion.... Om du uppmanas att installera Azure Functions-tillägget installerar du det och kör det här kommandot igen.
När du uppmanas till det anger du följande värden:

Prompt Värde

Välj ett språk JavaScript

Välj en programmeringsmodell V3

Ange ett funktionsnamn meddelande

Dricks

Du kan lära dig mer om skillnaderna mellan programmeringsmodeller i utvecklarguiden för Azure Functions

Ett Azure Functions-projekt genereras med en HTTP-utlöst funktion. Din app har nu en projektstruktur som liknar följande exempel.
```
├── .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)
```
Ändra message sedan funktionen för att returnera ett meddelande till klientdelen. Uppdatera funktionen i api/message/index.js med följande kod.
```
module.exports = async function (context, req) {
    context.res.json({
        text: "Hello from the API"
    });
};
```

Prompt	Värde
Välj ett språk	JavaScript
Välj en programmeringsmodell	V3
Ange ett funktionsnamn	meddelande

Dricks

Du kan lägga till fler API-funktioner genom att köra kommandot Azure Static Web Apps: Skapa HTTP-funktion... igen.

Uppdatera klientdelsappen för att anropa API:et

Uppdatera klientdelsappen för att anropa API:et och /api/message visa svarsmeddelandet.

Om du använde snabbstarterna för att skapa appen använder du följande instruktioner för att tillämpa uppdateringarna.

Uppdatera innehållet i src/index.html-filen med följande kod för att hämta texten från API-funktionen och visa den på skärmen.

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

Uppdatera innehållet i src/app/app.module.ts med följande kod för att aktivera HttpClient i din 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 {}

Uppdatera innehållet i src/app/app.component.ts med följande kod för att hämta texten från API-funktionen och visa den på skärmen.

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

Uppdatera innehållet i src/App.js med följande kod för att hämta texten från API-funktionen och visa den på skärmen.

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;

Uppdatera innehållet i src/App.vue med följande kod för att hämta texten från API-funktionen och visa den på skärmen.

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

Kör klientdelen och API:et lokalt

Om du vill köra klientdelsappen och API:et tillsammans lokalt tillhandahåller Azure Static Web Apps ett CLI som emulerar molnmiljön. CLI använder Azure Functions Core Tools för att köra API:et.

Installera kommandoradsverktyg

Se till att du har de nödvändiga kommandoradsverktygen installerade.

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

Dricks

Om du inte vill installera kommandoraden swa globalt kan du använda npx swa i stället för swa i följande instruktioner.

Skapa klientdelsapp

Om din app använder ett ramverk skapar du appen för att generera utdata innan du kör Static Web Apps CLI.

Du behöver inte skapa appen.

Installera npm-beroenden och skapa appen i mappen dist/angular-basic .

npm install
npm run build --prod

Installera npm-beroenden och skapa appen i byggmappen.

npm install
npm run build

Installera npm-beroenden och skapa appen i dist-mappen .

npm install
npm run build

Köra appen lokalt

Kör klientdelsappen och API:et tillsammans genom att starta appen med Static Web Apps CLI. Genom att köra de två delarna av programmet på det här sättet kan CLI hantera klientdelens byggutdata från en mapp och göra API:et tillgängligt för appen som körs.

Starta Static Web Apps CLI med kommandot i roten start på lagringsplatsen. Justera argumenten om din app har en annan mappstruktur.
- Inget ramverk
- Angular
- React
- Vue
Skicka den aktuella mappen (src) och API-mappen (api) till CLI.
```
swa start src --api-location api
```
Skicka utdatamappen för bygget (dist/angular-basic) och API-mappen (api) till CLI.
```
swa start dist/angular-basic --api-location api
```
Skicka utdatamappen för bygget (build) och API-mappen (api) till CLI.
```
swa start build --api-location api
```
Skicka utdatamappen för bygget (dist) och API-mappen (api) till CLI.
```
swa start dist --api-location api
```
Windows-brandväggen kan uppmanas att begära att Azure Functions-körningen kan komma åt Internet. Markera Tillåt.
När CLI-processerna startar får du åtkomst till din app på http://localhost:4280/. Observera hur sidan anropar API:et och visar dess utdata, Hello from the API.
Om du vill stoppa CLI skriver du Ctrl + C.

Lägga till API-plats i arbetsflödet

Innan du kan distribuera din app till Azure uppdaterar du lagringsplatsens GitHub Actions-arbetsflöde med rätt plats för DIN API-mapp.

Öppna arbetsflödet på .github/workflows/azure-static-web-apps-DEFAULT-HOSTNAME><.yml.

Sök efter egenskapen api_location och ange värdet till 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: "/" # App source code path
api_location: "api" # Api source code path - optional
output_location: "build" # Built app content directory - optional
###### End of Repository/Build Configurations ######

Spara filen.

Distribuera ändringar

Om du vill publicera ändringar i din statiska webbapp i Azure checkar du in och push-överför koden till den fjärranslutna GitHub-lagringsplatsen.

Tryck på F1 för att öppna kommandopaletten.
Välj kommandot Git: Commit All (Git: Commit All).
När du uppmanas att skicka ett incheckningsmeddelande anger du feat: lägg till API och checka in alla ändringar på din lokala git-lagringsplats.
Tryck på F1 för att öppna kommandopaletten.
Välj kommandot Git: push.

Dina ändringar skickas till fjärrlagringsplatsen i GitHub, vilket utlöser GitHub Actions-arbetsflödet för Static Web Apps för att skapa och distribuera din app.
Öppna lagringsplatsen i GitHub för att övervaka statusen för din arbetsflödeskörning.
När arbetsflödet körs går du till din statiska webbapp för att visa dina ändringar.

Nästa steg

Konfigurera appinställningar

Dela via

Lägga till ett API i Azure Static Web Apps med Azure Functions

Förutsättningar

Skapa den statiska webbappen

Skapa API:et

Uppdatera klientdelsappen för att anropa API:et

Kör klientdelen och API:et lokalt

Installera kommandoradsverktyg

Skapa klientdelsapp

Köra appen lokalt

Lägga till API-plats i arbetsflödet

Distribuera ändringar

Nästa steg

Ytterligare resurser