Aggiungere un'API ad App Web statiche di Azure con Funzioni di Azure

Articolo
05/08/2024

È possibile aggiungere API serverless a App Web statiche di Azure basate su Funzioni di Azure. Questo articolo illustra come aggiungere e distribuire un'API in un sito App Web statiche di Azure.

Nota

Le funzioni fornite per impostazione predefinita in App Web statiche sono preconfigurate per fornire endpoint API sicuri e supportano solo funzioni attivate da HTTP. Per informazioni su come differiscono dalle app autonome Funzioni di Azure, vedere Supporto api con Funzioni di Azure.

Prerequisiti

Account Azure con una sottoscrizione attiva.
- Se non si ha un account, è possibile crearne uno gratuitamente.
Visual Studio Code.
App Web statiche di Azure'estensione per Visual Studio Code.
Funzioni di Azure'estensione per Visual Studio Code.
Node.js v18 per eseguire l'app front-end e l'API.

Suggerimento

È possibile usare lo strumento nvm per gestire più versioni di Node.js nel sistema di sviluppo. In Windows è possibile installare NVM per Windows tramite Winget.

Creare l'app Web statica

Prima di aggiungere un'API, creare e distribuire un'applicazione front-end in App Web statiche di Azure seguendo la guida introduttiva Creazione del primo sito statico con App Web statiche di Azure.

Dopo aver distribuito un'applicazione front-end in App Web statiche di Azure, clonare il repository dell'app. Ad esempio, per clonare usando la git riga di comando:

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

In Visual Studio Code aprire la radice del repository dell'app. La struttura di cartelle contiene l'origine per l'app front-end e il flusso di lavoro gitHub App Web statiche nella cartella .github/workflows.

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

Creare l'API

Si crea un progetto Funzioni di Azure per l'API dell'app Web statica. Per impostazione predefinita, l'estensione App Web statiche Visual Studio Code crea il progetto in una cartella denominata api nella radice del repository.

Premere F1 per aprire il riquadro comandi.
Selezionare App Web statiche di Azure: Crea funzione HTTP.... Se viene richiesto di installare l'estensione Funzioni di Azure, installarla ed eseguire di nuovo questo comando.
Quando richiesto, immettere i valori seguenti:

Richiesta Valore

Selezionare una lingua JavaScript

Selezionare un modello di programmazione V3

Specificare un nome di funzione message

Suggerimento

Per altre informazioni sulle differenze tra i modelli di programmazione, vedere la guida per sviluppatori di Funzioni di Azure

Viene generato un progetto Funzioni di Azure con una funzione attivata da HTTP. L'app ha ora una struttura di progetto simile all'esempio seguente.
```
├── .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)
```
Modificare quindi la message funzione per restituire un messaggio al front-end. Aggiornare la funzione in api/message/index.js con il codice seguente.
```
module.exports = async function (context, req) {
    context.res.json({
        text: "Hello from the API"
    });
};
```

Richiesta	Valore
Selezionare una lingua	JavaScript
Selezionare un modello di programmazione	V3
Specificare un nome di funzione	message

Suggerimento

È possibile aggiungere altre funzioni API eseguendo di nuovo il comando App Web statiche di Azure: Crea funzione HTTP.

Aggiornare l'app front-end per chiamare l'API

Aggiornare l'app front-end per chiamare l'API in /api/message e visualizzare il messaggio di risposta.

Se sono state usate le guide introduttive per creare l'app, usare le istruzioni seguenti per applicare gli aggiornamenti.

Aggiornare il contenuto del file di src/index.html con il codice seguente per recuperare il testo dalla funzione API e visualizzarlo sullo schermo.

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

Aggiornare il contenuto di src/app/app.module.ts con il codice seguente per abilitare HttpClient nell'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 {}

Aggiornare il contenuto di src/app/app.component.ts con il codice seguente per recuperare il testo dalla funzione API e visualizzarlo sullo schermo.

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

Aggiornare il contenuto di src/App.js con il codice seguente per recuperare il testo dalla funzione API e visualizzarlo sullo schermo.

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;

Aggiornare il contenuto di src/App.vue con il codice seguente per recuperare il testo dalla funzione API e visualizzarlo sullo schermo.

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

Eseguire il front-end e l'API in locale

