Creare un'app Web Node.js in Azure

In questa guida introduttiva si apprenderà come creare e distribuire la prima app Web Node.js (Express) in Servizio app di Azure. servizio app supporta varie versioni di Node.js sia in Linux che in Windows.

Questa guida introduttiva configura un'app servizio app nel livello Gratuito e non comporta alcun costo per la sottoscrizione di Azure.

Configurare l'ambiente iniziale

• Avere a disposizione un account Azure con una sottoscrizione attiva. Creare un account gratuitamente.
• Installare Node.js e npm. Eseguire il comando node --version per verificare che Node.js sia installato.
• Installare Visual Studio Code.
• Estensione Servizio app di Azure per Visual Studio Code.

• Avere a disposizione un account Azure con una sottoscrizione attiva. Creare un account gratuitamente.
• Installare Node.js LTS e npm. Eseguire il comando node --version per verificare che Node.js sia installato.
• Installare l'interfaccia della riga di comando di Azure con cui si eseguono comandi in qualsiasi shell per creare e configurare le risorse di Azure.

• Avere a disposizione un account Azure con una sottoscrizione attiva. Creare un account gratuitamente.
• Installare Node.js LTS e npm. Eseguire il comando node --version per verificare che Node.js sia installato.
• Avere un client FTP (ad esempio FileZilla), per connettersi all'app.

Creare l'applicazione Node.js

In questo passaggio viene creata un'applicazione di base Node.js e assicurarsi che venga eseguita nel computer.

Suggerimento

Se è già stata completata l'esercitazione su Node.js, è possibile passare alla sezione sulla distribuzione in Azure.

1. Creare un'applicazione Node.js usando Express Generator, installata per impostazione predefinita con Node.js e NPM.

   npx express-generator myExpressApp --view ejs
   

2. Passare alla directory dell'applicazione e installare i pacchetti NPM.

   cd myExpressApp && npm install
   

3. Avviare il server di sviluppo con informazioni di debug.

   DEBUG=myexpressapp:* npm start
   

4. In un browser passare a http://localhost:3000. L'output dovrebbe essere simile al seguente:

   

Si è verificato un problema

Distribuisci in Azure

Prima di continuare, assicurarsi che tutti i prerequisiti siano installati e configurati.

Nota

Per l'esecuzione dell'applicazione Node.js in Azure, è necessario ascoltare la PORT porta fornita dalla variabile di ambiente. Nell'app Express generata questa variabile di ambiente viene già usata nel bin dello script di avvio /www (cercare process.env.PORT).

Accedere ad Azure

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

   code .
   

2. In Visual Studio Code selezionare il logo di Azure nella barra delle attività.

3. In Esplora servizio app selezionare Accedi ad Azure e seguire le istruzioni.

   In Visual Studio Code è necessario visualizzare l'indirizzo di posta elettronica di Azure nella barra di stato e la sottoscrizione nell'esplorazione del SERVIZIO APP di AZURE .

   

Si è verificato un problema

Configurare l'app servizio app e distribuire il codice

1. Selezionare la cartella myExpressApp .

Distribuire in Azure

2. Fare clic con il pulsante destro del mouse su Servizi app e scegliere Crea nuova app Web. Un contenitore Linux viene usato per impostazione predefinita.

3. Digitare un nome univoco a livello globale per l'app Web e premere INVIO. Il nome deve essere univoco in tutte le risorse di Azure e usare solo caratteri alfanumerici (' A-Z ',' a-z ' è 0-9') e trattini ('-').

4. In Selezionare uno stack di runtime selezionare la versione Node.js desiderata. È consigliabile usare una versione LTS.

5. In Selezionare un piano tariffario selezionare Gratuito (F1) e attendere la creazione delle risorse in Azure.

