Condividi tramite

Distribuire l'app Web in App Web statiche di Azure

  • Articolo

Questo articolo illustra come creare una nuova app Web con il proprio framework preferito, eseguirla in locale e quindi distribuirla in App Web statiche di Azure.

Prerequisiti

Per completare questa esercitazione è necessario:

Risorsa Descrizione
Sottoscrizione di Azure Se non si ha un account, è possibile crearne uno gratuito.
Node.JS Installare la versione 20.0 o successiva.
Interfaccia della riga di comando di Azure Installare la versione 2.6x o successiva.

È anche necessario un editor di testo. Per l'uso con Azure è consigliabile Visual Studio Code.

È possibile eseguire l'app creata in questo articolo sulla propria piattaforma preferita, tra cui: Linux, macOS, Windows o sottosistema Windows per Linux.

Creare l'app Web

  1. Aprire una finestra del terminale.

  1. Selezionare una directory appropriata per il codice, quindi eseguire i comandi seguenti.

    npm create vite@latest swa-vanilla-demo -- --template=vanilla
cd swa-vanilla-demo
npm install
npm run dev

    Durante l'esecuzione di questi comandi, il server di sviluppo stampa l'URL del sito Web. Selezionare il collegamento per aprirlo nel browser predefinito.

    Screenshot dell'applicazione Web Vanilla generata.

  1. Selezionare una directory appropriata per il codice, quindi eseguire i comandi seguenti.

    npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults
cd swa-angular-demo
npm start

    Durante l'esecuzione di questi comandi, il server di sviluppo stampa l'URL del sito Web. Selezionare il collegamento per aprirlo nel browser predefinito.

    Screenshot dell'applicazione Web Angular generata.

  1. Selezionare una directory appropriata per il codice, quindi eseguire i comandi seguenti.

    npm create vite@latest swa-react-demo -- --template react
cd swa-react-demo
npm install
npm run dev

    Durante l'esecuzione di questi comandi, il server di sviluppo stampa l'URL del sito Web. Selezionare il collegamento per aprirlo nel browser predefinito.

    Screenshot dell'applicazione Web React generata.

  1. Selezionare una directory appropriata per il codice, quindi eseguire i comandi seguenti.

    npm create vite@latest swa-vue-demo -- --template vue
cd swa-vue-demo
npm install
npm run dev

    Durante l'esecuzione di questi comandi, il server di sviluppo stampa l'URL del sito Web. Selezionare il collegamento per aprirlo nel browser predefinito.

    Screenshot dell'applicazione Web Vue generata.

  1. Selezionare CMD/CTRL+C per arrestare il server di sviluppo.

Creare un'app Web statica in Azure

È possibile creare un'app Web statica usando il portale di Azure, l'interfaccia della riga di comando di Azure, Azure PowerShello Visual Studio Code (con l'estensione App Web statiche di Azure). Questa esercitazione usa l'interfaccia della riga di comando di Azure.

  1. Accedere all'interfaccia della riga di comando di Azure:

    az login

    Per impostazione predefinita, questo comando apre un browser per completare il processo. L'interfaccia della riga di comando di Azure supporta diversi metodi per l'accesso se questo metodo non funziona nell'ambiente in uso.

  2. Se si hanno più sottoscrizioni, può essere necessario selezionare una sottoscrizione. È possibile visualizzare la sottoscrizione corrente usando il comando seguente:

    az account show

    Per selezionare una sottoscrizione è possibile eseguire il comando az account set.

    az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"

  3. Creare un gruppo di risorse.

    I gruppi di risorse si usano per raggruppare le risorse di Azure.

    az group create -n swa-tutorial -l centralus --query "properties.provisioningState"

    Il parametro -n fa riferimento al nome del sito e il parametro -l è il nome della posizione di Azure. Il comando termina con --query "properties.provisioningState", in modo da restituire solo un messaggio di esito positivo o di errore.

  4. Creare un'app Web statica nel gruppo di risorse appena creato.

    az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"

    Il parametro -n fa riferimento al nome del sito e il parametro -g fa riferimento al nome del gruppo di risorse di Azure. Usare lo stesso nome del gruppo di risorse specificato nella sezione precedente. L'app Web statica viene distribuita a livello globale, quindi la posizione non è importante per la distribuzione dell'app.

    Il comando è configurato per restituire l'URL dell'app Web. È possibile copiare il valore dalla finestra del terminale al browser per visualizzare l'app Web distribuita.

Configurare la distribuzione

  1. Aggiungere un file staticwebapp.config.json al codice dell'applicazione con il contenuto seguente:

    {
    "navigationFallback": {
        "rewrite": "/index.html"
    }
}

    La definizione di una route di fallback consente al sito di fornire il file index.html per le richieste effettuate sul dominio.

    Inserire questo file nel sistema di controllo del codice sorgente (ad esempio Git) se ne usa uno.

  2. Installare l'interfaccia della riga di comando di App Web statiche di Azure (SWA) nel progetto.

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

    L'interfaccia della riga di comando di App Web statiche di Azure consente di sviluppare e testare il sito in locale prima di distribuirlo nel cloud.

  3. Creare un nuovo file per il progetto e denominarlo swa-cli.config.json.

    Il file swa-cli.config.json descrive come compilare e distribuire il sito.

    Dopo aver creato questo file, è possibile generarne il contenuto usando il comando npx swa init.

    npx swa init --yes

  4. Compilare l'applicazione per la distribuzione.

    npx swa build

  5. Usare l'interfaccia della riga di comando di App Web statiche di Azure per accedere ad Azure.

    npx swa login --resource-group swa-tutorial --app-name swa-demo-site

    Usare lo stesso nome del gruppo di risorse e lo stesso nome dell'app Web statica creati nella sezione precedente. Quando si prova ad accedere viene aperto un browser per completare il processo, se necessario.

Avviso

Angular v17 e versioni successive inseriscono i file distribuibili in una sottodirectory del percorso di output che è possibile scegliere. L'interfaccia della riga di comando di App Web statiche di Azure non conosce il percorso specifico della directory. Nei passaggi seguenti viene illustrato come impostare correttamente questo percorso.

Individuare il file index.html generato nel progetto all'interno della cartella dist/swa-angular-demo/browser.

  1. Impostare la variabile di ambiente SWA_CLI_OUTPUT_LOCATION sulla directory contenente il file index.html:

    export SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"

Distribuire il sito in Azure

Distribuire il codice nell'app Web statica:

npx swa deploy --env production

La distribuzione dell'applicazione può richiedere alcuni minuti. Al termine, viene visualizzato l'URL del sito.

Schermata del comando di distribuzione.

Nella maggior parte dei sistemi è possibile selezionare l'URL del sito per aprirlo nel browser predefinito.

Pulire le risorse (facoltativo)

Se non si continua con altre esercitazioni, rimuovere il gruppo di risorse e le risorse di Azure:

az group delete -n swa-tutorial

Quando si rimuove un gruppo di risorse, si eliminano tutte le risorse che contiene. Questa azione non può essere annullata.

Passaggi successivi

Aggiungere l'autenticazione

Contenuto correlato