Dodawanie interfejsu API do usługi Azure Static Web Apps za pomocą usługi Azure Functions

Artykuł
11/25/2024

Interfejsy API bezserwerowe można dodawać do usługi Azure Static Web Apps obsługiwanej przez usługę Azure Functions. W tym artykule pokazano, jak dodać i wdrożyć interfejs API w witrynie usługi Azure Static Web Apps.

Uwaga

Funkcje udostępniane domyślnie w usłudze Static Web Apps są wstępnie skonfigurowane w celu zapewnienia bezpiecznych punktów końcowych interfejsu API i obsługują tylko funkcje wyzwalane przez protokół HTTP. Zobacz Obsługa interfejsu API w usłudze Azure Functions , aby uzyskać informacje na temat różnic między autonomicznymi aplikacjami usługi Azure Functions.

Wymagania wstępne

Konto platformy Azure z aktywną subskrypcją.
- Jeśli nie masz konta, możesz go utworzyć bezpłatnie.
Program Visual Studio Code
Rozszerzenie usługi Azure Static Web Apps dla programu Visual Studio Code.
Rozszerzenie usługi Azure Functions dla programu Visual Studio Code.
Node.js v18 , aby uruchomić aplikację frontonu i interfejs API.

Napiwek

Narzędzie nvm umożliwia zarządzanie wieloma wersjami Node.js w systemie deweloperów. W systemie Windows można zainstalować urządzenie NVM dla systemu Windows za pośrednictwem usługi Winget.

Tworzenie statycznej aplikacji internetowej

Przed dodaniem interfejsu API utwórz i wdróż aplikację frontonu w usłudze Azure Static Web Apps, postępując zgodnie z przewodnikiem Szybki start Tworzenie pierwszej witryny statycznej za pomocą usługi Azure Static Web Apps .

Po wdrożeniu aplikacji frontonu w usłudze Azure Static Web Apps sklonuj repozytorium aplikacji. Możesz na przykład sklonować repozytorium przy użyciu git wiersza polecenia.

Przed uruchomieniem następującego polecenia pamiętaj, aby zastąpić <YOUR_GITHUB_USERNAME> ciąg nazwą użytkownika usługi GitHub.

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

W programie Visual Studio Code otwórz katalog główny repozytorium aplikacji. Struktura folderów zawiera źródło aplikacji frontonu i przepływ pracy usługi GitHub Static Web Apps w folderze .github/workflows .

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

Tworzenie interfejsu API

Utworzysz projekt usługi Azure Functions dla interfejsu API statycznej aplikacji internetowej. Domyślnie rozszerzenie Static Web Apps Visual Studio Code tworzy projekt w folderze o nazwie api w katalogu głównym repozytorium.

Naciśnij klawisz F1, aby otworzyć paletę poleceń.
Wybierz pozycję Azure Static Web Apps: Create HTTP Function... (Azure Static Web Apps: Utwórz funkcję HTTP...). Jeśli zostanie wyświetlony monit o zainstalowanie rozszerzenia usługi Azure Functions, zainstaluj je i uruchom ponownie to polecenie.
Po wyświetleniu monitu wprowadź następujące wartości:

Monit Wartość

Wybierz język JavaScript

Wybieranie modelu programowania Wersja 4

Podaj nazwę funkcji message

Napiwek

Więcej informacji na temat różnic między modelami programowania można uzyskać w przewodniku dla deweloperów usługi Azure Functions

Projekt usługi Azure Functions jest generowany za pomocą funkcji wyzwalanej przez protokół HTTP. Aplikacja ma teraz strukturę projektu podobną do poniższego przykładu.
```
├── .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)
```

Monit	Wartość
Wybierz język	JavaScript
Wybieranie modelu programowania	Wersja 4
Podaj nazwę funkcji	message

Następnie zmień message funkcję, aby zwrócić komunikat do frontonu. Zaktualizuj funkcję w pliku src/functions/message.js przy użyciu następującego kodu.

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

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

Napiwek

Możesz dodać więcej funkcji interfejsu API, uruchamiając ponownie polecenie Azure Static Web Apps: Create HTTP Function... (Tworzenie funkcji HTTP... ).

Aktualizowanie aplikacji frontonu w celu wywołania interfejsu API

Zaktualizuj aplikację frontonu, aby wywołać interfejs API pod adresem /api/message i wyświetlić komunikat odpowiedzi.

Jeśli użyto przewodników Szybki start do utworzenia aplikacji, skorzystaj z poniższych instrukcji, aby zastosować aktualizacje.

Zaktualizuj zawartość pliku src/index.html przy użyciu następującego kodu, aby pobrać tekst z funkcji interfejsu API i wyświetlić go na ekranie.

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

Zaktualizuj zawartość pliku src/app/app.module.ts przy użyciu następującego kodu, aby włączyć HttpClient w aplikacji.

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

Zaktualizuj zawartość pliku src/app/app.component.ts przy użyciu następującego kodu, aby pobrać tekst z funkcji interfejsu API i wyświetlić go na ekranie.

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

Zaktualizuj zawartość pliku src/App.js przy użyciu następującego kodu, aby pobrać tekst z funkcji interfejsu API i wyświetlić go na ekranie.

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;

Zaktualizuj zawartość pliku src/App.vue przy użyciu następującego kodu, aby pobrać tekst z funkcji interfejsu API i wyświetlić go na ekranie.

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

Uruchamianie frontonu i interfejsu API lokalnie

Aby uruchomić aplikację frontonu i interfejs API razem lokalnie, usługa Azure Static Web Apps udostępnia interfejs wiersza polecenia emulujący środowisko chmury. Interfejs wiersza polecenia używa narzędzi Azure Functions Core Tools do uruchamiania interfejsu API.

