Přidání rozhraní API do Azure Static Web Apps pomocí Azure Functions

Článek
05/08/2024

Do Azure Static Web Apps, která využívají Azure Functions, můžete přidat bezserverová rozhraní API. Tento článek ukazuje, jak přidat a nasadit rozhraní API na web Azure Static Web Apps.

Poznámka:

Funkce poskytované ve službě Static Web Apps jsou ve výchozím nastavení předem nakonfigurované tak, aby poskytovaly zabezpečené koncové body rozhraní API a podporují pouze funkce aktivované protokolem HTTP. Informace o tom, jak se liší od samostatných aplikací Azure Functions, najdete v podpoře rozhraní API ve službě Azure Functions .

Požadavky

Účet Azure s aktivním předplatným.
- Pokud účet nemáte, můžete si ho zdarma vytvořit.
Visual Studio Code.
Rozšíření Azure Static Web Apps pro Visual Studio Code
Rozšíření Azure Functions pro Visual Studio Code
Node.js v18 pro spuštění front-endové aplikace a rozhraní API.

Tip

Nástroj nvm můžete použít ke správě více verzí Node.js ve vývojovém systému. Ve Windows je možné zařízení NVM pro Windows nainstalovat přes Winget.

Vytvoření statické webové aplikace

Před přidáním rozhraní API vytvořte a nasaďte front-endovou aplikaci do Azure Static Web Apps pomocí rychlého startu vytvoření prvního statického webu pomocí Azure Static Web Apps .

Jakmile máte front-endovou aplikaci nasazenou do Azure Static Web Apps, naklonujte své úložiště aplikací. Pokud například chcete klonovat pomocí příkazového git řádku:

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

V editoru Visual Studio Code otevřete kořen úložiště vaší aplikace. Struktura složek obsahuje zdroj pro front-endovou aplikaci a pracovní postup Static Web Apps na GitHubu ve složce .github/workflows .

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

Vytvoření rozhraní API

Vytvoříte projekt Azure Functions pro rozhraní API statické webové aplikace. Ve výchozím nastavení rozšíření Static Web Apps Visual Studio Code vytvoří projekt ve složce s názvem api v kořenovém adresáři úložiště.

Stisknutím klávesy F1 otevřete paletu příkazů.
Vyberte Azure Static Web Apps: Vytvořit funkci HTTP.... Pokud se zobrazí výzva k instalaci rozšíření Azure Functions, nainstalujte ho a spusťte tento příkaz znovu.
Po zobrazení výzvy zadejte následující hodnoty:

Instrukce Hodnota

Vyberte jazyk JavaScript

Výběr programovacího modelu V3

Zadejte název funkce. message

Tip

Další informace o rozdílech mezi programovacími modely najdete v příručce pro vývojáře Azure Functions.

Projekt Azure Functions se generuje s funkcí aktivovanou protokolem HTTP. Vaše aplikace teď má strukturu projektu podobnou následujícímu příkladu.
```
├── .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)
```
Dále změňte message funkci tak, aby vrátila zprávu do front-endu. Aktualizujte funkci v rozhraní API/message/index.js následujícím kódem.
```
module.exports = async function (context, req) {
    context.res.json({
        text: "Hello from the API"
    });
};
```

Instrukce	Hodnota
Vyberte jazyk	JavaScript
Výběr programovacího modelu	V3
Zadejte název funkce.	message

Tip

Další funkce rozhraní API můžete přidat spuštěním příkazu Azure Static Web Apps: Vytvořit funkci HTTP... znovu.

Aktualizace front-endové aplikace pro volání rozhraní API

Aktualizujte front-endovou aplikaci tak, aby volala rozhraní API /api/message a zobrazila se zpráva s odpovědí.

Pokud jste k vytvoření aplikace použili rychlé starty, použijte k instalaci aktualizací následující pokyny.

Aktualizujte obsah souboru src/index.html následujícím kódem, který načte text z funkce rozhraní API a zobrazí ho na obrazovce.

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

Aktualizujte obsah src/app/app.module.ts následujícím kódem, aby se povolila HttpClient ve vaší aplikaci.

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

Aktualizujte obsah src/app/app.component.ts následujícím kódem, který načte text z funkce API a zobrazí ho na obrazovce.

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

Aktualizujte obsah src/App.js následujícím kódem, který načte text z funkce rozhraní API a zobrazí ho na obrazovce.

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;

Aktualizujte obsah souboru src/App.vue následujícím kódem, který načte text z funkce rozhraní API a zobrazí ho na obrazovce.

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

