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

È possibile aggiungere API serverless per 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 dispone di un account è possibile crearne uno gratuitamente.
Codice di Visual Studio.
Estensione App Web statiche di Azure per Visual Studio Code.
Estensione Funzioni di Azure 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.

Crea 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, clona il repository dell'applicazione. Ad esempio, è possibile clonare il repository usando la git riga di comando.

Prima di eseguire il comando seguente, assicurarsi di sostituire <YOUR_GITHUB_USERNAME> con il nome utente di GitHub.

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

In Visual Studio Code, apri la cartella radice del repository dell'app. La struttura delle cartelle contiene il codice sorgente dell'app frontend e il flusso di lavoro GitHub di 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	V4
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
│   ├── 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)

Modificare quindi la message funzione per restituire un messaggio al front-end. Aggiornare la funzione in src/functions/message.js con il codice seguente.

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

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

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. La CLI 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.

Importante

Per migliorare la sicurezza delle distribuzioni dall'interfaccia della riga di comando di App Web statiche, è stata introdotta una modifica di rilievo che richiede l'aggiornamento alla versione più recente (2.0.2) dell'interfaccia della riga di comando di App Web statiche entro il 15 gennaio 2025.

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

Suggerimento

Se non vuoi installare globalmente swa, puoi usare npx swa invece di swa nelle istruzioni seguenti.

Creare un'app front-end

Se l'app usa un framework, compila l'app per generare l'output prima di eseguire la CLI 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

Esegui l'app frontend e l'API insieme avviando l'app con App Web statiche CLI. 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 directory radice del tuo repository, avvia l'interfaccia a riga di comando di App Web statiche con il comando start. Modifica 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
```
Passa la cartella di output della compilazione (dist/angular-basic) e la cartella API (api) alla CLI.
```
swa start dist/angular-basic --api-location api
```
Passa la cartella di output della compilazione (build) e la cartella dell'API (api) alla CLI.
```
swa start build --api-location api
```
Passa al CLI la cartella di output della compilazione (dist) e la cartella API (api).
```
swa start dist --api-location api
```
Windows Firewall potrebbe richiedere di consentire al runtime di Funzioni di Azure di accedere a Internet. Seleziona Consenti.
Quando si avviano i processi della CLI, accedi alla tua app da http://localhost:4280/. Si noti che la pagina chiama l'API e ne visualizza l'output, Hello from the API.
Per interrompere la CLI, premi 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.

Apri il flusso di lavoro all'indirizzo .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: "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 ######

Nota: i valori precedenti di api_location, app_location, output_location si applicano alle app senza un framework. Questi valori possono variare a seconda del framework.

Salvare il file.

Distribuisci 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.
Seleziona il comando 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, vai alla tua app Web statica per visualizzare le modifiche.

Passaggi successivi

Configurare le impostazioni dell'app

Commenti e suggerimenti

Questa pagina è stata utile?

Last updated on 2026-06-03

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

Prerequisiti

Crea 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

Distribuisci le modifiche

Passaggi successivi

Commenti e suggerimenti

Risorse aggiuntive