Esercizio: Creare un'app Web HTML statica usando Azure Cloud Shell
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, effettua 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.
Importante
Per completare questo esercizio, è necessario passare alla versione classica di Cloud Shell. Al termine del caricamento di Cloud Shell, selezionare Impostazioni dal menu nella parte superiore di Cloud Shell e quindi selezionare Vai alla versione classica.
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.
Nella sandbox, creare una directory e quindi passare a tale directory.
mkdir htmlapp cd htmlapp
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
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
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ò impiegare alcuni minuti. Mentre il comando è in esecuzione, vengono visualizzate informazioni simili all'esempio seguente.
{ "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. > }
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
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.Usare i comandi ctrl-s per salvare e ctrl-q per uscire.
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.
Al termine della distribuzione, tornare al browser dal passaggio 2 nella sezione "Creare l'app Web" precedente e aggiornare la pagina.