Místní spuštění front-endu a rozhraní API

K místnímu spuštění front-endové aplikace a rozhraní API poskytuje Azure Static Web Apps rozhraní příkazového řádku, které emuluje cloudové prostředí. Rozhraní příkazového řádku používá ke spuštění rozhraní API nástroje Azure Functions Core Tools.

Install command line tools

Ujistěte se, že máte nainstalované potřebné nástroje příkazového řádku.

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

Tip

Pokud nechcete nainstalovat swa příkazový řádek globálně, můžete místo v následujících pokynech použít npx swa swa příkazový řádek.

Sestavení front-endové aplikace

Pokud vaše aplikace používá architekturu, sestavte aplikaci tak, aby před spuštěním rozhraní příkazového řádku Static Web Apps vygenerovala výstup.

Aplikaci není potřeba sestavovat.

Nainstalujte závislosti npm a sestavte aplikaci do složky dist/angular-basic .

npm install
npm run build --prod

Nainstalujte závislosti npm a sestavte aplikaci do složky sestavení .

npm install
npm run build

Nainstalujte závislosti npm a sestavte aplikaci do složky dist .

npm install
npm run build

Aplikaci spustíte místně.

Spusťte front-endovou aplikaci a rozhraní API společně spuštěním aplikace pomocí rozhraní příkazového řádku Static Web Apps. Spuštění dvou částí aplikace tímto způsobem umožňuje rozhraní příkazového řádku obsluhovat výstup sestavení front-endu ze složky a zpřístupnit rozhraní API spuštěné aplikaci.

V kořenovém adresáři úložiště spusťte rozhraní příkazového řádku Static Web Apps pomocí start příkazu. Upravte argumenty, pokud má aplikace jinou strukturu složek.
Předejte aktuální složku (src) a složku rozhraní API (api) do rozhraní příkazového řádku.
```
swa start src --api-location api
```
Předejte výstupní složku sestavení (dist/angular-basic) a složku rozhraní API (api) do rozhraní příkazového řádku.
```
swa start dist/angular-basic --api-location api
```
Předejte výstupní složku sestavení (build) a složku rozhraní API (api) do rozhraní příkazového řádku.
```
swa start build --api-location api
```
Předejte výstupní složku sestavení (dist) a složku rozhraní API (api) do rozhraní příkazového řádku.
```
swa start dist --api-location api
```
Brána Windows Firewall může požádat, aby modul runtime Služby Azure Functions mohl přistupovat k internetu. Vyberte Povolit.
Když se rozhraní příkazového řádku spustí, přejděte k aplikaci na adrese http://localhost:4280/. Všimněte si, jak stránka volá rozhraní API a zobrazuje jeho výstup. Hello from the API
Pokud chcete rozhraní příkazového řádku zastavit, zadejte Ctrl+C.

Přidání umístění rozhraní API do pracovního postupu

Než budete moct aplikaci nasadit do Azure, aktualizujte pracovní postup GitHub Actions úložiště správným umístěním složky rozhraní API.

Otevřete pracovní postup na adrese .github/workflows/azure-static-web-apps-DEFAULT-HOSTNAME<>.yml.

Vyhledejte vlastnost api_location a nastavte hodnotu na 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 ######

Poznámka: Výše uvedené hodnoty api_location ,app_location,output_location nejsou pro žádnou architekturu a tyto hodnoty se mění na základě architektury.

Uložte soubor.

Nasazení změn

Pokud chcete publikovat změny ve statické webové aplikaci v Azure, potvrďte a nasdílejte kód do vzdáleného úložiště GitHub.

Stisknutím klávesy F1 otevřete paletu příkazů.
Vyberte příkaz Git: Commit All (Potvrdit vše).
Po zobrazení výzvy k potvrzení zprávy zadejte feat: přidejte rozhraní API a potvrďte všechny změny do místního úložiště Git.
Stisknutím klávesy F1 otevřete paletu příkazů.
Vyberte příkaz Git: push.

Vaše změny se nasdílí do vzdáleného úložiště na GitHubu a aktivují pracovní postup Static Web Apps GitHub Actions pro sestavení a nasazení vaší aplikace.
Otevřete úložiště na GitHubu a sledujte stav spuštění pracovního postupu.
Po dokončení pracovního postupu navštivte statickou webovou aplikaci a zobrazte změny.

Další kroky

Konfigurace nastavení aplikace

Sdílet prostřednictvím