Creare un'app Web HTML statica in AzureCreate a static HTML web app in Azure

Servizio app di Azure offre un servizio di hosting Web con scalabilità elevata e funzioni di auto-correzione.Azure App Service provides a highly scalable, self-patching web hosting service. Questa guida introduttiva illustra come distribuire un sito HTML e CSS di base nel servizio app di Azure.This quickstart shows how to deploy a basic HTML+CSS site to Azure App Service. Questa guida introduttiva verrà completata in Cloud Shell, ma gli stessi comandi possono essere eseguiti anche in locale con l'interfaccia della riga di comando di Azure.You'll complete this quickstart in Cloud Shell, but you can also run these commands locally with Azure CLI.

Home page dell'app di esempio

Se non si ha una sottoscrizione di Azure, creare un account gratuito prima di iniziare.If you don't have an Azure subscription, create a free account before you begin.

Usare Azure Cloud ShellUse Azure Cloud Shell

Azure Cloud Shell è un ambiente di shell interattivo ospitato in Azure e usato tramite il browser.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. È possibile usare Bash o PowerShell con Cloud Shell per usare i servizi di Azure.You can use either Bash or PowerShell with Cloud Shell to work with Azure services. È possibile usare i comandi preinstallati di Cloud Shell per eseguire il codice contenuto in questo articolo senza dover installare strumenti nell'ambiente locale.You can use the Cloud Shell preinstalled commands to run the code in this article without having to install anything on your local environment.

Per avviare Azure Cloud Shell:To start Azure Cloud Shell:

OpzioneOption Esempio/CollegamentoExample/Link
Selezionare Prova nell'angolo superiore destro di un blocco di codice.Select Try It in the upper-right corner of a code block. La selezione di Prova non comporta la copia automatica del codice in Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Esempio di Prova per Azure Cloud Shell
Passare a https://shell.azure.com o selezionare il pulsante Avvia Cloud Shell per aprire Cloud Shell nel browser.Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser. Avviare Cloud Shell in una nuova finestraLaunch Cloud Shell in a new window
Selezionare il pulsante Cloud Shell nella barra dei menu nell'angolo in alto a destra del portale di Azure.Select the Cloud Shell button on the menu bar at the upper right in the Azure portal. Pulsante Cloud Shell nel portale di Azure

Per eseguire il codice di questo articolo in Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Avviare Cloud Shell.Start Cloud Shell.

  2. Selezionare il pulsante Copia in un blocco di codice per copiare il codice.Select the Copy button on a code block to copy the code.

  3. Incollare il codice nella sessione di Cloud Shell premendo CTRL+MAIUSC+V in Windows e Linux o CMD+MAIUSC+V in macOS.Paste the code into the Cloud Shell session by selecting Ctrl+Shift+V on Windows and Linux or by selecting Cmd+Shift+V on macOS.

  4. Premere INVIO per eseguire il codice.Select Enter to run the code.

Scaricare l'esempioDownload the sample

In Cloud Shell creare una directory quickstart e passare ad essa.In the Cloud Shell, create a quickstart directory and then change to it.

mkdir quickstart

cd $HOME/quickstart

Eseguire quindi il comando seguente per clonare il repository dell'app di esempio nella directory quickstart.Next, run the following command to clone the sample app repository to your quickstart directory.

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

Creare un'app WebCreate a web app

Passare alla directory contenente il codice di esempio ed eseguire il comando az webapp up.Change to the directory that contains the sample code and run the az webapp up command.

Nell'esempio seguente sostituire <app_name> con un nome di app univoco.In the following example, replace <app_name> with a unique app name.

cd html-docs-hello-world
az webapp up --location westeurope --name <app_name> --html

Il comando az webapp up esegue le azioni seguenti:The az webapp up command does the following actions:

  • Crea un gruppo di risorse predefinito.Create a default resource group.

  • Crea un piano di servizio app predefinito.Create a default app service plan.

  • Crea un'app con il nome specificato.Create an app with the specified name.

  • Distribuisce con zipdeploy i file dalla directory di lavoro corrente all'app Web.Zip deploy files from the current working directory to the web app.

L'esecuzione del comando può richiedere alcuni minuti.This command may take a few minutes to run. Durante l'esecuzione, il comando visualizza informazioni simili all'esempio seguente:While running, it displays information similar to the following example:

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

Annotare il valore resourceGroup.Make a note of the resourceGroup value. È necessario per la sezione Pulire le risorse.You need it for the clean up resources section.

Passare all'appBrowse to the app

In un browser passare all'URL dell'app: http://<app_name>.azurewebsites.net.In a browser, go to the app URL: http://<app_name>.azurewebsites.net.

La pagina è in esecuzione come un'app Web del servizio app di Azure.The page is running as an Azure App Service web app.

Home page dell'app di esempio

CongratulazioniCongratulations! La distribuzione della prima app HTML nel Servizio app è stata completata.You've deployed your first HTML app to App Service.

Aggiornare e ridistribuire l'appUpdate and redeploy the app

In Cloud Shell digitare nano index.html per aprire l'editor di testo Nano.In the Cloud Shell, type nano index.html to open the nano text editor. Nel tag di intestazione <h1> modificare "Azure App Service - Sample Static HTML Site" in "Azure App Service", come mostrato più avanti.In the <h1> heading tag, change "Azure App Service - Sample Static HTML Site" to "Azure App Service", as shown below.

Nano index.html

Salvare le modifiche e uscire da Nano.Save your changes and exit nano. Usare il comando ^O per salvare e ^X per uscire.Use the command ^O to save and ^X to exit.

Ora l'applicazione verrà ridistribuita con lo stesso comando az webapp up.You'll now redeploy the app with the same az webapp up command.

az webapp up --location westeurope --name <app_name> --html

Al termine della distribuzione, tornare alla finestra del browser aperta nel passaggio Passare all'app e aggiornare la pagina.Once deployment has completed, switch back to the browser window that opened in the Browse to the app step, and refresh the page.

Home page dell'app di esempio aggiornata

Gestire la nuova app AzureManage your new Azure app

Per gestire l'app Web create, nel portale di Azure, cercare e selezionare Servizi app.To manage the web app you created, in the Azure portal, search for and select App Services.

Selezionare Servizi app nel portale di Azure

Nella pagina Servizi app selezionare il nome dell'app di Azure.On the App Services page, select the name of your Azure app.

Passaggio all'app di Azure nel portale

Verrà visualizzata la pagina di panoramica dell'app Web.You see your web app's Overview page. Qui è possibile eseguire attività di gestione di base come l'esplorazione, l'arresto, l'avvio, il riavvio e l'eliminazione dell'app.Here, you can perform basic management tasks like browse, stop, start, restart, and delete.

Pannello del servizio app nel portale di Azure

Il menu a sinistra fornisce varie pagine per la configurazione dell'app.The left menu provides different pages for configuring your app.

Pulire le risorseClean up resources

Nei passaggi precedenti sono state create risorse di Azure in un gruppo di risorse.In the preceding steps, you created Azure resources in a resource group. Se si ritiene che queste risorse non saranno necessarie in futuro, eliminare il gruppo di risorse eseguendo questo comando in Cloud Shell.If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell. Si ricorda che il nome del gruppo di risorse è stato generato automaticamente nel passaggio Creare un'app Web.Remember that the resource group name was automatically generated for you in the create a web app step.

az group delete --name appsvc_rg_Windows_westeurope

L'esecuzione del comando può richiedere un minuto.This command may take a minute to run.

Passaggi successiviNext steps