Eseguire e sottoporre a debug le app abilitate per Azure Developer CLI

Eseguire ed eseguire il debug di app nel computer locale usando l'estensione Visual Studio Code per l'interfaccia della riga di comando per sviluppatori di Azure (azd). In questa guida si userà l'app Web React con l'API Node.js e il modello MongoDB in Azure . È possibile applicare i principi appresi in questo articolo a uno dei modelli dell'interfaccia della riga di comando per sviluppatori di Azure.

Prerequisiti

• Installare azd
• Eseguire azd con il modello Node.js
• Node.js con npm (v 16.13.1 LTS)

Installare l'estensione Visual Studio Code per l'interfaccia della riga di comando per sviluppatori di Azure

Tramite Visual Studio Code

1. Aprire Visual Studio Code.

2. Scegliere Estensioni dal menu Visualizza.

3. Nel campo di ricerca immettere Azure Developer CLI.

4. Selezionare Installa.

Tramite Marketplace

1. Usando il browser passare alla pagina Dell'interfaccia della riga di comando per sviluppatori di Azure - Estensione VS Code.

2. Selezionare Installa.

Inizializzare una nuova app

1. Creare e aprire una nuova directory in Visual Studio Code.

2. Scegliere Riquadro comandi dal menu Visualizza.

3. Digitare e selezionare Azure Developer: init.

   

4. Selezionare il modello Azure-Samples/todo-nodejs-mongo.

   

Esplorare i file seguenti inclusi nella .vscode directory:

provisioning delle risorse di Azure

Prima di avviare il debug, effettuare il provisioning delle risorse di Azure necessarie.

1. Aprire il riquadro comandi.

2. Immettere Sviluppatori di Azure: effettuare il provisioning delle risorse di Azure.

   

Eseguire il debug di un'API

L'API debug della configurazione di debug esegue automaticamente il server API e collega il debugger. Per testare questo modello, seguire questa procedura:

1. Dalla directory del src/api/src/routes progetto aprire lists.ts.

2. Impostare un punto di interruzione alla riga 16.

3. Nella barra delle attività selezionare Esegui ed esegui debug configurazione debug>dell'API >Avvia debug freccia.

   

4. Scegliere Console di debug dal menu Visualizza.

5. Attendere il messaggio che indica che il debugger è in ascolto sulla porta 3100.

   

6. Nella shell del terminale preferito immettere il comando seguente: curl http://localhost:3100/lists

   

7. Quando viene raggiunto il punto di interruzione impostato in precedenza, l'esecuzione dell'app verrà sospesa. A questo punto, è possibile eseguire attività di debug standard, ad esempio:

   • Esame delle variabili
   • Esaminare lo stack di chiamate
   • Impostare altri punti di interruzione.

8. Premere <F5> per continuare a eseguire l'app. L'app di esempio restituisce un elenco vuoto.

Eseguire il debug di un'app Front-end React

Per usare la configurazione Web di debug, è necessario avviare entrambe le operazioni:

• Server API
• Server Web di sviluppo

Per testare questo modello, seguire questa procedura:

1. Aprire il riquadro comandi ed eseguire l'attività Task: Esegui.

   

2. Immettere e selezionare Avvia API e Web

   

   È possibile verificare se il server Web locale è in esecuzione passando all'URL seguente in un Web browser: http://localhost:3000.

3. Nella directory del src/web/src/components progetto aprire todoItemListPane.tsx.

4. Impostare un punto di interruzione sulla riga 150 (la prima riga della deleteItems funzione).

5. Nella barra delle attività selezionare Esegui ed esegui debug debug configurazione debug>Web > la freccia Avvia debug.

   

6. Se si esegue l'app Web, il browser predefinito aprirà l'URL seguente: http://localhost:3000. È ora possibile eseguire il debug dell'app aggiungendo un elemento, selezionandolo dall'elenco e selezionando Elimina.

   

7. Quando viene raggiunto il punto di interruzione impostato in precedenza, l'esecuzione dell'app verrà sospesa. A questo punto, è possibile eseguire attività di debug standard, ad esempio:

   • Esame delle variabili
   • Esaminare lo stack di chiamate
   • Impostare altri punti di interruzione

