Lernprogramm: Hosten einer statischen Website auf Blob Storage

In diesem Lernprogramm erfahren Sie, wie Sie eine statische Website in Azure Storage erstellen und bereitstellen. Wenn Sie fertig sind, verfügen Sie über eine statische Website, auf die Benutzer öffentlich zugreifen können.

In diesem Tutorial erfahren Sie, wie:

• Konfigurieren von statischem Websitehosting
• Bereitstellen einer Hello World-Website

Für statische Websites gelten einige Einschränkungen. Wenn Sie beispielsweise Header konfigurieren möchten, müssen Sie Azure CDN (Azure Content Delivery Network) verwenden. Es gibt keine Möglichkeit, Header im Rahmen des Features für die statische Website selbst zu konfigurieren. Außerdem werden AuthN und AuthZ nicht unterstützt.

Wenn diese Features für Ihr Szenario wichtig sind, sollten Sie die Verwendung von Azure Static Web Apps in Erwägung ziehen. Dies ist eine hervorragende Alternative zu statischen Websites und auch geeignet, wenn Sie keinen Webserver zum Rendern von Inhalten benötigen. Sie können Header konfigurieren, und AuthN/AuthZ wird vollständig unterstützt. Azure Static Web Apps bietet außerdem einen vollständig verwalteten Continuous Integration- und Continuous Delivery-Workflow (CI/CD) von der GitHub-Quelle bis zur globalen Bereitstellung.

In diesem Video wird gezeigt, wie Sie eine statische Website auf Blob Storage hosten.

Die Schritte im Video werden auch in den folgenden Abschnitten beschrieben.

Voraussetzungen

Für den Zugriff auf Azure Storage benötigen Sie ein Azure-Abonnement. Wenn Sie noch kein Abonnement haben, können Sie ein kostenloses Konto erstellen, bevor Sie beginnen.

Der gesamte Zugriff auf Azure Storage erfolgt über ein Speicherkonto. Erstellen Sie für diese Schnellstartanleitung ein Speicherkonto mit dem Azure-Portal, Azure PowerShell oder Azure CLI. Hilfe zum Erstellen eines Speicherkontos finden Sie unter Erstellen eines Speicherkontos.

Hinweis

Statische Websites sind jetzt für allgemeine v2 Standard-Speicherkonten sowie Speicherkonten mit aktivierten hierarchischen Namespaces verfügbar.

In diesem Lernprogramm wird Visual Studio Code, ein kostenloses Tool für Programmierer, verwendet, um die statische Website zu erstellen und in einem Azure Storage-Konto bereitzustellen.

Installieren Sie nach der Installation von Visual Studio Code die Azure Storage-Vorschauerweiterung. Diese Erweiterung integriert die Azure Storage-Verwaltungsfunktionalität in Visual Studio Code. Sie verwenden die Erweiterung, um Ihre statische Website in Azure Storage bereitzustellen. So installieren Sie die Erweiterung:

1. Starten Sie Visual Studio Code.

2. Klicken Sie auf der Symbolleiste auf Erweiterungen. Suchen Sie nach Azure Storage, und wählen Sie die Azure Storage-Erweiterung aus der Liste aus. Klicken Sie dann auf die Schaltfläche " Installieren ", um die Erweiterung zu installieren.

   

Konfigurieren von statischem Websitehosting

Der erste Schritt besteht darin, Ihr Speicherkonto so zu konfigurieren, dass eine statische Website im Azure-Portal gehostet wird. Wenn Sie Ihr Konto für statisches Websitehosting konfigurieren, erstellt Azure Storage automatisch einen Container mit dem Namen $web. Der container $web enthält die Dateien für Ihre statische Website.

1. Melden Sie sich im Azure-Portal in Ihrem Webbrowser an.

2. Suchen Sie nach Ihrem Speicherkonto, und zeigen Sie die Kontoübersicht an.

3. Wählen Sie "Statische Website" aus, um die Konfigurationsseite für statische Websites anzuzeigen.

4. Wählen Sie "Aktiviert" aus, um statisches Websitehosting für das Speicherkonto zu aktivieren.

5. Geben Sie im Feld "Indexdokumentname " eine Standardindexseite von index.htmlan. Die Standardindexseite wird angezeigt, wenn ein Benutzer zum Stammverzeichnis Ihrer statischen Website navigiert.

6. Geben Sie im Feld "Pfad des Fehlerdokuments " eine Standardfehlerseite von 404.htmlan. Die Standardfehlerseite wird angezeigt, wenn ein Benutzer versucht, zu einer Seite zu navigieren, die in Ihrer statischen Website nicht vorhanden ist.

7. Klicken Sie auf "Speichern". Das Azure-Portal zeigt nun Ihren statischen Websiteendpunkt an.

   

Bereitstellen einer Hello World-Website

Erstellen Sie als Nächstes eine Hello World-Webseite mit Visual Studio Code, und stellen Sie sie auf der statischen Website bereit, die in Ihrem Azure Storage-Konto gehostet wird.

1. Erstellen Sie einen leeren Ordner mit dem Namen "mywebsite " in Ihrem lokalen Dateisystem.

2. Starten Sie Visual Studio Code, und öffnen Sie den Ordner, den Sie soeben im Explorer-Bereich erstellt haben.

   

3. Erstellen Sie die Standardindexdatei im Ordner "meine Website ", und nennen Sie sie index.html.

   

4. Öffnen Sie index.html im Editor, fügen Sie den folgenden Text in die Datei ein, und speichern Sie ihn:

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

5. Erstellen Sie die Standardfehlerdatei, und benennen Sie sie 404.html.

6. Öffnen Sie 404.html im Editor, fügen Sie den folgenden Text in die Datei ein, und speichern Sie ihn:

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

7. Klicken Sie im Explorer-Bereich mit der rechten Maustaste unter den Ordner "meine Website", und wählen Sie "Auf statische Website bereitstellen" aus, um Ihre Website bereitzustellen. Sie werden aufgefordert, sich bei Azure anzumelden, um eine Liste von Abonnements abzurufen.

8. Wählen Sie das Abonnement aus, das das Speicherkonto enthält, für das Sie das Hosting statischer Websites aktiviert haben. Wählen Sie als Nächstes das Speicherkonto aus, wenn Sie dazu aufgefordert werden.

Visual Studio Code lädt jetzt Ihre Dateien in Ihren Webendpunkt hoch und zeigt die Statusleiste für den Erfolg an. Starten Sie die Website, um sie in Azure anzuzeigen.

Sie haben das Lernprogramm erfolgreich abgeschlossen und eine statische Website in Azure bereitgestellt.

Featureunterstützung

Die Unterstützung für dieses Feature kann durch aktivieren des Data Lake Storage Gen2, des Network File System (NFS) 3.0-Protokolls oder des SSH File Transfer Protocol (SFTP) beeinträchtigt werden. Wenn Sie eine dieser Funktionen aktiviert haben, lesen Sie bitte den Abschnitt Unterstützung der Blob Storage-Funktion in Azure Storage-Konten, um die Unterstützung für dieses Feature zu bewerten.

Nächste Schritte

In diesem Lernprogramm haben Sie erfahren, wie Sie Ihr Azure Storage-Konto für statisches Websitehosting konfigurieren und wie Sie eine statische Website auf einem Azure-Endpunkt erstellen und bereitstellen.

Erfahren Sie als Nächstes, wie Sie eine benutzerdefinierte Domäne mit Ihrer statischen Website konfigurieren.

Zuordnen einer benutzerdefinierten Domäne zu einem Azure Blob Storage-Endpunkt