Configurare lo sviluppo locale per le app Web statiche di Azure

Quando viene pubblicato nel cloud, un sito App Web statiche di Azure collega molti servizi che interagiscono come se fossero la stessa applicazione. Tali servizi includono:

• App Web statica
• API Funzioni di Azure
• Servizi di autenticazione e autorizzazione
• Servizi di routing e configurazione

Questi servizi devono comunicare tra loro e App Web statiche di Azure gestisce automaticamente questa integrazione nel cloud.

Tuttavia, quando si esegue l'applicazione in locale, questi servizi non vengono associati automaticamente.

Per offrire un'esperienza simile a quella che si ottiene in Azure, l'interfaccia della riga di comando di App Web statiche di Azure offre i servizi seguenti:

• Un server del sito statico locale
• Proxy al server di sviluppo del framework front-end
• Proxy per gli endpoint API, disponibile tramite Funzioni di Azure Core Tools
• Un server di autenticazione fittizia e autorizzazione
• Imposizione delle impostazioni di configurazione e route locali

Funzionamento

Il grafico seguente mostra come vengono gestite le richieste in locale.

• Le richieste effettuate alla porta 4280 vengono inoltrate al server appropriato a seconda del tipo di richiesta.

• Le richieste di contenuto statico, ad esempio HTML o CSS, vengono gestite dal server di contenuto statico dell'interfaccia della riga di comando interno o dal server framework front-end per il debug.

• Le richieste di autenticazione e autorizzazione vengono gestite da un emulatore, che fornisce un profilo di identità fittizio all'app.

• Il runtime^{di Functions Core Tools 1} gestisce le richieste all'API del sito.

• Le risposte di tutti i servizi vengono restituite al browser come se fossero tutte una singola applicazione.

Dopo aver avviato l'interfaccia utente e le app per le API Funzioni di Azure in modo indipendente, avviare l'interfaccia della riga di comando App Web statiche e puntare alle app in esecuzione usando il comando seguente:

swa start http://localhost:<DEV-SERVER-PORT-NUMBER> --api-location http://localhost:7071

Facoltativamente, se si usa il swa init comando , l'interfaccia della riga di comando App Web statiche esamina il codice dell'applicazione e compila un file di configurazione swa-cli.config.json per l'interfaccia della riga di comando. Quando si usa il file swa-cli.config.json , è possibile eseguire swa start per avviare l'applicazione in locale.

¹ Gli Funzioni di Azure Core Tools vengono installati automaticamente dall'interfaccia della riga di comando se non sono già presenti nel sistema.

L'articolo seguente illustra in dettaglio i passaggi per l'esecuzione di un'applicazione basata su nodi, ma il processo è lo stesso per qualsiasi linguaggio o ambiente.

Prerequisiti

• Sito di App Web statiche di Azure esistente: se non ne hai uno, inizia con l'app starter vanilla-api.
• Node.js con npm: eseguire la versione Node.js LTS, che include l'accesso a npm.
• Visual Studio Code: usato per il debug dell'applicazione API, ma non necessario per l'interfaccia della riga di comando.

Attività iniziali

Aprire un terminale per la cartella radice del sito di App Web statiche di Azure esistente.

1. Installare l'interfaccia della riga di comando .

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

   Suggerimento

   Se si vuole installare l'interfaccia della riga di comando di SWA a livello globale, usare -g al posto di -D. È tuttavia consigliabile installare SWA come dipendenza di sviluppo.

2. Compilare l'app, se richiesto dall'applicazione.

   Eseguire npm run buildo il comando equivalente per il progetto.

3. Inizializzare il repository per l'interfaccia della riga di comando.

   swa init
   

   Rispondere alle domande poste dall'interfaccia della riga di comando per verificare che le impostazioni di configurazione siano corrette.

4. Avviare l'interfaccia della riga di comando.

   swa start
   

5. Passare a http://localhost:4280 per visualizzare l'app nel browser.

Altri modi per avviare l'interfaccia della riga di comando

Emulazione di autorizzazione e autenticazione

L'interfaccia della riga di comando App Web statiche emula il flusso di sicurezza implementato in Azure. Quando un utente accede, è possibile definire un profilo di identità falso restituito all'app.

Ad esempio, quando si tenta di passare a /.auth/login/github, viene restituita una pagina che consente di definire un profilo di identità.

L'emulatore fornisce una pagina che consente di specificare i valori dell'entità client seguenti:

Dopo aver eseguito l'accesso:

• È possibile usare l'endpoint /.auth/me o un endpoint di funzione per recuperare l'entità client dell'utente.

• Passando a /.auth/logout cancella l'entità client e disconnette l'utente fittizio.

Debug

Esistono due contesti di debug in un'app Web statica. Il primo è per il sito di contenuto statico e il secondo è per le funzioni API. Il debug locale è possibile consentendo all'interfaccia della riga di comando di App Web statiche di usare i server di sviluppo per uno o entrambi questi contesti.

La procedura seguente illustra uno scenario comune che usa server di sviluppo per entrambi i contesti di debug.

1. Avviare il server di sviluppo del sito statico. Questo comando è specifico del framework front-end in uso, ma spesso si presenta sotto forma di comandi come npm run build, npm starto npm run dev.

2. Aprire la cartella dell'applicazione API in Visual Studio Code e avviare una sessione di debug.

3. Avviare l'interfaccia della riga di comando App Web statiche usando il comando seguente.

   swa start http://localhost:<DEV-SERVER-PORT-NUMBER> --appDevserverUrl http://localhost:7071
   

   Sostituire <DEV_SERVER_PORT_NUMBER> con il numero di porta del server di sviluppo.

Gli screenshot seguenti mostrano i terminali per uno scenario di debug tipico:

Il sito del contenuto statico è in esecuzione tramite npm run dev.

L'applicazione API Funzioni di Azure esegue una sessione di debug in Visual Studio Code.

L'interfaccia della riga di comando di App Web statiche viene avviata usando entrambi i server di sviluppo.

Le richieste che passano attraverso la porta 4280 vengono ora instradate al server di sviluppo di contenuti statici o alla sessione di debug dell'API.

Per altre informazioni sui diversi scenari di debug, con indicazioni su come personalizzare porte e indirizzi del server, vedere il repository dell'interfaccia della riga di comando di App Web statiche di Azure.

Configurazione di debug di esempio

Visual Studio Code usa un file per abilitare le sessioni di debug nell'editor. Se Visual Studio Code non genera automaticamente un file launch.json , è possibile inserire la configurazione seguente in vscode/launch.json.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Node Functions",
            "type": "node",
            "request": "attach",
            "port": 9229,
            "preLaunchTask": "func: host start"
        }
    ]
}

Passaggi successivi