6. Nel popup Distribuire sempre l'area di lavoro "myExpressApp" in <nome> dell'app" selezionare Sì. In questo modo, purché si trovi nella stessa area di lavoro, Visual Studio Code viene distribuito nella stessa app servizio app ogni volta.

   Mentre Visual Studio Code crea le risorse di Azure e distribuisce il codice, mostra le notifiche di stato.

7. Al termine della distribuzione, selezionare Sfoglia sito Web nel popup di notifica. Il browser deve visualizzare la pagina predefinita Express.

Distribuire in Windows

2. Fare clic con il pulsante destro del mouse su Servizi app e scegliere Crea nuova app Web... Avanzate.

3. Digitare un nome univoco a livello globale per l'app Web e premere INVIO. Il nome deve essere univoco in tutte le risorse di Azure e usare solo caratteri alfanumerici (' A-Z ',' a-z ' è 0-9') e trattini ('-').

4. Selezionare Crea un nuovo gruppo di risorse, quindi immettere un nome per il gruppo di risorse, ad esempio AppServiceQS-rg.

5. Selezionare la versione Node.js desiderata. È consigliabile usare una versione LTS.

6. Selezionare Windows come sistema operativo.

7. Selezionare la posizione da cui si vuole servire l'app. Ad esempio, Europa occidentale.

8. Selezionare Crea nuovo piano servizio app, quindi immettere un nome per il piano (ad esempio AppServiceQS-plan), quindi selezionare F1 Gratuito per il piano tariffario.

9. Per Selezionare una risorsa di Application Insights per l'app, selezionareIgnora per il momento e attendere la creazione delle risorse in Azure.

10. Nel popup Distribuire sempre l'area di lavoro "myExpressApp" in <nome> dell'app" selezionare Sì. In questo modo, purché si trovi nella stessa area di lavoro, Visual Studio Code viene distribuito nella stessa app servizio app ogni volta.

    Mentre Visual Studio Code crea le risorse di Azure e distribuisce il codice, mostra le notifiche di stato.

    Nota

    Al termine della distribuzione, l'app di Azure non viene ancora eseguita perché la radice del progetto non ha un web.config. Seguire i passaggi rimanenti per generarlo automaticamente. Per altre informazioni, vedere Non si dispone dell'autorizzazione per visualizzare questa directory o pagina.

11. Nel servizio app Explorer in Visual Studio code espandere il nodo per la nuova app, fare clic con il pulsante destro del mouse su Impostazioni applicazione e scegliere Aggiungi nuova impostazione:

    

12. Immettere SCM_DO_BUILD_DURING_DEPLOYMENT per la chiave dell'impostazione.

13. Immettere true per il valore dell'impostazione.

    Questa impostazione dell'app abilita l'automazione della compilazione in fase di distribuzione, che rileva automaticamente lo script di avvio e genera il web.config con esso.

14. Nell'servizio app explorer selezionare di nuovo l'icona Distribuisci nell'app Web, confermare facendo clic di nuovo su Distribuisci.

15. Attendere il completamento della distribuzione, quindi selezionare Sfoglia sito Web nel popup di notifica. Il browser deve visualizzare la pagina predefinita Express.

Si è verificato un problema

Nel terminale assicurarsi di essere nella directory myExpressApp e distribuire il codice nella cartella locale (myExpressApp) usando il comando az webapp up :

Distribuire in Azure

az webapp up --sku F1 --name <app-name>

Distribuire in Windows

az webapp up --sku F1 --name <app-name> --os-type Windows

• Se il comando non è riconosciuto, assicurarsi di avere installato l'interfaccia della riga di comando di Azure come descritto in Configurare l'ambienteaz iniziale.
• Sostituire <app_name> con un nome univoco nell'ambito di Azure (i caratteri validi sono a-z, 0-9 e - ). Un criterio valido consiste nell'usare una combinazione del nome della società e di un identificatore dell'app.
• L'argomento --sku F1 crea l'app Web nel piano tariffario gratuito, che non comporta alcun costo.
• Facoltativamente, è possibile includere l'argomento --location <location-name>, dove <location_name> è un'area di Azure disponibile. Per recuperare un elenco di aree consentite per l'account Azure, è possibile eseguire il comando az account list-locations.
• Il comando crea un'app Linux per Node.js per impostazione predefinita. Per creare invece un'app di Windows, usare l'argomento --os-type .
• Se viene visualizzato l'errore "Impossibile rilevare automaticamente lo stack di runtime dell'app", assicurarsi di eseguire il comando nella directory myExpressApp (vedere Risoluzione dei problemi di rilevamento automatico con az webapp up).

