Creare un'app Web HTML statica in Azure

Le app Web di Azure forniscono un servizio di hosting Web ad alta scalabilità e con funzioni di auto-correzione. Questa guida introduttiva illustra come distribuire un sito HTML e CSS di base in un'app Web di Azure. Si creerà l'app Web usando l'interfaccia della riga di comando di Azure e si userà Git per distribuire il contenuto HTML di esempio nell'app Web.

Home page dell'app di esempio

È possibile eseguire queste procedure con un computer Mac, Windows o Linux. Una volta installati i prerequisiti, sono necessari circa cinque minuti per completare la procedura.

Prerequisiti

Per completare questa guida introduttiva:

Avviare Azure Cloud Shell

Azure Cloud Shell è una shell Bash gratuita che può essere eseguita direttamente nel portale di Azure. Include l'interfaccia della riga di comando di Azure preinstallata e configurata per l'uso con l'account. Fare clic sul pulsante Cloud Shell nel menu nel riquadro in alto a destra nel portale di Azure.

Cloud Shell

Il pulsante avvia una shell interattiva che è possibile usare per eseguire tutti i passaggi in questo argomento:

Screenshot che mostra la finestra di Cloud Shell nel portale

Se si sceglie di installare e usare l'interfaccia della riga di comando in locale, per questo argomento è necessario eseguire la versione 2.0 o successiva dell'interfaccia della riga di comando di Azure. Eseguire az --version per trovare la versione. Se è necessario eseguire l'installazione o l'aggiornamento, vedere Installare l'interfaccia della riga di comando di Azure 2.0.

Scaricare l'esempio

In una finestra del terminale eseguire il comando seguente per clonare il repository dell'app di esempio nel computer locale.

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

Questa finestra del terminale dovrà essere usata per eseguire tutti i comandi presenti in questa guida introduttiva.

Visualizzare il codice HTML

Passare alla directory contenente il codice HTML di esempio. Aprire il file index.html nel browser.

Home page dell'app di esempio

Accedere ad Azure

Usare l'interfaccia della riga di comando di Azure per creare le risorse necessarie per ospitare l'app in Azure. Se si eseguono i comandi dell'interfaccia della riga di comando di Azure in Cloud Shell, si è già connessi. Per eseguire i comandi dell'interfaccia della riga di comando di Azure, accedere alla sottoscrizione di Azure con il comando az login e seguire le istruzioni visualizzate.

az login

Creare un utente di distribuzione

Creare credenziali di distribuzione con il comando az webapp deployment user set.

Un utente della distribuzione è necessario per la distribuzione con FTP e l'istanza Git locale in un'app Web. Nome utente e password sono a livello di account. Sono quindi diversi dalle credenziali della sottoscrizione di Azure.

Nel comando seguente sostituire <user-name> e <password> con un nuovo nome utente e una nuova password. Il nome utente deve essere univoco. La password deve essere composta da almeno otto caratteri, con due dei tre elementi seguenti: lettere, numeri e simboli.

az webapp deployment user set --user-name <username> --password <password>

Se viene visualizzato un errore 'Conflict'. Details: 409, modificare il nome utente. Se viene visualizzato un errore 'Bad Request'. Details: 400, usare una password più complessa.

L'utente di distribuzione viene creato una sola volta e può essere usato per tutte le distribuzioni di Azure.

Nota

Registrare il nome utente e la password. Saranno necessari per distribuire l'app Web in un secondo momento.

Creare un gruppo di risorse

Creare un gruppo di risorse con il comando az group create.

Un gruppo di risorse è un contenitore logico in cui vengono distribuite e gestite risorse di Azure come app Web, database e account di archiviazione.

L'esempio seguente crea un gruppo di risorse denominato myResourceGroup nella località westeurope.

az group create --name myResourceGroup --location westeurope

In genere, il gruppo di risorse e le risorse vengono create in un'area nelle vicinanze. Per visualizzare tutte le località supportate per le app Web di Azure, eseguire il comando az appservice list-locations.

Creare un piano di servizio app di Azure

Creare un piano di servizio app con il comando az appservice plan create.

Un piano di servizio app specifica la località, le dimensioni e le funzionalità della server farm Web che ospita l'app. Quando si ospitano più app, è possibile limitare i costi configurando le app Web in modo che condividano un singolo piano di servizio app.

I piani di servizio app definiscono:

  • Area (ad esempio Europa settentrionale, Stati Uniti orientali o Asia sud-orientale)
  • Dimensione dell'istanza (Small, Medium o Large)
  • Numero di scala (da 1 a 20 istanze)
  • SKU (Gratuito, Condiviso, Basic, Standard o Premium)

L'esempio seguente crea un piano di servizio app denominato myAppServicePlan nel piano tariffario Gratuito:

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku FREE

Al termine della creazione del piano di servizio app, l'interfaccia della riga di comando di Azure visualizza informazioni simili all'esempio seguente:

{ 
  "adminSiteName": null,
  "appServicePlanName": "myAppServicePlan",
  "geoRegion": "West Europe",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "kind": "app",
  "location": "West Europe",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  < JSON data removed for brevity. >
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
} 

Creare un'app Web

Creare un'app Web nel piano di servizio app myAppServicePlan con il comando az webapp create.

