Hosten einer statischen Website in Azure Storage

Sie können statische Inhalte (HTML, CSS, JavaScript und Imagedateien) direkt aus einem Container in einem general-purpose V2- oder BlockBlobStorage-Konto bereitstellen. Weitere Informationen finden Sie unter Hosten von statischen Websites in Azure Storage.

In diesem Artikel erfahren Sie, wie Sie das Hosting statischer Websites über das Azure-Portal, mit der Azure-CLI oder mit Azure PowerShell aktivieren.

Aktivieren des Hostings statischer Websites

Das Feature zum Hosten statischer Websites muss für das Speicherkonto aktiviert werden.

Portal

1. Melden Sie sich zunächst beim Azure-Portal an.

2. Suchen Sie Ihr Speicherkonto, und wählen Sie es aus, um den Bereich Übersicht des Kontos anzuzeigen.

3. Wählen Sie im Bereich Übersicht die Registerkarte Funktionen aus. Wählen Sie als Nächstes Statische Website aus, um die Konfigurationsseite für die statische Website anzuzeigen.

   

4. Wählen Sie Aktiviert, um das Hosten von statischen Websites für das Speicherkonto zu aktivieren.

5. Geben Sie im Feld Name des Indexdokuments die Standardindexseite an (z. B. index.html).

   Die Standardindexseite wird angezeigt, wenn ein Benutzer zum Stammverzeichnis Ihrer statischen Website navigiert.

6. Geben Sie im Feld Pfad zum Fehlerdokument die Standardfehlerseite an (z. B. 404.html).

   Die Standardfehlerseite wird angezeigt, wenn ein Benutzer versucht, zu einer Seite zu navigieren, die auf Ihrer statischen Website nicht vorhanden ist.

7. Klicken Sie auf Speichern, um die Konfiguration der statischen Website abzuschließen.

   

8. Eine Bestätigungsmeldung wird angezeigt. Die Endpunkte Ihrer statischen Website und weitere Konfigurationsinformationen werden im Bereich Übersicht angezeigt.

   

Azure-Befehlszeilenschnittstelle

Sie können das Hosting statischer Websites über die Azure CLI aktivieren.

1. Öffnen Sie zunächst Azure Cloud Shell, oder falls Sie die Azure-CLI lokal installiert haben, öffnen Sie eine Befehlskonsolenanwendung wie Windows PowerShell.

2. Wenn Ihre Identität mehreren Abonnements zugeordnet ist, legen Sie das aktive Abonnement auf das Abonnement des Speicherkontos fest, auf dem Ihre statische Website gehostet wird.

   az account set --subscription <subscription-id>
   

   Ersetzen Sie den Platzhalterwert <subscription-id> durch die ID Ihres Abonnements.

3. Aktivieren Sie das Hosting statischer Websites.

   az storage blob service-properties update --account-name <storage-account-name> --static-website --404-document <error-document-name> --index-document <index-document-name>
   

   • Ersetzen Sie den Platzhalterwert <storage-account-name> durch den Namen Ihres Speicherkontos.

   • Ersetzen Sie den Platzhalter <error-document-name> durch den Namen des Fehlerdokuments, das den Benutzern angezeigt wird, wenn ein Browser eine nicht vorhandene Seite auf Ihrer Website anfordert.

   • Ersetzen Sie den Platzhalter <index-document-name> durch den Namen des Indexdokuments. Dieses Dokument ist üblicherweise „index.html“.

PowerShell

Sie können das Hosting statischer Websites über das Azure PowerShell-Modul aktivieren.

1. Öffnen Sie ein Windows PowerShell-Befehlsfenster.

2. Vergewissern Sie sich, dass Sie über Version 0.7 oder höher des Azure PowerShell-Moduls Az verfügen.

   Get-InstalledModule -Name Az -AllVersions | select Name,Version
   

   Wenn Sie eine Installation oder ein Upgrade ausführen müssen, finden Sie unter Install and configure Azure PowerShell (Installieren des Azure PowerShell-Moduls) Informationen dazu.

3. Melden Sie sich mit dem Befehl Connect-AzAccount bei Ihrem Azure-Abonnement an, und befolgen Sie die Anweisungen auf dem Bildschirm.

   Connect-AzAccount
   

4. Wenn Ihre Identität mehreren Abonnements zugeordnet ist, legen Sie das aktive Abonnement auf das Abonnement des Speicherkontos fest, auf dem Ihre statische Website gehostet wird.

   $context = Get-AzSubscription -SubscriptionId <subscription-id>
   Set-AzContext $context
   

   Ersetzen Sie den Platzhalterwert <subscription-id> durch die ID Ihres Abonnements.