Il completamento del comando può richiedere alcuni minuti. Durante l'esecuzione, fornisce messaggi relativi alla creazione del gruppo di risorse, al piano di servizio app e alla risorsa dell'app, alla configurazione della registrazione e all'esecuzione della distribuzione ZIP. Viene quindi visualizzato il messaggio che indica che è possibile avviare l'app all'indirizzo http://<nome-app>.azurewebsites.net, ovvero l'URL dell'app in Azure.

The webapp '<app-name>' doesn't exist
Creating Resource group '<group-name>' ...
Resource group creation complete
Creating AppServicePlan '<app-service-plan-name>' ...
Creating webapp '<app-name>' ...
Configuring default logging for the app, if not already enabled
Creating zip with contents of dir /home/cephas/myExpressApp ...
Getting scm site credentials for zip deployment
Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202
You can launch the app at http://<app-name>.azurewebsites.net
{
  "URL": "http://<app-name>.azurewebsites.net",
  "appserviceplan": "<app-service-plan-name>",
  "location": "centralus",
  "name": "<app-name>",
  "os": "<os-type>",
  "resourcegroup": "<group-name>",
  "runtime_version": "node|10.14",
  "runtime_version_detected": "0.0",
  "sku": "FREE",
  "src_path": "//home//cephas//myExpressApp"
}

Nota

Il comando az webapp up esegue le azioni seguenti:

• Creare un gruppo di risorse predefinito.

• Creare un piano di servizio app predefinito.

• Creare un'app con il nome specificato.

• Zip distribuisce tutti i file dalla directory di lavoro corrente , con automazione di compilazione abilitata.

• Memorizzare nella cache i parametri in locale nel file con estensione azure/config in modo che non sia necessario specificarli di nuovo durante la distribuzione in un secondo momento con az webapp up o altri az webapp comandi dalla cartella del progetto. I valori memorizzati nella cache vengono usati automaticamente per impostazione predefinita.

Accedere al portale di Azure

Accedere al portale di Azure all'indirizzo https://portal.azure.com.

Creare le risorse di Azure

1. Digitare i servizi app nella ricerca. In Servizi selezionare Servizi app.

   

2. Nella pagina Servizi app selezionare Crea.

3. Nella scheda Nozioni di base , in Dettagli progetto, verificare che la sottoscrizione corretta sia selezionata e quindi selezionare Crea nuovo 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 14 LTSRuntime stack, un sistema operativo e un'area da cui si vuole servire l'app.

   

5. In servizio app Piano selezionare Crea nuovo piano di servizio app. Digitare myAppServicePlan per il nome. Per passare al livello gratuito, selezionare Modifica dimensione, selezionare Scheda Sviluppo/Test , selezionare F1 e selezionare il pulsante Applica nella parte inferiore della pagina.

   

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

   

7. Dopo l'esecuzione della convalida, selezionare il pulsante Crea nella parte inferiore della pagina.

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

   

Ottenere le credenziali FTP

Servizio app di Azure supporta due tipi di credenziali per la distribuzione FTP/S. Queste credenziali non sono uguali alle credenziali della sottoscrizione di Azure. In questa sezione vengono disponibili le credenziali dell'ambito applicazione da usare con FileZilla.

1. Nella pagina dell'app servizio app selezionare Centro distribuzione nel menu a sinistra e selezionare la scheda Credenziali FTPS.

   

