Panoramica della distribuzione dell'app JavaScript in Azure

Per distribuire l'app basata su JavaScript in Azure, spostare un file o un set di file in Azure da gestire tramite un endpoint HTTP. Il processo di spostamento dei file è denominato distribuzione.

Prerequisiti

Sottoscrizione di Azure: crearne una gratuitamente.
Node.js LTS.
Un account GitHub se si prevede di eseguire la distribuzione da un repository GitHub.

Strumenti di distribuzione

Azure offre vari strumenti di distribuzione per soddisfare esigenze diverse. Ecco alcuni metodi comuni:

Metodo	Dettagli
CLI per sviluppatori di Azure	Ideale per gli sviluppatori che preferiscono gli strumenti da riga di comando e devono automatizzare il provisioning e la distribuzione delle risorse.
estensioni di Visual Studio Code	Adatto per distribuzioni manuali, di test o non frequenti. Richiede le estensioni di Azure pertinenti installate in locale.
CLI di Azure	Utile per distribuzioni manuali o occasionali. Richiede l'installazione locale di interfaccia della riga di comando di Azure.
GitHub Actions	Ideale per distribuzioni automatiche o continue attivate dalle modifiche nel repository GitHub.

Esistono altri strumenti di distribuzione basati sul servizio specifico. Ad esempio, Azure servizio app supporta un'ampia gamma di strumenti di distribuzione:

da file ZIP
con FTP
Dropbox o OneDrive
Git locale
cURL
SSH

È possibile redistribuire al servizio App usando uno dei metodi forniti, anche se non è stato il metodo usato per la distribuzione originale. Potrebbe essere disponibile una configurazione prima di ridistribuire se si stanno cambiando i metodi.

Servizi di hosting di Azure per app JavaScript

Per iniziare, scegliere il servizio di hosting più adatto all'app. Dopo aver scelto un servizio, usa la procedura di distribuzione consigliata per raggiungere più rapidamente il tutorial corretto.

Servizio	Migliore per	Funzionalità principali	Percorso consigliato
App Web statiche di Azure	Applicazioni web moderne con interfacce statiche, come React, Vue o Angular, e API serverless facoltative.	SSL gratuito, CDN globale, ambienti di staging per le pull request e autenticazione integrata.	Inizia con Distribuisci su App Web statiche di Azure.
Servizio app di Azure	Applicazioni Web complete e API REST.	Scalabilità automatica predefinita, slot di distribuzione e facile integrazione con i servizi di Azure.	Inizia con Distribuisci con l'interfaccia della riga di comando per sviluppatori di Azure o Distribuisci con Visual Studio Code.
Funzioni di Azure	Applicazioni serverless basate su eventi e microservizi.	Prezzi per esecuzione con pagamento in base al consumo, scalabilità automatica e più trigger e associazioni.	Inizia con Distribuisci con Visual Studio Code e quindi continua con Distribuisci in Funzioni di Azure.
App per container di Azure	Applicazioni e microservizi in contenitori.	Contenitori serverless basati su Kubernetes, integrazione dapr e scalabilità basata su eventi.	Inizia con Distribuisci su App contenitore di Azure.

Per altre informazioni sulla scelta del servizio di hosting corretto, vedere Hosting di applicazioni in Azure.

Metodi di distribuzione con strumenti

Dopo aver scelto un servizio di hosting, scegliere il metodo di distribuzione più adatto al funzionamento.

Compilazione prima della distribuzione: per compilazioni complesse o lunghe, creare un pacchetto dell'applicazione in un file ZIP e distribuirlo. Un pacchetto di distribuzione consente di controllare e testare la compilazione prima della distribuzione.
Compilazione durante la distribuzione: per compilazioni più semplici, usare la variabile di ambiente fornita da Azure SCM_DO_BUILD_DURING_DEPLOYMENT=true per compilare l'app durante la distribuzione.

Se si esegue la distribuzione nel servizio app, sono disponibili anche altri metodi di distribuzione:

slot di distribuzione nel servizio app di Azure consente di creare ambienti separati per la gestione temporanea e la produzione. L'uso degli slot consente di testare l'app in un ambiente di staging prima di sostituirla con lo slot di produzione, garantendo una distribuzione fluida e senza errori. Altre informazioni sugli slot di distribuzione.

Non usare gli slot di distribuzione per combinare scopi di distribuzione. Tutti gli slot di distribuzione condividono il servizio app, quindi è necessario assicurarsi che i pattern di traffico e l'utilizzo previsto di tutti gli slot siano uguali. Se è necessario disporre di un ambiente di test o di staging ospitato, questo dovrebbe essere un servizio app separato.

Distribuire con Azure Developer CLI

Per il percorso end-to-end più rapido per il provisioning di risorse Azure e la distribuzione dell'app, iniziare con l'interfaccia della riga di comando per sviluppatori di Azure (azd).

L'interfaccia della riga di comando di Azure Developer semplifica il processo di distribuzione dell'app in Azure. Seguire questa procedura:

