Distribuire un'app Web Node.js in Azure

• Avere a disposizione un account Azure con una sottoscrizione attiva. Se non si ha un account, è possibile crearne uno gratuito.
• Installare Node.js LTS. Eseguire il comando node --version per verificare che Node.js sia installato.
• Installare Visual Studio Code.
• Installare l'estensione Servizio app di Azure per Visual Studio Code.

• Avere a disposizione un account Azure con una sottoscrizione attiva. Se non si ha un account, è possibile crearne uno gratuito.
• Installare Node.js LTS. Eseguire il comando node --version per verificare che Node.js sia installato.
• Installare l'interfaccia della riga di comando di Azure, che è possibile usare per eseguire comandi in una shell per creare e configurare le risorse di Azure.

• Avere a disposizione un account Azure con una sottoscrizione attiva. Se non si ha un account, è possibile crearne uno gratuito.
• Installare Node.js LTS. Eseguire il comando node --version per verificare che Node.js sia installato.
• Disporre di un client FTP, ad esempio FileZilla, per trasferire i file nel servizio app.

Accedere ad Azure

1. Nel terminale assicurarsi di trovarsi nella directory myExpressApp, quindi avviare Visual Studio Code con il comando seguente:

   code .
   

2. Nella barra attività in Visual Studio Code selezionare il logo di Azure.

3. Assicurati di aver eseguito l'accesso con il tuo account Azure.

Configurare l'app del servizio app e distribuire il codice

Nel terminale, assicurati di essere nella directory myExpressApp . Sostituisci <app-name> con un nome globalmente unico, poi crea il gruppo risorse, il piano App Service e l'app. Imposta SCM_DO_BUILD_DURING_DEPLOYMENT in modo che App Service installi le dipendenze e costruisca l'app quando distribuisci l'archivio sorgente.

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3 --is-linux
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24-lts"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24LTS"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

• Se il comando az non viene riconosciuto, assicurarsi di aver installato l'interfaccia della riga di comando di Azure come descritto in Configurare l'ambiente iniziale.
• Sostituisci <app-name> con un nome unico in tutto Azure (i caratteri validi sono a-z, 0-9, e -).
• L'argomento --sku P0v3 seleziona il livello di prezzo a pagamento Premium v3. Sostituisci eastus con la tua regione preferita; elenca le regioni disponibili con az account list-locations.
• --is-linux seleziona un piano Linux. Non includerlo in un piano Windows, come mostrato nella scheda Windows.

Crea un archivio ZIP dei file in myExpressApp, non della cartella che lo racchiude. Su Linux o macOS, esegui zip -r ../app.zip . -x '*/node_modules/*' '*/.git/*' '*/.env*' da myExpressApp. Su Windows, esegui Compress-Archive -Path (Get-ChildItem -Force -Name | Where-Object { $_ -notin @('node_modules', '.git') -and $_ -notlike '.env*' }) -DestinationPath ..\app.zip in PowerShell da myExpressApp. Poi distribuisci l'archivio:

az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip

Vai a https://<app-name>.azurewebsites.net per vedere l'app.

Creare le risorse di Azure

1. Accedere al portale di Azure.

2. Per iniziare a creare un'app Node.js, passare a https://portal.azure.com/#create/Microsoft.WebSite.

3. Nella scheda Informazioni di base verificare in Dettagli progetto che sia selezionata la sottoscrizione corretta e quindi selezionare l'opzione Crea nuovo per creare un gruppo di risorse. Immettere myResourceGroup come nome.

   

4. In Dettagli istanza digitare un nome univoco globale per l'app Web e selezionare Codice. Selezionare Node 24 LTS nello stack di runtime, un sistema operativoe un'area da cui si vuole gestire l'app.

   

5. In Piani tariffari selezionare Crea nuovo per creare un piano di servizio app. Digitare myAppServicePlan per il nome. Per passare al livello Gratuito, selezionare Gratuito F1 nell'elenco Piano tariffario .

   

6. Selezionare il pulsante Rivedi e crea nella parte inferiore della pagina.

   

7. Dopo l'esecuzione della convalida, selezionare il pulsante Creare in fondo alla pagina.

8. Al termine della distribuzione, selezionare Vai alla risorsa.

   

Ottenere le credenziali FTPS

Servizio app di Azure supporta due tipi di credenziali per la distribuzione FTP/S. Queste credenziali sono diverse dalle credenziali della sottoscrizione di Azure. In questa sezione si ottengono le credenziali dell'ambito applicazione da usare con il client FTP.

1. Nella pagina app del servizio app selezionare Centro distribuzione in Distribuzione nel menu della barra laterale e quindi selezionare la scheda Credenziali FTPS .

   

2. Aprire il client FTP e passare alla cartella myExpressApp .

3. Nella scheda Credenziali FTPS copiare l'endpoint FTPS, il nome utente e la password nel client FTP.

   

4. Selezionare Connetti nel client FTP.

Distribuire file con FTPS

1. Copiare tutti i file e le directory nella directory /site/wwwroot in Azure.

   

2. Passare all'URL dell'app per verificare che l'applicazione venga eseguita correttamente.

2. Nello strumento di esplorazione del Servizio app selezionare di nuovo l'icona Distribuisci nell'app Web e confermare facendo di nuovo clic su Distribuisci.

3. Attendere il completamento della distribuzione, quindi selezionare Esplora sito Web nel popup di notifica. Si noterà che il Welcome to Express messaggio è stato modificato in Welcome to Azure.

2. Salva le tue modifiche, ricrea .. /app.zip dai file dell'app come descritto in Deploy to Azure, e ridistribui:

   az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip
   

   Sostituisci <app-name> con il nome che hai usato quando hai creato l'app web.