L'app Web fornisce uno spazio host per il codice e un URL per visualizzare l'app distribuita.

Nel comando seguente sostituire <nome_app> con un nome univoco (i caratteri validi sono a-z, 0-9 e -). Se <app_name> non è univoco, verrà visualizzato il messaggio di errore "Il sito Web con il nome specificato esiste già". L'URL predefinito dell'app Web è https://<app_name>.azurewebsites.net.

az webapp create --name <app_name> --resource-group myResourceGroup --plan myAppServicePlan

Al termine della creazione dell'app Web, l'interfaccia della riga di comando di Azure visualizza informazioni simili all'esempio seguente:

{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app_name>.azurewebsites.net",
  "enabled": true,
  "enabledHostNames": [
    "<app_name>.azurewebsites.net",
    "<app_name>.scm.azurewebsites.net"
  ],
  "gatewaySiteName": null,
  "hostNameSslStates": [
    {
      "hostType": "Standard",
      "name": "<app_name>.azurewebsites.net",
      "sslState": "Disabled",
      "thumbprint": null,
      "toUpdate": null,
      "virtualIp": null
    }
    < JSON data removed for brevity. >
}

Passare al sito per visualizzare l'app Web appena creata.

http://<app_name>.azurewebsites.net

Pagina dell'app Web vuota

È stata creata una nuova app Web vuota in Azure.

Configurare la distribuzione con l'istanza Git locale

Configurare la distribuzione Git locale nell'app Web con il comando az webapp deployment source config-local-git.

Il servizio app supporta molti modi per distribuire contenuti a un'app Web, ad esempio FTP, istanza Git locale, GitHub, Visual Studio Team Services e BitBucket. Per questa guida introduttiva si distribuirà un'istanza Git locale. In altre parole, per la distribuzione verrà usato un comando Git che eseguirà il push da un repository locale a un repository in Azure.

Nel comando seguente sostituire <nome_app> con il nome dell'app Web.

az webapp deployment source config-local-git --name <app_name> --resource-group myResourceGroup --query url --output tsv

L'output presenta il formato seguente:

https://<username>@<app_name>.scm.azurewebsites.net:443/<app_name>.git

L'elemento <username> corrisponde all'utente della distribuzione creato nel passaggio precedente.

Copiare l'URI visualizzato che sarà necessario nel passaggio successivo.

Effettuare il push in Azure da Git

Aggiungere un'istanza remota di Azure al repository Git locale.

git remote add azure <URI from previous step>

Effettuare il push all'istanza remota di Azure per distribuire l'app. Verrà richiesta la password creata in precedenza quando è stato creato l'utente della distribuzione. Assicurarsi di immettere la password creata in Configurare un utente della distribuzione, anziché quella usata per accedere al portale di Azure.

git push azure master

Il comando precedente restituisce informazioni simili all'esempio seguente:

Counting objects: 13, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (11/11), done.
Writing objects: 100% (13/13), 2.07 KiB | 0 bytes/s, done.
Total 13 (delta 2), reused 0 (delta 0)
remote: Updating branch 'master'.
remote: Updating submodules.
remote: Preparing deployment for commit id 'cc39b1e4cb'.
remote: Generating deployment script.
remote: Generating deployment script for Web Site
remote: Generated deployment script files
remote: Running deployment command...
remote: Handling Basic Web Site deployment.
remote: KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot'
remote: Deleting file: 'hostingstart.html'
remote: Copying file: '.gitignore'
remote: Copying file: 'LICENSE'
remote: Copying file: 'README.md'
remote: Finished successfully.
remote: Running post deployment command(s)...
remote: Deployment successful.
To https://<app_name>.scm.azurewebsites.net/<app_name>.git
 * [new branch]      master -> master

Passare all'app

In un browser passare all'URL dell'app Web di Azure:

http://<app_name>.azurewebsites.net

La pagina è in esecuzione come un'app Web del servizio app di Azure.

Home page dell'app di esempio

Congratulazioni. La distribuzione della prima app HTML nel Servizio app è stata completata.

Aggiornare e ridistribuire l'app

Aprire il file index.html in un editor di testo e apportare una modifica al markup. Modificare ad esempio l'intestazione H1 da "Servizio app di Azure - Sito HTML statico di esempio" a "Servizio app di Azure".

Eseguire il commit delle modifiche in Git e quindi effettuare il push delle modifiche al codice in Azure.

git commit -am "updated HTML"
git push azure master

Al termine della distribuzione, aggiornare il browser per visualizzare le modifiche.

Home page dell'app di esempio aggiornata

Gestire la nuova app Web di Azure

Accedere al portale di Azure per gestire l'app Web creata.

Nel menu a sinistra fare clic su Servizi app e quindi sul nome dell'app Web di Azure.

Passare all'app Web di Azure nel portale

Verrà visualizzata la pagina di panoramica dell'app Web. Qui è possibile eseguire attività di gestione di base come l'esplorazione, l'arresto, l'avvio, il riavvio e l'eliminazione dell'app.

Pannello del servizio app nel portale di Azure

Il menu a sinistra fornisce varie pagine per la configurazione dell'app.

Pulire le risorse

Per pulire le risorse, eseguire questo comando:

az group delete --name myResourceGroup

Passaggi successivi