Skapa en statisk HTML-webbapp i Azure

Azure App Service ger en mycket skalbar webbvärdtjänst med självkorrigering. Den här snabbstarten visar hur du distribuerar en enkel HTML+CSS-webbplats till Azure App Service. Du kommer att slutföra den här snabbstarten i Cloud Shell, men du kan också köra dessa kommandon lokalt med Azure CLI.

Anteckning

Information om hur du hanterar statiska HTML-filer i en serverlös miljö finns i Static Web Apps.

Startsida för exempelapp

Om du inte har en Azure-prenumeration skapar du ett kostnadsfritt Azure-konto innan du börjar.

Förutsättningar

Ladda ned exemplet

Skapa en snabbstartskatalog i Cloud Shell och ändra sedan till den.

mkdir quickstart

cd $HOME/quickstart

Kör sedan följande kommando för att klona lagringsplatsen för exempelprogrammet till din snabbstartskatalog.

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

Skapa en webbapp

Ändra till katalogen som innehåller exempelkoden och kör kommandot az webapp up . I följande exempel ersätter <du app_name> med ett unikt appnamn. Statiskt innehåll indikeras av --html flaggan.

cd html-docs-hello-world

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

Anteckning

Om du vill vara värd för ditt statiska innehåll på en Linux-baserad App Service-instans konfigurerar du PHP som din körning med hjälp av flaggorna --runtime och--os-type:

az webapp up --location westeurope --name <app_name> --runtime "PHP:8.1" --os-type linux

PHP-containern innehåller en webbserver som är lämplig som värd för statiskt HTML-innehåll.

Kommandot az webapp up utför följande åtgärder:

  • Skapa en standardresursgrupp.

  • Skapa en standard App Service-plan.

  • Skapa ett program med det givna namnet.

  • Zip-distribuera filer från den aktuella arbetskatalogen till webbprogrammet.

Det kan ett par minuter att köra kommandot. Medan det körs visas information liknande den i följande exempel:

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

Anteckna resourceGroup-värdet. Du behöver den för avsnittet rensa resurser.

Bläddra till appen

Gå till appens URL i en webbläsare: http://<app_name>.azurewebsites.net.

Sidan körs som en Azure App Service-webbapp.

Exempelstartsida för app

Grattis! Du har distribuerat din första HTML-app till App Service.

Uppdatera och distribuera om appen

I Cloud Shell skriver du nano index.html för att öppna nanotextredigerare. I rubriktaggen <h1> ändrar du "Azure App Service – Sample Static HTML Site" till "Azure App Service" enligt nedan.

Nano index.html

Spara dina ändringar och avsluta nano. Använd kommandot ^O för att spara och ^X för att avsluta.

Du kan nu distribuera appen med samma az webapp up-kommando.

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

När distributionen är klar går du tillbaka till webbläsarfönstret som öppnades när du skulle söka efter appen och klickar på knappen för att uppdatera sidan.

Uppdaterad exempelstartsida för app

Hantera din nya Azure-app

Om du vill hantera webbappen som du skapade i Azure Portal söker du efter och väljer App Services.

Välj App Services i Azure Portal

På sidan App Services väljer du namnet på din Azure-app.

Portalnavigering till Azure-app

Nu visas sidan Översikt för din webbapp. Här kan du utföra grundläggande hanteringsåtgärder som att bläddra, stoppa, starta, starta om och ta bort.

App Service-blad på Azure Portal

Menyn till vänster innehåller olika sidor för att konfigurera appen.

Rensa resurser

I de föregående stegen skapade du Azure-resurser i en resursgrupp. Om du inte tror att du behöver dessa resurser i framtiden tar du bort resursgruppen genom att köra följande kommando i Cloud Shell. Kom ihåg att resursgruppens namn har genererats automatiskt för dig i steget skapa en webbapp.

az group delete --name appsvc_rg_Windows_westeurope

Det kan några minuter att köra kommandot.

Nästa steg