8. Premere <F5> per continuare a eseguire l'app e l'elemento selezionato verrà eliminato.

Eseguire ed eseguire il debug di app basate sul computer locale usando Visual Studio e l'interfaccia della riga di comando per sviluppatori di Azure (azd). In questa guida si userà il modello React Web App con l'API C# e MongoDB in Azure . È possibile applicare i principi appresi in questo articolo a uno dei modelli dell'interfaccia della riga di comando per sviluppatori di Azure.

Prerequisiti

• Installare azd
• Eseguire azd con il modello Node.js
• .NET SDK 6.0

Installare e abilitare la funzionalità di anteprima

1. Installare Visual Studio Preview

   Nota

   Questo è diverso da Visual Studio. Se si dispone della versione non di anteprima di Visual Studio, è comunque necessario installarla.

2. Aprire Visual Studio Preview.

3. Dal menu Strumenti selezionare Opzioni>Funzionalità di anteprima.

4. Assicurarsi che l'integrazione con azd, l'interfaccia della riga di comando per sviluppatori di Azure sia abilitata.

   

Aprire la soluzione API

1. Aprire la Todo.Api.sln soluzione nella /src/api directory .

   Se è stata abilitata la azd funzionalità di integrazione, il azure.yaml file viene rilevato. Visual Studio inizializza automaticamente il modello di app ed esegue azd env refresh.

2. Espandere servizi Connessione ed per visualizzare tutte le dipendenze.

   Anche se il front-end Web in esecuzione in app Azure Servizio non fa parte della soluzione API, viene rilevato e incluso in Dipendenze del servizio

   

Eseguire ed eseguire il debug

1. Dalla directory del src/api progetto aprire ListController.cs.

2. Impostare un punto di interruzione alla riga 20.

   

3. Premere <F5>.

4. Attendere il messaggio che indica che il server Web è in ascolto sulla porta 3101.

   

5. Nel browser preferito immettere l'indirizzo seguente: https://localhost:3101/lists

6. Quando viene raggiunto il punto di interruzione impostato in precedenza, l'esecuzione dell'app verrà sospesa. A questo punto, è possibile eseguire attività di debug standard, ad esempio:

   • Esame delle variabili
   • Esaminare lo stack di chiamate
   • Impostare altri punti di interruzione

7. Premere <F5> per continuare a eseguire l'app.

   L'app di esempio restituisce un elenco (o un elenco vuoto [] se non è stato avviato il front-end Web in precedenza):

   [{"id":"fb9c1cb3811349b993421fc0e815c4c1","name":"My List","description":null,"createdDate":"2022-06-27T01:10:16.7721172+00:00","updatedDate":null}]
   

Altre azd integrazioni

Gestire l'ambiente azd

Per gestire l'ambiente azd :

1. Selezionare ... nell'angolo superiore destro del riquadro Dipendenze del servizio.

2. Selezionare una delle opzioni seguenti nel menu a discesa:

   • Creazione di un nuovo ambiente
   • Selezionare e impostare un ambiente specifico come ambiente attivo corrente
   • Eseguire il deprovisioning di un ambiente

   

Effettuare il provisioning delle risorse dell'ambiente

È possibile effettuare il provisioning delle risorse di Azure nell'ambiente.

1. In servizi Connessione ed fare clic sull'icona in alto a destra per ripristinare/effettuare il provisioning delle risorse dell'ambiente.

   

2. Confermare il nome dell'ambiente, la sottoscrizione e il percorso.

Pubblicare l'app

Se si apportano aggiornamenti, è possibile pubblicare l'app seguendo questa procedura:

1. Nella Esplora soluzioni espandere Servizi Connessione ed.

2. Seleziona Pubblica.

3. Selezionare Aggiungi un profilo di pubblicazione.

4. Selezionare una destinazione di Azure e selezionare Avanti.

5. Selezionare Ambiente dell'interfaccia della riga di comando per sviluppatori di Azure e selezionare Avanti.

   

6. Seleziona l'ambiente.

7. Selezionare Fine.

Altre risorse

• Visual Studio Connessione ed Service
• Panoramica dello strumento di pubblicazione in Visual Studio