Zelfstudie: Een statische website hosten in Blob Storage

In deze zelfstudie leert u hoe u een statische website bouwt en implementeert in Azure Storage. Wanneer u klaar bent, hebt u een statische website waartoe gebruikers openbaar toegang hebben.

In deze handleiding leer je hoe je:

Statische websites hebben enkele beperkingen. Als u bijvoorbeeld headers wilt configureren, moet u Azure Content Delivery Network (Azure CDN) gebruiken. Er is geen manier om headers te configureren als onderdeel van de statische websitefunctie zelf. Ook worden AuthN en AuthZ niet ondersteund.

Als deze functies belangrijk zijn voor uw scenario, kunt u overwegen Om Azure Static Web Apps te gebruiken. Het is een goed alternatief voor statische websites en is ook geschikt in gevallen waarin u geen webserver nodig hebt om inhoud weer te geven. U kunt headers configureren en AuthN/AuthZ wordt volledig ondersteund. Azure Static Web Apps biedt ook een volledig beheerde werkstroom voor continue integratie en continue levering (CI/CD) van GitHub-bron naar wereldwijde implementatie.

In deze video ziet u hoe u een statische website op Blob Storage kunt hosten.

De stappen in de video worden ook beschreven in de volgende secties.

Vereiste voorwaarden

Voor toegang tot Azure Storage hebt u een Azure-abonnement nodig. Als u nog geen abonnement hebt, maakt u een gratis account voordat u begint.

Alle toegang tot Azure Storage vindt plaats via een opslagaccount. Maak voor deze quickstart een opslagaccount met behulp van Azure Portal, Azure PowerShell of Azure CLI. Zie Een opslagaccount maken voor hulp bij het maken van een opslagaccount.

In deze zelfstudie wordt Gebruikgemaakt van Visual Studio Code, een gratis hulpprogramma voor programmeurs, om de statische website te bouwen en te implementeren in een Azure Storage-account.

Nadat u Visual Studio Code hebt geïnstalleerd, installeert u de Preview-extensie van Azure Storage. Deze extensie integreert azure Storage-beheerfunctionaliteit met Visual Studio Code. U gebruikt de extensie om uw statische website te implementeren in Azure Storage. De extensie installeren:

1. Start Visual Studio Code.

2. Klik op extensies op de werkbalk. Zoek naar Azure Storage en selecteer de Azure Storage-extensie in de lijst. Klik vervolgens op de knop Installeren om de extensie te installeren.

   

Hosting van statische websites configureren

De eerste stap is het configureren van uw opslagaccount voor het hosten van een statische website in Azure Portal. Wanneer u uw account configureert voor het hosten van statische websites, maakt Azure Storage automatisch een container met de naam $web. De $web-container bevat de bestanden voor uw statische website.

1. Meld u aan bij Azure Portal in uw webbrowser.

2. Zoek uw opslagaccount en geef het accountoverzicht weer.

3. Selecteer statische website om de configuratiepagina voor statische websites weer te geven.

4. Selecteer Ingeschakeld om het hosten van statische websites voor het opslagaccount in te schakelen.

5. Geef in het veld Indexdocumentnaam een standaardindexpagina van index.htmlop. De standaardindexpagina wordt weergegeven wanneer een gebruiker naar de hoofdmap van uw statische website navigeert.

6. Geef in het padveld Foutdocument een standaardfoutpagina van 404.htmlop. De standaardfoutpagina wordt weergegeven wanneer een gebruiker probeert te navigeren naar een pagina die niet bestaat in uw statische website.

7. Klik op Opslaan. In Azure Portal wordt nu het eindpunt van uw statische website weergegeven.

   

Een Hallo wereld-website implementeren

Maak vervolgens een Hallo wereld-webpagina met Visual Studio Code en implementeer deze op de statische website die wordt gehost in uw Azure Storage-account.

1. Maak een lege map met de naam mywebsite op uw lokale bestandssysteem.

2. Start Visual Studio Code en open de map die je zojuist hebt gemaakt vanuit Explorer.

   

3. Maak het standaardindexbestand in de map mijnwebsite en geef het index.htmleen naam.

   

4. Open index.html in de editor, plak de volgende tekst in het bestand en sla deze op:

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

5. Maak het standaardfoutbestand en geef het 404.htmleen naam.

6. Open 404.html in de editor, plak de volgende tekst in het bestand en sla deze op:

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

7. Klik met de rechtermuisknop onder de map mijnwebsite in het deelvenster Explorer en selecteer Implementeren naar statische website... om uw website te implementeren. U wordt gevraagd u aan te melden bij Azure om een lijst met abonnementen op te halen.

8. Selecteer het abonnement met het opslagaccount waarvoor u het hosten van statische websites hebt ingeschakeld. Selecteer vervolgens het opslagaccount wanneer u hierom wordt gevraagd.

Visual Studio Code uploadt nu uw bestanden naar uw webeindpunt en toont de statusbalk voor geslaagde bewerkingen. Start de website om deze weer te geven in Azure.

U hebt de zelfstudie voltooid en een statische website geïmplementeerd in Azure.

Ondersteuning van functies

Ondersteuning voor deze functie kan worden beïnvloed door het inschakelen van Data Lake Storage Gen2, het NFS-protocol (Network File System) 3.0 of het SSH File Transfer Protocol (SFTP). Als u een van deze mogelijkheden hebt ingeschakeld, raadpleegt u de ondersteuning voor Blob Storage-functies in Azure Storage-accounts om ondersteuning voor deze functie te beoordelen.

Volgende stappen

In deze zelfstudie hebt u geleerd hoe u uw Azure Storage-account configureert voor het hosten van statische websites en hoe u een statische website maakt en implementeert in een Azure-eindpunt.

Leer vervolgens hoe u een aangepast domein configureert met uw statische website.