Esercizio: Creare un'app Web HTML statica usando Azure Cloud Shell

  • 15 minuti

La sandbox gratuita consente di creare risorse in un subset delle aree globali di Azure. Selezionare un'area nell'elenco seguente durante la creazione delle risorse:

  • Stati Uniti occidentali 2
  • Stati Uniti centro-meridionali
  • Stati Uniti centrali
  • Stati Uniti orientali
  • Europa occidentale
  • Asia sud-orientale
  • Giappone orientale
  • Brasile meridionale
  • Australia sud-orientale
  • India centrale

In questo esercizio si distribuirà un sito HTML+CSS di base in Servizio app di Azure usando il comando dell'interfaccia della riga di comando di Azure az webapp up. Il codice verrà quindi aggiornato e ridistribuito usando lo stesso comando.

Il comando az webapp up semplifica la creazione e l'aggiornamento delle app Web. Quando viene eseguito, esegue le azioni seguenti:

  • Creare un gruppo di risorse predefinito se non ne è specificato uno.
  • Crea un piano di servizio app predefinito.
  • Crea un'app con il nome specificato.
  • Distribuisce con zipdeploy i file dalla directory di lavoro corrente all'app Web.

Scaricare l'app di esempio

In questa sezione si userà la sandbox per scaricare l'app di esempio e impostare le variabili per semplificare l'immissione di alcuni comandi.

  1. Nella sandbox creare una directory e quindi passare a tale directory.

    mkdir htmlapp

cd htmlapp

  2. Eseguire il comando seguente git per clonare il repository dell'app di esempio nella directory htmlapp .

    git clone https://github.com/Azure-Samples/html-docs-hello-world.git

  3. Impostare le variabili per contenere i nomi del gruppo di risorse e dell'app eseguendo i comandi seguenti.

    resourceGroup=$(az group list --query "[].{id:name}" -o tsv)
appName=az204app$RANDOM

Creare l'app Web

  1. Passare alla directory contenente il codice di esempio ed eseguire il comando az webapp up.

    cd html-docs-hello-world

az webapp up -g $resourceGroup -n $appName --html

    L'esecuzione del comando può richiedere alcuni minuti. Durante l'esecuzione, il comando visualizza informazioni simili all'esempio sottostante.

    {
"app_url": "https://<myAppName>.azurewebsites.net",
"location": "westeurope",
"name": "<app_name>",
"os": "Windows",
"resourcegroup": "<resource_group_name>",
"serverfarm": "appsvc_asp_Windows_westeurope",
"sku": "FREE",
"src_path": "/home/<username>/demoHTML/html-docs-hello-world ",
< JSON data removed for brevity. >
}

  2. Aprire una nuova scheda nel browser e passare all'URL dell'app (https://<myAppName>.azurewebsites.net) e verificare che l'app sia in esecuzione. Prendere nota del titolo nella parte superiore della pagina. Lasciare aperto il browser nell'app per la sezione successiva.

    Nota

    È possibile copiare <myAppName>.azurewebsites.net dall'output del comando precedente oppure selezionare l'URL nell'output per aprire il sito in una nuova scheda.

Aggiornare e ridistribuire l'app

  1. In Cloud Shell digitare code index.html per aprire l'editor. Nel tag di intestazione <h1> modificare Servizio app di Azure - Sito HTML statico di esempio in Servizio app di Azure aggiornato o in qualsiasi altro elemento desiderato.

  2. Usare i comandi ctrl-s per salvare e ctrl-q per uscire.

  3. Ridistribuire l'applicazione con lo stesso comando az webapp up usato in precedenza.

    az webapp up -g $resourceGroup -n $appName --html

    Suggerimento

    È possibile usare la freccia SU sulla tastiera per scorrere i comandi precedenti.

  4. Al termine della distribuzione, tornare al browser dal passaggio 2 nella sezione "Creare l'app Web" precedente e aggiornare la pagina.