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

Do Azure Static Web Apps můžete přidat bezserverová rozhraní API, která využívají Azure Functions. 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í. Úložiště můžete například naklonovat pomocí příkazového git řádku.

Před spuštěním následujícího příkazu nezapomeňte nahradit <YOUR_GITHUB_USERNAME> uživatelské jméno GitHubu.

git clone https://github.com/<YOUR_GITHUB_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ě.

1. Stisknutím klávesy F1 otevřete paletu příkazů.

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

3. Po zobrazení výzvy zadejte následující hodnoty:

   Instrukce	Hodnota
   Vyberte jazyk	JavaScript
   Výběr programovacího modelu	V4
   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
   ├── └──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)
   

4. Dále změňte message funkci tak, aby vrátila zprávu do front-endu. Aktualizujte funkci v src/functions/message.js následujícím kódem.

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

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.

Žádná architektura

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>

Angular

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

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

React

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;

Vue

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.

Důležité

Kvůli zlepšení zabezpečení nasazení z rozhraní příkazového řádku Static Web Apps jsme zavedli zásadní změnu, která vyžaduje upgrade na nejnovější verzi rozhraní příkazového řádku Static Web Apps (2.0.2) od 15. ledna 2025.

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.

Žádná architektura

Aplikaci není potřeba sestavovat.

Angular

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

npm install
npm run build --prod

React

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

npm install
npm run build

Vue

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.

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

   Žádná architektura

   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
   

   Angular

   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
   

   React

   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
   

   Vue

   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
   

2. Brána Windows Firewall může požádat, aby modul runtime Služby Azure Functions mohl přistupovat k internetu. Vyberte Povolit.

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

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

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

2. 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 ,app_location,output_location nejsou pro žádnou architekturu api_location a tyto hodnoty se mění na základě vaší architektury.

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

1. Stisknutím klávesy F1 otevřete paletu příkazů.

2. Vyberte příkaz Git: Commit All (Potvrdit vše).

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

4. Stisknutím klávesy F1 otevřete paletu příkazů.

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

6. Otevřete úložiště na GitHubu a sledujte stav spuštění pracovního postupu.

7. Po dokončení pracovního postupu navštivte statickou webovou aplikaci a zobrazte změny.

Další kroky

Konfigurace nastavení aplikace