5. Rufen Sie den Kontext des Speicherkontos ab, der das zu verwendende Speicherkonto definiert.

   $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -AccountName "<storage-account-name>"
   $ctx = $storageAccount.Context
   

   • Ersetzen Sie den Platzhalterwert <resource-group-name> durch den Namen Ihrer Ressourcengruppe.

   • Ersetzen Sie den Platzhalterwert <storage-account-name> durch den Namen Ihres Speicherkontos.

6. Aktivieren Sie das Hosting statischer Websites.

   Enable-AzStorageStaticWebsite -Context $ctx -IndexDocument <index-document-name> -ErrorDocument404Path <error-document-name>
   

   • Ersetzen Sie den Platzhalter <error-document-name> durch den Namen des Fehlerdokuments, das den Benutzern angezeigt wird, wenn ein Browser eine nicht vorhandene Seite auf Ihrer Website anfordert.

   • Ersetzen Sie den Platzhalter <index-document-name> durch den Namen des Indexdokuments. Dieses Dokument ist üblicherweise „index.html“.

Hochladen von Dateien

Portal

Die folgenden Anweisungen zeigen, wie die Dateien mithilfe des Azure-Portals hochgeladen werden. Sie können auch AzCopy, PowerShell, die CLI oder eine beliebige benutzerdefinierte Anwendung verwenden, die Dateien in den $web-Container Ihres Kontos hochladen kann. Ein Schritt-für-Schritt-Tutorial, in dem Dateien mithilfe von Visual Studio Code hochgeladen werden, finden Sie unter Tutorial: Host a static website on Blob Storage (Tutorial: Hosten einer statischen Website in Blob Storage) aus, bevor Sie mit diesem Tutorial beginnen.

1. Navigieren Sie im Azure-Portal zum Speicherkonto, das Ihre statische Website enthält. Wählen Sie im linken Navigationsbereich Container aus, um die Liste der Container anzuzeigen.

2. Wählen Sie im Bereich Container den Container $web aus, um den Bereich Übersicht des Containers zu öffnen.

   

3. Wählen Sie im Bereich Übersicht das Symbol Hochladen aus, um den Bereich Blob hochladen zu öffnen. Wählen Sie als Nächstes im Bereich Blob hochladen das Feld Dateien aus, um den Dateibrowser zu öffnen. Navigieren Sie zu der Datei, die Sie hochladen möchten, wählen Sie sie aus, und wählen Sie dann Öffnen aus, um das Feld Dateien aufzufüllen. Aktivieren Sie optional das Kontrollkästchen Überschreiben, falls Dateien bereits vorhanden sind.

   

4. Wenn Sie möchten, dass im Browser der Inhalt der Datei angezeigt wird, stellen Sie sicher, dass der Inhaltstyp dieser Datei auf text/html festgelegt ist. Um dies zu überprüfen, wählen Sie den Namen des Blobs aus, das Sie im vorherigen Schritt hochgeladen haben, um den Bereich Übersicht zu öffnen. Stellen Sie sicher, dass der Wert im Eigenschaftenfeld CONTENT-TYPE festgelegt ist.

   

   Hinweis

   Diese Eigenschaft wird für häufig erkannte Erweiterungen wie .html automatisch auf text/html festgelegt. In einigen Fällen müssen Sie dies jedoch selbst festlegen. Wenn Sie diese Eigenschaft nicht auf text/html festlegen, werden die Benutzer vom Browser aufgefordert, die Datei herunterzuladen, anstatt den Inhalt zu rendern. Diese Eigenschaft kann im vorherigen Schritt festgelegt werden.

Azure-Befehlszeilenschnittstelle

Laden Sie Objekte aus einem Quellverzeichnis in den Container $web hoch.

In diesem Beispiel wird davon ausgegangen, dass Sie Befehle aus einer Azure Cloud Shell-Sitzung ausführen.

az storage blob upload-batch -s <source-path> -d '$web' --account-name <storage-account-name>

Hinweis

Wenn der Browser Benutzer auffordert, die Datei herunterzuladen, anstatt den Inhalt zu rendern, können Sie --content-type 'text/html; charset=utf-8' an den Befehl anhängen.

• Ersetzen Sie den Platzhalterwert <storage-account-name> durch den Namen Ihres Speicherkontos.

• Ersetzen Sie den Platzhalter <source-path> durch einen Pfad zum Speicherort der Dateien, die Sie hochladen möchten.

Hinweis

Wenn Sie eine Speicherortinstallation der Azure-CLI verwenden, können Sie den Pfad zu einem beliebigen Speicherort auf Ihrem lokalen Computer verwenden (z.B. C:\myFolder).

