API hozzáadása az Azure Static Web Appshez az Azure Functions használatával

Cikk
12/06/2024

Kiszolgáló nélküli API-kat adhat hozzá az Azure Functions által működtetett Azure Static Web Appshez. Ez a cikk bemutatja, hogyan adhat hozzá és helyezhet üzembe API-t egy Azure Static Web Apps-webhelyen.

Feljegyzés

A Static Web Appsben alapértelmezés szerint biztosított függvények előre konfigurálva vannak, hogy biztonságos API-végpontokat biztosítsanak, és csak a HTTP által aktivált függvényeket támogatják. Az Önálló Azure Functions-alkalmazásoktól való eltérésről további információt az Azure Functions API-támogatásában talál.

Előfeltételek

Aktív előfizetéssel rendelkező Azure-fiók.
- Ha nincs fiókja, ingyenesen létrehozhat egyet.
Visual Studio Code.
Azure Static Web Apps-bővítmény a Visual Studio Code-hoz.
Azure Functions-bővítmény a Visual Studio Code-hoz.
Node.js v18-at az előtérbeli alkalmazás és az API futtatásához.

Tipp.

Az nvm eszközzel több Node.js is felügyelhet a fejlesztői rendszeren. Windows rendszeren a Windows NVM a Wingeten keresztül telepíthető.

A statikus webalkalmazás létrehozása

API hozzáadása előtt hozzon létre és helyezzen üzembe egy előtéralkalmazást az Azure Static Web Appsben az Első statikus webhely létrehozása az Azure Static Web Apps rövid útmutatójával.

Miután üzembe helyezett egy előtéralkalmazást az Azure Static Web Appsben, klónozza az alkalmazásadattárat. Az adattárat például a git parancssor használatával klónozhatja.

A következő parancs futtatása előtt cserélje le <YOUR_GITHUB_USERNAME> a GitHub-felhasználónevét.

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

Nyissa meg az alkalmazás adattárának gyökerét a Visual Studio Code-ban. A mappastruktúra tartalmazza az előtérbeli alkalmazás forrását és a Static Web Apps GitHub-munkafolyamatot a .github/workflows mappában.

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

Az API létrehozása

Azure Functions-projektet hoz létre a statikus webalkalmazás API-ja számára. Alapértelmezés szerint a Static Web Apps Visual Studio Code bővítmény egy API nevű mappában hozza létre a projektet az adattár gyökerében.

Nyissa meg a Parancskatalógust az F1 billentyűvel.
Válassza az Azure Static Web Apps: HTTP-függvény létrehozása... lehetőséget. Ha a rendszer kéri az Azure Functions-bővítmény telepítését, telepítse, és futtassa újra ezt a parancsot.
Amikor a rendszer kéri, adja meg a következő értékeket:

Felszólítás Érték

Válasszon nyelvet JavaScript

Programozási modell kiválasztása V4

Függvénynév megadása üzenet

Tipp.

A programozási modellek közötti különbségekről az Azure Functions fejlesztői útmutatójában olvashat bővebben

Egy Azure Functions-projekt egy HTTP által aktivált függvénnyel jön létre. Az alkalmazás most már az alábbi példához hasonló projektstruktúrával rendelkezik.
```
├── .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)
```

Felszólítás	Érték
Válasszon nyelvet	JavaScript
Programozási modell kiválasztása	V4
Függvénynév megadása	üzenet

Ezután módosítsa a függvényt message úgy, hogy egy üzenetet adjon vissza az előtérnek. Frissítse az src/functions/message.js függvényt az alábbi kóddal.

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

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

Tipp.

További API-függvényeket az Azure Static Web Apps: HTTP-függvény létrehozása... parancs ismételt futtatásával adhat hozzá.

Az előtérbeli alkalmazás frissítése az API meghívásához

Frissítse az előtérbeli alkalmazást, hogy meghívja az API-t, /api/message és megjelenítse a válaszüzenetet.

Ha a rövid útmutatók segítségével hozta létre az alkalmazást, a frissítések alkalmazásához kövesse az alábbi utasításokat.

Frissítse a src/index.html fájl tartalmát a következő kóddal, hogy lekérje a szöveget az API-függvényből, és megjelenítse a képernyőn.

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

Frissítse az src/app/app.module.ts tartalmát az alábbi kóddal az alkalmazásban való engedélyezéshezHttpClient.

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

Frissítse az src/app/app.component.ts tartalmát a következő kóddal, hogy lekérje a szöveget az API-függvényből, és megjelenítse azt a képernyőn.

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

Frissítse az src/App.js tartalmát a következő kóddal, hogy lekérje a szöveget az API-függvényből, és megjelenítse azt a képernyőn.

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;

Frissítse az src/App.vue tartalmát a következő kóddal, hogy lekérje a szöveget az API-függvényből, és megjelenítse azt a képernyőn.

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

Az előtér és az API helyi futtatása

Az előtéralkalmazás és az API helyi együttes futtatásához az Azure Static Web Apps egy cli-t biztosít, amely a felhőkörnyezetet emulálja. A parancssori felület az Azure Functions Core Tools használatával futtatja az API-t.

Parancssori eszközök telepítése