3. Al termine della distribuzione, aggiornare la pagina Web. Si noterà che il Welcome to Express messaggio è stato modificato in Welcome to Azure.

2. Salvare le modifiche, quindi ridistribuire l'app usando il client FTP.

3. Al termine della distribuzione, aggiornare la pagina Web. Si noterà che il Welcome to Express messaggio è stato modificato in Welcome to Azure.

È possibile trasmettere l'output del log (chiamate a console.log()) dall'app di Azure direttamente nella finestra di output di Visual Studio Code.

1. In Risorse in Visual Studio Code fare clic con il pulsante destro del mouse sul nodo dell'app e quindi scegliere Avvia streaming log.

   

2. Se viene chiesto di riavviare l'app, selezionare Sì. Dopo il riavvio dell'app, verrà aperta la finestra di output di Visual Studio Code con una connessione al flusso di log.

3. Dopo alcuni secondi, nella finestra di output verrà visualizzato un messaggio che indica che si è connessi al servizio di streaming dei log. È possibile generare altre attività di output aggiornando la pagina nel browser.

   Connecting to log stream...
   2020-03-04T19:29:44  Welcome, you are now connected to log-streaming service. The default timeout is 2 hours.
   Change the timeout with the App Setting SCM_LOGSTREAM_TIMEOUT (in seconds).
   

È possibile accedere ai log della console generati dall'interno dell'app e del contenitore in cui è in esecuzione. I log includono qualsiasi output generato dalle chiamate a console.log().

Per trasmettere in streaming i log, eseguire il comando az webapp log tail:

• Abilita prima il loging: su Linux, esegui az webapp log config --resource-group myResourceGroup --name <app-name> --docker-container-logging filesystem; su Windows, esegui az webapp log config --resource-group myResourceGroup --name <app-name> --application-logging filesystem.

az webapp log tail --resource-group myResourceGroup --name <app-name>

Sostituisci <app-name> con il nome che hai usato quando hai creato l'app web.

Aggiornare l'app nel browser per generare i log della console, che includeranno messaggi che descrivono le richieste HTTP per l'app. Se non viene visualizzato immediatamente un output, riprovare dopo 30 secondi.

Per arrestare lo streaming di log in qualsiasi momento, selezionare CTRL+C nel terminale.

È possibile accedere ai log della console generati dall'interno dell'app e del contenitore in cui è in esecuzione. È possibile trasmettere l'output del log (chiamate a console.log()) dall'app Node.js direttamente nel portale di Azure.

1. Nella stessa pagina App Service dell'app, usare il menu della barra laterale per scorrere fino alla sezione Monitoraggio e selezionare Log stream.

   

2. Dopo alcuni secondi, nella finestra di output verrà visualizzato un messaggio che indica che si è connessi al servizio di streaming dei log. È possibile generare altre attività di output aggiornando la pagina nel browser.

   Connecting...
   2021-10-26T21:04:14  Welcome, you are now connected to log-streaming service.
   Starting Log Tail -n 10 of existing logs ----
   /appsvctmp/volatile/logs/runtime/81b1b83b27ea1c3d598a1cdec28c71c4074ce66c735d0be57f15a8d07cb3178e.log
   2021-10-26T21:04:08.614384810Z: [INFO]
   2021-10-26T21:04:08.614393710Z: [INFO]  # Enter the source directory to make sure the script runs where the user expects
   2021-10-26T21:04:08.614399010Z: [INFO]  cd "/home/site/wwwroot"
   2021-10-26T21:04:08.614403210Z: [INFO]
   2021-10-26T21:04:08.614407110Z: [INFO]  export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
   2021-10-26T21:04:08.614411210Z: [INFO]  if [ -z "$PORT" ]; then
   2021-10-26T21:04:08.614415310Z: [INFO]          export PORT=8080
   2021-10-26T21:04:08.614419610Z: [INFO]  fi
   2021-10-26T21:04:08.614423411Z: [INFO]
   2021-10-26T21:04:08.614427211Z: [INFO]  node /opt/startup/default-static-site.js
   Ending Log Tail of existing logs ---
   

Nei passaggi precedenti sono state create risorse di Azure in un gruppo di risorse. La procedura descritta in questa guida introduttiva inserisce tutte le risorse in questo gruppo di risorse. Per eseguire la pulizia, è sufficiente rimuovere il gruppo di risorse.

1. Nell'estensione di Azure di Visual Studio Code, nell'elenco Raggruppa per, selezionare Raggruppa per gruppo di risorse.

2. Nell'elenco Risorse espandere la sottoscrizione, fare clic con il pulsante destro del mouse sul gruppo di risorse creato in precedenza e quindi scegliere Elimina gruppo di risorse.

   

3. Quando richiesto, confermare l'eliminazione immettendo il nome del gruppo di risorse che si sta eliminando. Dopo aver verificato, il gruppo di risorse viene eliminato e al termine viene visualizzata una notifica .

Nei passaggi precedenti della CLI, hai creato risorse Azure in myResourceGroup.

Se non si prevede di usare queste risorse in futuro, eliminare i gruppi di risorse eseguendo questo comando:

az group delete --name myResourceGroup --no-wait

Con l'argomento --no-wait, il comando restituisce il risultato prima del completamento dell'operazione.

È possibile eliminare il gruppo di risorse, il servizio app e tutte le risorse correlate quando non sono più necessari.

1. Nella pagina Panoramica del servizio app selezionare il gruppo di risorse creato nel passaggio Crea risorse di Azure.

   

2. Nella pagina Gruppo di risorse selezionare Elimina gruppo di risorse. Confermare il nome del gruppo di risorse da terminare eliminando le risorse.