Wenn Sie Azure Cloud Shell verwenden, müssen Sie auf eine Dateifreigabe verweisen, die für Cloud Shell sichtbar ist. Dieser Speicherort kann die Dateifreigabe der Cloudfreigabe selbst sein oder eine vorhandene Dateifreigabe, die Sie aus Cloud Shell bereitstellen. Informationen zur Vorgehensweise finden Sie unter Beibehalten von Dateien in Azure Cloud Shell.

PowerShell

Laden Sie Objekte aus einem Quellverzeichnis in den Container $web hoch.

# upload a file
set-AzStorageblobcontent -File "<path-to-file>" `
-Container `$web `
-Blob "<blob-name>" `
-Context $ctx

Hinweis

Wenn der Browser Benutzer auffordert, die Datei herunterzuladen, anstatt den Inhalt zu rendern, können Sie -Properties @{ ContentType = "text/html; charset=utf-8";} an den Befehl anhängen.

• Ersetzen Sie den Platzhalterwert <path-to-file> durch den vollqualifizierten Pfad zu der Datei, die Sie hochladen möchten (z.B. C:\temp\index.html).

• Ersetzen Sie den Platzhalterwert <blob-name> durch den Namen, den Sie dem resultierenden Blob geben möchten (z.B. index.html).

Suchen der Website-URL

Mit der öffentlichen URL der Website können Sie die Seiten Ihrer Website in einem Browser anzeigen.

Portal

Wählen Sie in dem Bereich, der neben der Übersichtsseite für Ihr Speicherkonto angezeigt wird, die Option Statische Website aus. Die URL Ihrer Website wird im Feld Primärer Endpunkt angezeigt.

Azure-Befehlszeilenschnittstelle

Suchen Sie die öffentliche URL Ihrer statischen Website mit dem folgenden Befehl:

az storage account show -n <storage-account-name> -g <resource-group-name> --query "primaryEndpoints.web" --output tsv

• Ersetzen Sie den Platzhalterwert <storage-account-name> durch den Namen Ihres Speicherkontos.

• Ersetzen Sie den Platzhalterwert <resource-group-name> durch den Namen Ihrer Ressourcengruppe.

PowerShell

Suchen Sie die öffentliche URL Ihrer statischen Website mit dem folgenden Befehl:

 $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -Name "<storage-account-name>"
Write-Output $storageAccount.PrimaryEndpoints.Web

• Ersetzen Sie den Platzhalterwert <resource-group-name> durch den Namen Ihrer Ressourcengruppe.

• Ersetzen Sie den Platzhalterwert <storage-account-name> durch den Namen Ihres Speicherkontos.

Aktivieren von Metriken auf Seiten der statischen Website

Nachdem Sie Metriken aktiviert haben, werden Datenverkehrsstatistiken zu Dateien im Container $web im Dashboard für Metriken gemeldet.

1. Klicken Sie im Menü des Speicherkontos im Abschnitt Überwachung auf Metriken.

   

   Hinweis

   Metrikdaten werden durch Einbinden verschiedener Metrik-APIs generiert. Das Portal zeigt nur die API-Elemente an, die innerhalb eines bestimmten Zeitrahmens verwendet werden. Dies ermöglicht eine Konzentration auf die Elemente, die Daten zurückgeben. Um sicherzustellen, dass Sie die erforderlichen API-Elemente auswählen können, müssen Sie zuerst den Zeitrahmen erweitern.

2. Klicken Sie auf die Schaltfläche für den Zeitrahmen, wählen Sie einen Zeitrahmen aus, und klicken Sie dann auf Übernehmen.

   

3. Wählen Sie Blob aus der Dropdownliste Namespace aus.

   

4. Wählen Sie dann die Metrik Ausgehend aus.

   

5. Wählen Sie Summe aus dem Selektor Aggregation aus.

   

6. Klicken Sie auf die Schaltfläche Filter hinzufügen, und wählen Sie API-Name aus dem Selektor Eigenschaft aus.

   

7. Aktivieren Sie das Kontrollkästchen neben GetWebContent im Selektor Werte, um den Metrikbericht zu füllen.

   

   Hinweis

   Das Kontrollkästchen GetWebContent wird nur angezeigt, wenn dieses API-Element innerhalb eines bestimmten Zeitrahmens verwendet wurde. Das Portal zeigt nur die API-Elemente an, die innerhalb eines bestimmten Zeitrahmens verwendet werden. Dies ermöglicht eine Konzentration auf die Elemente, die Daten zurückgeben. Wenn ein bestimmtes API-Element in dieser Liste nicht zu finden ist, erweitern Sie den Zeitrahmen.

Nächste Schritte

• Erfahren Sie, wie Sie eine benutzerdefinierte Domäne mit Ihrer statischen Website konfigurieren. Weitere Informationen finden Sie unter Zuordnen einer benutzerdefinierten Domäne zu einem Azure Blob Storage-Endpunkt.