Győződjön meg arról, hogy telepítve vannak a szükséges parancssori eszközök.

Fontos

A Static Web Apps cli-ből származó központi telepítések biztonságának javítása érdekében egy olyan kompatibilitástörő változás jelent meg, amely megköveteli, hogy 2025. január 15-ig frissítsen a Static Web Apps CLI legújabb (2.0.2) verziójára.

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

Tipp.

Ha nem szeretné globálisan telepíteni a swa parancssort, az alábbi utasítások helyett használhatja npx swaswa .

Előtérbeli alkalmazás létrehozása

Ha az alkalmazás keretrendszert használ, hozza létre az alkalmazást a kimenet létrehozásához a Static Web Apps parancssori felület futtatása előtt.

Nincs szükség az alkalmazás összeállítására.

Telepítse az npm-függőségeket, és hozza létre az alkalmazást a dist/angular-basic mappába.

npm install
npm run build --prod

Telepítse az npm-függőségeket, és hozza létre az alkalmazást a buildmappába .

npm install
npm run build

Telepítse az npm-függőségeket, és hozza létre az alkalmazást a dist mappába.

npm install
npm run build

Az alkalmazás helyi futtatása

Futtassa együtt az előtéralkalmazást és az API-t úgy, hogy elindítja az alkalmazást a Static Web Apps parancssori felületével. Az alkalmazás két részének ily módon történő futtatása lehetővé teszi, hogy a parancssori felület egy mappából szolgálja ki az előtér buildkimenetét, és elérhetővé teszi az API-t a futó alkalmazás számára.

Az adattár gyökerében indítsa el a Static Web Apps parancssori felületét a start paranccsal. Módosítsa az argumentumokat, ha az alkalmazás más mappastruktúrával rendelkezik.
Adja át az aktuális mappát (src) és az API-mappát (api) a parancssori felületnek.
```
swa start src --api-location api
```
Adja át a build kimeneti mappáját (dist/angular-basic) és az API-mappát (api) a parancssori felületnek.
```
swa start dist/angular-basic --api-location api
```
Adja át a build kimeneti mappáját (build) és az API-mappát (api) a parancssori felületnek.
```
swa start build --api-location api
```
Adja át a build kimeneti mappáját (dist) és az API-mappát (api) a parancssori felületnek.
```
swa start dist --api-location api
```
Előfordulhat, hogy a Windows Tűzfal kéri, hogy az Azure Functions-futtatókörnyezet hozzáférjen az internethez. Válassza ki az Engedélyezés lehetőséget.
Amikor a parancssori felületi folyamatok elindulnak, a következő címen http://localhost:4280/érheti el az alkalmazást: . Figyelje meg, hogy a lap hogyan hívja meg az API-t, és hogyan jeleníti meg a kimenetét. Hello from the API
A parancssori felület leállításához írja be a Ctrl + C billentyűkombinációt.

API-hely hozzáadása a munkafolyamathoz

Mielőtt üzembe helyezheti az alkalmazást az Azure-ban, frissítse az adattár GitHub Actions-munkafolyamatát az API-mappa megfelelő helyével.

Nyissa meg a munkafolyamatot a .github/workflows/azure-static-web-apps-DEFAULT-HOSTNAME<>.yml címen.

Keresse meg a tulajdonságot api_location , és állítsa az értéket a következőre 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 ######

Megjegyzés: A fenti értékek api_locationapp_locationnem tartoznak keretrendszerhez,output_location és ezek az értékek a keretrendszer alapján változnak.

Mentse a fájlt.

Módosítások üzembe helyezése

Ha módosításokat szeretne közzétenni a statikus webalkalmazásban az Azure-ban, véglegesítse és küldje le a kódot a távoli GitHub-adattárba.

Nyissa meg a Parancskatalógust az F1 billentyűvel.
Válassza ki a Git: Commit All parancsot.
Amikor a rendszer véglegesítési üzenetet kér, adja meg a következőt: API hozzáadása és a helyi Git-adattár összes módosításának véglegesítése.
Nyissa meg a Parancskatalógust az F1 billentyűvel.
Válassza ki a Git: push parancsot.

A rendszer leküldi a módosításokat a GitHub távoli adattárába, és elindítja a Static Web Apps GitHub Actions munkafolyamatot az alkalmazás létrehozásához és üzembe helyezéséhez.
Nyissa meg az adattárat a GitHubon a munkafolyamat-futtatás állapotának figyeléséhez.
A munkafolyamat futtatása után látogasson el a statikus webalkalmazásba a módosítások megtekintéséhez.

Következő lépések

Alkalmazásbeállítások konfigurálása

Megosztás a következőn keresztül:

API hozzáadása az Azure Static Web Appshez az Azure Functions használatával

Előfeltételek

A statikus webalkalmazás létrehozása

Az API létrehozása

Az előtérbeli alkalmazás frissítése az API meghívásához

Az előtér és az API helyi futtatása

Parancssori eszközök telepítése

Előtérbeli alkalmazás létrehozása

Az alkalmazás helyi futtatása

API-hely hozzáadása a munkafolyamathoz

Módosítások üzembe helyezése

Következő lépések

Visszajelzés

További források