Självstudie: Vara värd för en statisk webbplats på Blob Storage

Artikel
06/01/2023

I den här självstudien får du lära dig hur du skapar och distribuerar en statisk webbplats till Azure Storage. När du är klar har du en statisk webbplats som användare kan nå offentligt.

I den här självstudien lär du dig att:

Konfigurera hantering av en statisk webbplats
Distribuera en Hello World-webbplats

Statiska webbplatser har vissa begränsningar. Om du till exempel vill konfigurera rubriker måste du använda Azure Content Delivery Network (Azure CDN). Det finns inget sätt att konfigurera rubriker som en del av själva den statiska webbplatsfunktionen. AuthN och AuthZ stöds inte heller.

Om dessa funktioner är viktiga för ditt scenario bör du överväga att använda Azure Static Web Apps. Det är ett bra alternativ till statiska webbplatser och är också lämpligt i fall där du inte behöver en webbserver för att återge innehåll. Du kan konfigurera rubriker och AuthN/AuthZ stöds fullt ut. Azure Static Web Apps tillhandahåller också ett fullständigt hanterat arbetsflöde för kontinuerlig integrering och kontinuerlig leverans (CI/CD) från GitHub-källa till global distribution.

Den här videon visar hur du är värd för en statisk webbplats på Blob Storage.

Stegen i videon beskrivs också i följande avsnitt.

Förutsättningar

Du behöver en Azure-prenumeration för att få åtkomst till Azure Storage. Om du inte redan har en prenumeration skapar du ett kostnadsfritt konto innan du börjar.

All åtkomst till Azure Storage sker via ett lagringskonto. För den här snabbstarten skapar du ett lagringskonto med hjälp av Azure-portalen, Azure PowerShell eller Azure CLI. Hjälp med att skapa ett lagringskonto finns i Skapa ett lagringskonto.

Kommentar

Statiska webbplatser är nu tillgängliga för allmänna v2 Standard-lagringskonton samt lagringskonton med hierarkiskt namnområde aktiverat.

I den här självstudien används Visual Studio Code, ett kostnadsfritt verktyg för programmerare, för att skapa den statiska webbplatsen och distribuera den till ett Azure Storage-konto.

När du har installerat Visual Studio Code installerar du tillägget för Azure Storage-förhandsversion. Det här tillägget integrerar Azure Storage-hanteringsfunktioner med Visual Studio Code. Du använder tillägget för att distribuera din statiska webbplats till Azure Storage. Så här installerar du tillägget:

Starta Visual Studio Code.
Klicka på Tillägg i verktygsfältet. Sök efter Azure Storage och välj tillägget Azure Storage i listan. Klicka sedan på knappen Installera för att installera tillägget.

Konfigurera hantering av en statisk webbplats

Det första steget är att konfigurera ditt lagringskonto för att hantera en statisk webbplats på Azure-portalen. När du konfigurerar ditt konto för hantering av en statisk webbplats skapar Azure Storage automatiskt en container med namnet $web. Containern $web kommer att innehålla filerna för den statiska webbplatsen.

Logga in på Azure-portalen i webbläsaren.
Leta upp ditt lagringskonto och visa kontoöversikten.
Välj Statisk webbplats för att visa konfigurationssidan för statiska webbplatser.
Välj Aktivera för att aktivera hantering av statisk webbplats för lagringskontot.
I fältet Indexdokumentnamn anger du standardindexsidan index.html. Standardindexsidan visas när en användare navigerar till roten för den statiska webbplatsen.
I fältet Sökväg för feldokument anger du standardfelsidan 404. html. Standardfelsidan visas när en användare försöker navigera till en sida som inte finns på den statiska webbplatsen.
Klicka på Spara. Azure-portalen visar nu slutpunkten för den statiska webbplatsen.

Distribuera en Hello World-webbplats

Nu skapar du en Hello World-webbplats med Visual Studio Code och distribuerar den till statiska webbplats som hanteras i Azure Storage-kontot.

Skapa en tom mapp med namnet mywebsite på det lokala filsystemet.
Starta Visual Studio Code och öppna den mapp som just skapade från panelen Utforskaren.
Skapa standardindexfilen i mappen mywebsite mapp och ge den namnet index.html.
Öppna index.html i redigeringsprogrammet, klistra in följande text i filen och spara den:
```
<!DOCTYPE html>
<html>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>
```
Skapa standardfelfilen och ge den namnet 404.html.
Öppna 404.html i redigeringsprogrammet, klistra in följande text i filen och spara den:
```
<!DOCTYPE html>
<html>
  <body>
    <h1>404</h1>
  </body>
</html>
```
Högerklicka under mappen mywebsite i panelen Utforskaren och välj Distribuera till statisk webbplats... för att distribuera webbplatsen. Du uppmanas att logga in på Azure för att hämta en lista över prenumerationer.
Välj den prenumeration som innehåller det lagringskonto som du aktiverade hantering av statisk webbplats för. Välj sedan lagringskontot när du tillfrågas.

Visual Studio Code laddar nu upp filerna till webbslutpunkten och visar statusfältet för processen. Starta webbplatsen för att visa den i Azure.

Du har slutfört självstudien och distribuerat en statisk webbplats till Azure.

Funktionsstöd

Stöd för den här funktionen kan påverkas genom att aktivera Data Lake Storage Gen2, NFS 3.0-protokoll (Network File System) eller SSH File Transfer Protocol (SFTP). Om du har aktiverat någon av dessa funktioner kan du läsa Stöd för Blob Storage-funktioner i Azure Storage-konton för att utvärdera stödet för den här funktionen.

Nästa steg

I den här självstudien har du lärt dig hur du konfigurerar ditt Azure Storage-konto för statiska webbplatser och hur du skapar och distribuerar en statisk webbplats till en Azure-slutpunkt.

Lär dig sedan hur du konfigurerar en anpassad domän med din statiska webbplats.

Mappa en anpassad domän till en Azure Blob Storage-slutpunkt

Dela via