2. Aprire FileZilla e creare un nuovo sito.

3. Nella scheda credenziali FTPS copiare l'endpoint FTPS, il nome utente e la password in FileZilla.

   

4. Selezionare Connetti in FileZilla.

Distribuire file con FTP

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.

Ridistribuire gli aggiornamenti

È possibile distribuire le modifiche a questa app eseguendo modifiche in Visual Studio Code, salvando i file e quindi ridistribuendo l'app di Azure. Ad esempio:

1. Dal progetto di esempio aprire visualizzazioni/index.ejs e modificare

   <p>Welcome to <%= title %></p>
   

   to

   <p>Welcome to Azure</p>
   

2. Nell'servizio app explorer selezionare di nuovo l'icona Distribuisci nell'app Web, confermare facendo clic di nuovo su Distribuisci.

3. Attendere il completamento della distribuzione, quindi selezionare Sfoglia sito Web nel popup di notifica. Verrà visualizzato che il Welcome to Express messaggio è stato modificato in Welcome to Azure!.

2. Salvare le modifiche, quindi ridistribuire l'app usando nuovamente il comando az webapp up senza argomenti per Linux. Aggiungere --os-type Windows per Windows:

   az webapp up
   

   Questo comando usa i valori memorizzati nella cache localmente nel file .azure/config, ad esempio il nome dell'app, il gruppo di risorse e il piano di servizio app.

3. Al termine della distribuzione, aggiornare la pagina Web http://<app-name>.azurewebsites.net. Verrà visualizzato che il Welcome to Express messaggio è stato modificato in Welcome to Azure!.

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

3. Al termine della distribuzione, aggiornare la pagina Web http://<app-name>.azurewebsites.net. Verrà visualizzato che il Welcome to Express messaggio è stato modificato in Welcome to Azure!.

Trasmetti log

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

1. Nel servizio app Explorer fare clic con il pulsante destro del mouse sul nodo dell'app e selezionare Avvia log di streaming.

   

2. Se richiesto di riavviare l'app, selezionare Sì. Dopo il riavvio dell'app, viene visualizzata 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).
    

Si è verificato un problema

È 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:

az webapp log tail

Il comando usa il nome del gruppo di risorse memorizzato nella cache nel file .azure/config.

È anche possibile includere il --logs parametro con il comando az webapp up per aprire automaticamente il flusso di log nella distribuzione.

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 interrompere lo streaming di log in qualsiasi momento, premere 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 nella portale di Azure.

1. Nella stessa pagina servizio app per l'app usare il menu a sinistra 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 ---
    

Pulire le risorse

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

1. Nell'estensione di Azure di Visual Studio espandere Esplora gruppi di risorse .

2. Espandere la sottoscrizione, fare clic con il pulsante destro del mouse sul gruppo di risorse creato in precedenza e scegliere Elimina.

   

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

Si è verificato un problema

Nei passaggi precedenti sono state create risorse di Azure in un gruppo di risorse. Il gruppo di risorse ha un nome simile a "appsvc_rg_Linux_CentralUS", a seconda della località scelta.

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

az group delete --no-wait

Il comando usa il nome del gruppo di risorse memorizzato nella cache nel file .azure/config.

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

Quando non è più necessario, è possibile eliminare il gruppo di risorse, il servizio app e tutte le risorse correlate.

1. Nella pagina di panoramica 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.

   

Passaggi successivi

L'argomento avvio rapido è stato completato.

Esercitazione: App Node.js con MongoDB

Configurare l'app Node.js

 Proteggere con dominio e certificato personalizzati

Vedere le altre estensioni di Azure.

• Azure Cosmos DB
• Funzioni di Azure
• Strumenti di Docker
• Strumenti dell'interfaccia della riga di comando di Azure
• Strumenti di Azure Resource Manager

In alternativa, è possibile ottenere tutte queste soluzioni installando il pacchetto di estensioni Node per Azure.