Zainstaluj narzędzia wiersza polecenia

Upewnij się, że masz zainstalowane niezbędne narzędzia wiersza polecenia.

Ważne

Aby zwiększyć bezpieczeństwo wdrożeń z interfejsu wiersza polecenia usługi Static Web Apps, wprowadzono zmianę powodującą niezgodność, która wymaga uaktualnienia do najnowszej wersji (2.0.2) interfejsu wiersza polecenia usługi Static Web Apps do 15 stycznia 2025 r.

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

Napiwek

Jeśli nie chcesz instalować swa wiersza polecenia globalnie, możesz użyć npx swa zamiast swa w poniższych instrukcjach.

Kompilowanie aplikacji frontonu

Jeśli aplikacja używa struktury, skompiluj aplikację, aby wygenerować dane wyjściowe przed uruchomieniem interfejsu wiersza polecenia usługi Static Web Apps.

Nie ma potrzeby kompilowania aplikacji.

Zainstaluj zależności npm i skompiluj aplikację w folderze dist/angular-basic .

npm install
npm run build --prod

Zainstaluj zależności npm i skompiluj aplikację w folderze kompilacji.

npm install
npm run build

Zainstaluj zależności npm i skompiluj aplikację w folderze dist .

npm install
npm run build

Lokalne uruchamianie aplikacji

Uruchom aplikację frontonu i interfejs API razem, uruchamiając aplikację przy użyciu interfejsu wiersza polecenia usługi Static Web Apps. Uruchomienie dwóch części aplikacji w ten sposób umożliwia interfejsowi wiersza polecenia obsługę danych wyjściowych kompilacji frontonu z folderu i udostępnienie interfejsu API uruchomionej aplikacji.

W katalogu głównym repozytorium uruchom interfejs wiersza polecenia usługi Static Web Apps za start pomocą polecenia . Dostosuj argumenty, jeśli aplikacja ma inną strukturę folderów.
- Brak struktury
- Angular
- React
- Vue
Przekaż bieżący folder (src) i folder interfejsu API (api) do interfejsu wiersza polecenia.
```
swa start src --api-location api
```
Przekaż folder wyjściowy kompilacji (dist/angular-basic) i folder interfejsu API (api) do interfejsu wiersza polecenia.
```
swa start dist/angular-basic --api-location api
```
Przekaż folder wyjściowy kompilacji (build) i folder interfejsu API (api) do interfejsu wiersza polecenia.
```
swa start build --api-location api
```
Przekaż folder wyjściowy kompilacji (dist) i folder interfejsu API (api) do interfejsu wiersza polecenia.
```
swa start dist --api-location api
```
Zapora systemu Windows może monitować o żądanie, aby środowisko uruchomieniowe usługi Azure Functions mogło uzyskać dostęp do Internetu. Zaznacz Zezwól.
Po uruchomieniu procesu interfejsu wiersza polecenia uzyskaj dostęp do aplikacji pod adresem http://localhost:4280/. Zwróć uwagę, że strona wywołuje interfejs API i wyświetla jego dane wyjściowe: Hello from the API.
Aby zatrzymać interfejs wiersza polecenia, wpisz Ctrl + C.

Dodawanie lokalizacji interfejsu API do przepływu pracy

Przed wdrożeniem aplikacji na platformie Azure zaktualizuj przepływ pracy funkcji GitHub Actions repozytorium przy użyciu prawidłowej lokalizacji folderu interfejsu API.

Otwórz przepływ pracy w witrynie .github/workflows/azure-static-web-apps-DEFAULT-HOSTNAME<>.yml.

Wyszukaj właściwość api_location i ustaw wartość 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 ######

Uwaga: powyższe wartości api_locationapp_locationoutput_location , nie są przeznaczone dla żadnej struktury i te wartości zmieniają się na podstawie struktury.

Zapisz plik.

Wdrażanie zmian

Aby opublikować zmiany w statycznej aplikacji internetowej na platformie Azure, zatwierdź i wypchnij kod do zdalnego repozytorium GitHub.

Naciśnij klawisz F1, aby otworzyć paletę poleceń.
Wybierz polecenie Git: Commit All (Git: Zatwierdź wszystko ).
Po wyświetleniu monitu o zatwierdzenie wprowadź wyczyn : dodaj interfejs API i zatwierdź wszystkie zmiany w lokalnym repozytorium Git.
Naciśnij klawisz F1, aby otworzyć paletę poleceń.
Wybierz polecenie Git: push.

Zmiany są wypychane do repozytorium zdalnego w usłudze GitHub, wyzwalając przepływ pracy funkcji GitHub Actions usługi Static Web Apps w celu kompilowania i wdrażania aplikacji.
Otwórz repozytorium w usłudze GitHub, aby monitorować stan przebiegu przepływu pracy.
Po zakończeniu działania przepływu pracy odwiedź statyczną aplikację internetową, aby wyświetlić zmiany.

Następne kroki

Konfigurowanie ustawień aplikacji

Udostępnij za pośrednictwem

Dodawanie interfejsu API do usługi Azure Static Web Apps za pomocą usługi Azure Functions

Wymagania wstępne

Tworzenie statycznej aplikacji internetowej

Tworzenie interfejsu API

Aktualizowanie aplikacji frontonu w celu wywołania interfejsu API

Uruchamianie frontonu i interfejsu API lokalnie

Zainstaluj narzędzia wiersza polecenia

Kompilowanie aplikacji frontonu

Lokalne uruchamianie aplikacji

Dodawanie lokalizacji interfejsu API do przepływu pracy

Wdrażanie zmian

Następne kroki

Opinia

Dodatkowe zasoby