Installare la CLI per sviluppatori di Azure.
Trovare un progetto esistente che usa molte delle stesse risorse usate dal progetto.
Inizializzare una versione locale del progetto da usare come modello di infrastruttura per il proprio progetto.

Creare le risorse e distribuire il codice in Azure.

azd auth login
azd init --template <template-name>
azd up

Usa questo percorso quando vuoi un unico flusso di lavoro per l'infrastruttura, la distribuzione e ambienti ripetibili.

Distribuire con Visual Studio Code

Se si vuole un flusso di distribuzione guidato nell'editor, usare le estensioni Azure per Visual Studio Code.

Per distribuire o ridistribuire l'app del servizio app usando Visual Studio Code, seguire questa procedura:

Installare le estensioni di Azure correlate, ad esempio Servizio app di Azure o Funzioni di Azure.
Aprire Azure Explorer. Seleziona l'icona di Azure nella barra laterale primaria o usa la scelta rapida da tastiera (Shift + Alt + A).
Nel gruppo di risorse selezionare la sottoscrizione e il servizio.
Fare clic con il pulsante destro del mouse sul servizio e quindi selezionare Distribuisci nell'app Web....

Passaggi successivi specifici del servizio

Dopo aver scelto un servizio di hosting e un metodo di distribuzione, continuare con il percorso specifico del servizio corrispondente all'app.

Distribuire su App Web statiche di Azure

App Web statiche di Azure è ideale per le applicazioni Web moderne create con framework JavaScript. Per distribuire:

Installare l'estensione App Web statiche di Azure per Visual Studio Code.
Compilare l'applicazione in locale per assicurarsi che funzioni come previsto.
In Visual Studio Code, apri Esplora risorse di Azure e trova App Web statiche di Azure.
Fare clic con il pulsante destro del mouse sulla sottoscrizione e quindi scegliere Crea app Web statica.
Seguire le istruzioni per connettere il repository GitHub. Azure crea automaticamente un flusso di lavoro di GitHub Actions.
Eseguire il push delle modifiche nel repository per attivare le distribuzioni automatiche.

Per altri dettagli, vedere Distribuire l'app Web in App Web statiche di Azure.

Eseguire la distribuzione nel servizio app di Azure

Servizio app di Azure è una scelta ottimale quando è necessario un hosting gestito per un'app Web o un'API. È possibile eseguire la distribuzione usando azd, Visual Studio Code, interfaccia della riga di comando di Azure o GitHub Actions.

È possibile rieseguire la distribuzione nel proprio App Service usando uno qualsiasi dei metodi disponibili, anche se quel metodo non è stato usato per la distribuzione iniziale. Potrebbe essere necessaria una configurazione prima di ridistribuire se si stanno cambiando i metodi.

Per un percorso di distribuzione specifico del servizio, iniziare con una di queste esercitazioni:

Distribuire con interfaccia della riga di comando di Azure

Per distribuire l'app JavaScript usando il interfaccia della riga di comando di Azure, seguire questa procedura:

Installare il interfaccia della riga di comando di Azure se non è già disponibile.
Accedere all'account di Azure.
```
az login
```

Creare o usare un piano di servizio app esistente e un servizio app.

az appservice plan create --name <plan-name> --resource-group <resource-group> --sku B1 --is-linux
az webapp create --resource-group <resource-group> --plan <plan-name> --name <app-name> --runtime "NODE|20-lts"

Distribuire il codice dell'applicazione come file ZIP o da un repository Git locale.

Per la distribuzione ZIP:

az webapp deployment source config-zip --resource-group <resource-group> --name <app-name> --src <path-to-zip>

Per la distribuzione Git locale:

az webapp deployment source config-local-git --resource-group <resource-group> --name <app-name>
az webapp config appsettings set --resource-group <resource-group> --name <app-name> --settings DEPLOYMENT_BRANCH='main'
git remote add azure <git-url>
git push azure main

Distribuire con GitHub Actions

GitHub Actions automatizza il processo di distribuzione ogni volta che si esegue il push delle modifiche nel repository GitHub. Per configurare GitHub Actions per la distribuzione di Azure:

Nel tuo repository GitHub, crea la directory .github/workflows/ se non esiste.
Creare un file del flusso di lavoro ,ad esempio , azure-deploy.ymlche definisce i passaggi di distribuzione.

Usare un'azione di accesso Azure per eseguire l'autenticazione con Azure. Consigliato: Usare OpenID Connect (OIDC) per una sicurezza avanzata anziché archiviare le credenziali come segreti.

Opzione A: OpenID Connect (scelta consigliata)

permissions:
  id-token: write
  contents: read

- name: Azure Login
  uses: azure/login@v2
  with:
    client-id: ${{ secrets.AZURE_CLIENT_ID }}
    tenant-id: ${{ secrets.AZURE_TENANT_ID }}
    subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}

- name: Deploy to Azure Web App
  uses: azure/webapps-deploy@v3
  with:
    app-name: <app-name>
    package: '.'

