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

Articolo
10/20/2023

È 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
Estensione App Web statiche di Azure per Visual Studio Code
Estensione Funzioni di Azure per Visual Studio Code
Node.js per eseguire l'app front-end e l'API

Creare l'app Web statica

Prima di aggiungere un'API, creare e distribuire un'applicazione front-end in App Web statiche di Azure. Usare un'app esistente già distribuita o crearne una seguendo la guida introduttiva Creare il primo sito statico con App Web statiche di Azure.

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 -D @azure/static-web-apps-cli

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

Avviare l'interfaccia della riga di comando

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
```
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.
Salva 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