Per eseguire l'app front-end e l'API in locale, App Web statiche di Azure fornisce un'interfaccia della riga di comando che emula l'ambiente cloud. L'interfaccia della riga di comando usa Funzioni di Azure Core Tools per eseguire l'API.

Installa gli strumenti da riga di comando

Assicurarsi di avere installato gli strumenti da riga di comando necessari.

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

Suggerimento

Se non si vuole installare la swa riga di swa comando a livello globale, è possibile usare npx swa anziché nelle istruzioni seguenti.

Creare un'app front-end

Se l'app usa un framework, compilare l'app per generare l'output prima di eseguire l'interfaccia della riga di comando di App Web statiche.

Non è necessario compilare l'app.

Installare le dipendenze npm e compilare l'app nella cartella dist/angular-basic .

npm install
npm run build --prod

Installare le dipendenze npm e compilare l'app nella cartella di compilazione .

npm install
npm run build

Installare le dipendenze npm e compilare l'app nella cartella dist .

npm install
npm run build

Eseguire l'applicazione in locale

Eseguire l'app front-end e l'API insieme avviando l'app con l'interfaccia della riga di comando di App Web statiche. L'esecuzione delle due parti dell'applicazione in questo modo consente all'interfaccia della riga di comando di gestire l'output di compilazione del front-end da una cartella e rende l'API accessibile all'app in esecuzione.

Nella radice del repository avviare l'interfaccia della riga di comando App Web statiche con il start comando . Modificare gli argomenti se l'app ha una struttura di cartelle diversa.
- Nessun framework
- Angular
- React
- Vue
Passare la cartella corrente (src) e la cartella API (api) all'interfaccia della riga di comando.
```
swa start src --api-location api
```
Passare la cartella di output di compilazione (dist/angular-basic) e la cartella API (api) all'interfaccia della riga di comando.
```
swa start dist/angular-basic --api-location api
```
Passare la cartella di output di compilazione (build) e la cartella API (api) all'interfaccia della riga di comando.
```
swa start build --api-location api
```
Passare la cartella di output di compilazione (dist) e la cartella API (api) all'interfaccia della riga di comando.
```
swa start dist --api-location api
```
Windows Firewall potrebbe richiedere che il runtime di Funzioni di Azure possa accedere a Internet. Seleziona Consenti.
All'avvio dell'interfaccia della riga di comando, accedere all'app all'indirizzo http://localhost:4280/. Si noti che la pagina chiama l'API e ne visualizza l'output, Hello from the API.
Per arrestare l'interfaccia della riga di comando, digitare CTRL+C.

Aggiungere la posizione API al flusso di lavoro

Prima di poter distribuire l'app in Azure, aggiornare il flusso di lavoro gitHub Actions del repository con il percorso corretto della cartella DELL'API.

Aprire il flusso di lavoro in .github/workflows/azure-static-web-apps-DEFAULT-HOSTNAME<>.yml.

Cercare la proprietà api_location e impostare il valore su 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 ######

Salvare il file.

Distribuire le modifiche

Per pubblicare le modifiche all'app Web statica in Azure, eseguire il commit e il push del codice nel repository GitHub remoto.

Premere F1 per aprire il riquadro comandi.
Selezionare il comando Git: Commit All (Git: Commit All ).
Quando viene richiesto un messaggio di commit, immettere feat: aggiungere l'API ed eseguire il commit di tutte le modifiche nel repository Git locale.
Premere F1 per aprire il riquadro comandi.
Selezionare il comando Git: push .

Le modifiche vengono inoltrate al repository remoto in GitHub, attivando il flusso di lavoro App Web statiche GitHub Actions per compilare e distribuire l'app.
Aprire il repository in GitHub per monitorare lo stato dell'esecuzione del flusso di lavoro.
Al termine dell'esecuzione del flusso di lavoro, visitare l'app Web statica per visualizzare le modifiche.

Passaggi successivi

Configurare le impostazioni dell'app

Condividi tramite

Aggiungere un'API ad App Web statiche di Azure con Funzioni di Azure

Prerequisiti

Creare l'app Web statica

Creare l'API

Aggiornare l'app front-end per chiamare l'API

Eseguire il front-end e l'API in locale

Installa gli strumenti da riga di comando

Creare un'app front-end

Eseguire l'applicazione in locale

Aggiungere la posizione API al flusso di lavoro

Distribuire le modifiche

Passaggi successivi

Risorse aggiuntive