Per istruzioni sull'installazione, vedere Configurare OpenID Connect con GitHub Actions.

Opzione B: Autenticazione basata su credenziali (legacy)

- name: Azure Login
  uses: azure/login@v2
  with:
    creds: ${{ secrets.AZURE_CREDENTIALS }}

- name: Deploy to Azure Web App
  uses: azure/webapps-deploy@v3
  with:
    app-name: <app-name>
    package: '.'

Aggiungere i passaggi di distribuzione appropriati per il servizio di hosting (Servizio app, App Web statiche o App contenitore).
Eseguire il commit e il push del file del flusso di lavoro nel repository per attivare le distribuzioni automatiche.

Per indicazioni più dettagliate, vedere Distribuire con GitHub Actions.

Distribuire in Funzioni di Azure

Funzioni di Azure è un'ottima soluzione per le app JavaScript guidate dagli eventi e le API serverless.

Per eseguire la distribuzione da Visual Studio Code:

Installare l'estensione Funzioni di Azure.
Apri Esplora risorse di Azure e seleziona la sottoscrizione di Azure.
Crea o seleziona l'app per le funzioni.
Usare i comandi di estensione per pubblicare il progetto locale.

Per indicazioni sul servizio, vedere Funzioni di Azure documentazione e Panoramica di Funzioni.

Eseguire la distribuzione in App Azure Container

App contenitore di Azure offre l'hosting di container serverless per applicazioni JavaScript. Per distribuire:

Containerizzare l'applicazione usando Docker. Creare un oggetto Dockerfile nella radice del progetto.
Compilare e testare il contenitore in locale.
Carica l'immagine del container nel Registro dei Container di Azure.
Usare l'estensione App Azure Container o l'interfaccia della riga di comando di Azure per creare e distribuire l'app contenitore.

Per una guida completa, vedere Panoramica di JavaScript in App Azure Container.

Passaggi di compilazione

Dopo aver scelto il servizio e il percorso di distribuzione, decidere quando deve essere eseguita la compilazione.

A seconda della complessità e delle esigenze di distribuzione dell'applicazione, è possibile scegliere di compilare l'app JavaScript prima o durante la distribuzione:

Compilazione prima della distribuzione: per compilazioni complesse o lunghe, creare un pacchetto dell'applicazione in un file ZIP e distribuirlo. Un pacchetto di distribuzione consente di controllare il processo di compilazione e di testarlo prima della distribuzione.
Compilazione durante la distribuzione: per compilazioni più semplici, usare la variabile SCM_DO_BUILD_DURING_DEPLOYMENT=true di ambiente fornita Azure per compilare l'app durante la distribuzione.

Slot di distribuzione

Usa gli slot di distribuzione dopo aver messo in esecuzione un'app di App Service e quando hai bisogno di un processo di distribuzione più sicuro.

slot di distribuzione nel servizio app di Azure consente di creare ambienti separati per la gestione temporanea e la produzione. Utilizzando gli slot, è possibile testare l'app in un ambiente di staging prima di effettuare lo scambio con lo slot di produzione, garantendo una distribuzione fluida e senza errori.

Non usare gli slot di distribuzione per combinare scopi di distribuzione. Tutti gli slot di distribuzione condividono l'App Service, quindi è necessario assicurarsi che gli schemi di traffico e l'uso previsto di tutti gli slot siano gli stessi. Se è necessario un ambiente ospitato di test o di staging, usa un'istanza di App Service separata.

Connettersi all'ambiente ospitato di Azure

Per l'accesso manuale o occasionale agli ambienti ospitati, vedere come visualizzare i file nel tuo ambiente Azure ospitato.
Per accesso automatico o coerente, considera i passaggi necessari per configurare uno dei metodi di distribuzione.

Visualizzare i file nell'ambiente ospitato in Azure

Esistono diversi modi per visualizzare immediatamente i file nell'app Web di Azure ospitata o nell'app per le funzioni. Se si usano slot nella risorsa ospitata, è necessario assicurarsi di essere nello slot corretto prima di visualizzare i file.

Visualizzare i file nella del portale di Azure : selezionare Console in Strumenti di sviluppo per la risorsa di hosting.
Visualizzare i file nell'estensione VS Code: selezionare l'icona Azure nella barra attività. Nella sezione Risorse selezionare la sottoscrizione e il servizio. Il nodo File fornisce una visualizzazione dei tuoi file remoti.
- le estensioni Servizio app di Azure e Funzioni di Azure offrono entrambe una visualizzazione dei file remoti.

Visualizzare l'endpoint HTTP nel portale di Azure

Puoi visualizzare l'endpoint HTTP dalla pagina Panoramica del servizio nel portale di Azure.

esercitazioni sulla distribuzione di con Visual Studio Code
Hosting di app in Azure
Documentazione di App Web statiche di Azure
Documentazione di App contenitore di Azure
Documentazione del servizio app di Azure
Documentazione di Funzioni di Azure

Commenti e suggerimenti

Questa pagina è stata utile?

Last updated on 2026-06-26