Dela via

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

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ändarna kan komma åt offentligt.

I den här tutorialen lär du dig följande:

  • Konfigurera värd för statisk webbplats
  • Lansera 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.

Anmärkning

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 förhandsversionstillägget för Azure Storage. 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:

  1. Starta Visual Studio Code.

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

    Installera Azure Storage-tillägget i VS Code

Konfigurera värd för statisk webbplats

Det första steget är att konfigurera ditt lagringskonto som värd för en statisk webbplats i Azure-portalen. När du konfigurerar ditt konto för värd för statiska webbplatser skapar Azure Storage automatiskt en container med namnet $web. Containern $web innehåller filerna för din statiska webbplats.

  1. Logga in på Azure-portalen i webbläsaren.

  2. Leta upp ditt lagringskonto och visa kontoöversikten.

  3. Välj Statisk webbplats för att visa konfigurationssidan för statiska webbplatser.

  4. Välj Aktiverad för att aktivera värd för statiska webbplatser för lagringskontot.

  5. I fältet Indexdokumentnamn anger du en standardindexsida förindex.html. Standardindexsidan visas när en användare navigerar till roten på din statiska webbplats.

  6. I fältet Felsökväg för dokument anger du en standardfelsida för404.html. Standardfelsidan visas när en användare försöker navigera till en sida som inte finns på din statiska webbplats.

  7. Klicka på Spara. Azure-portalen visar nu slutpunkten för din statiska webbplats.

    Aktivera värd för statiska webbplatser för ett lagringskonto

Lansera en Hello World-webbplats

Skapa sedan en Hello World-webbsida med Visual Studio Code och distribuera den till den statiska webbplats som finns i ditt Azure Storage-konto.

  1. Skapa en tom mapp med namnet mywebsite i det lokala filsystemet.

  2. Starta Visual Studio Code och öppna mappen som du nyss skapade från explorer-panelen .

    Öppna mappen i Visual Studio Code

  3. Skapa standardindexfilen i mappen mywebsite och ge den namnet index.html.

    Skapa standardindexfilen i Visual Studio Code

  4. Öppna index.html i redigeraren, klistra in följande text i filen och spara den:

    <!DOCTYPE html>
<html>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

  5. Skapa standardfelfilen och ge den namnet 404.html.

  6. Öppna 404.html i redigeraren, klistra in följande text i filen och spara den:

    <!DOCTYPE html>
<html>
  <body>
    <h1>404</h1>
  </body>
</html>

  7. Högerklicka under mappen mywebsite i explorer-panelen och välj Distribuera till statisk webbplats... för att distribuera din webbplats. Du uppmanas att logga in på Azure för att hämta en lista med prenumerationer.

  8. Välj den prenumeration som innehåller lagringskontot som du har aktiverat värd för statisk webbplats för. Välj sedan lagringskontot när du uppmanas att göra det.

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

Du har framgångsrikt slutfört handledningen och distribuerat en statisk webbplats till Azure.

Stöd för funktioner

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