Quickstart: Uw eerste statische site bouwen met Azure Static Web Apps
Azure Static Web Apps publiceert een website door een app te bouwen vanuit een codeopslagplaats. In deze quickstart implementeert u een toepassing in Azure Static Web Apps met behulp van de Visual Studio Code-extensie.
Als u nog geen Azure-abonnement hebt, maakt u een gratis proefaccount.
Vereisten
- Een GitHub-account
- Azure-account
- Visual Studio Code
- Azure Static Web Apps-extensie voor Visual Studio Code
- Git installeren
Een opslagplaats maken
In dit artikel wordt gebruikgemaakt van een GitHub-opslagplaatssjabloon, zodat u eenvoudig aan de slag kunt gaan. De sjabloon biedt een starters-app die wordt gebruikt om een implementatie met Azure Static Web Apps uit te voeren.
- Ga naar de volgende locatie om een nieuwe opslagplaats te maken:
- Geef de opslagplaats de naam mijn-eerste-statische-web-app
Notitie
Voor Azure Static Web Apps is minstens één HTML-bestand vereist om een web-app te maken. De opslagplaats die u in deze stap maakt, bevat één index.html-bestand.
Selecteer Opslagplaats maken van sjabloon.
De opslagplaats klonen
Nu de opslagplaats in uw GitHub-account is gemaakt, kloont u het project naar uw lokale computer met behulp van de volgende opdracht.
git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app.git
Zorg ervoor dat u <YOUR_GITHUB_ACCOUNT_NAME> vervangt door de gebruikersnaam van uw GitHub-account.
Open vervolgens Visual Studio Code en ga naar Bestand > Map openen om de gekloonde opslagplaats in de editor te openen.
Statische web-app maken
Selecteer in Visual Studio Code het Azure-logo in de activiteitenbalk om het venster met Azure-extensies te openen.
Notitie
U moet zich aanmelden bij Azure en GitHub in Visual Studio Code om door te gaan. Als u nog niet bent geverifieerd, wordt u tijdens het maken door de extensie gevraagd om u aan te melden bij beide services.
Selecteer onder Static Web Apps label het plusteken.
Notitie
De Azure Static Web Apps Visual Studio Code-extensie stroomlijnt het maakproces met behulp van een reeks standaardwaarden. Als u de controle over het maakproces wilt hebben, opent u de opdrachtprompt en selecteert u Azure Static Web Apps: Statische web-app maken... (Geavanceerd).
Het opdrachtenpalet wordt boven aan de editor geopend en u wordt gevraagd een abonnementsnaam te selecteren.
Selecteer uw abonnement en druk op Enter.
Noem vervolgens uw toepassing.
Typ my-first-static-web-app en druk op Enter.
Selecteer een regio bij u in de buurt.
Notitie
Azure Static Web Apps uw statische assets wereldwijd distribueren. De regio die u selecteert, bepaalt waar uw optionele faseringsomgevingen en API-functie-app zich bevinden.
Selecteer de voorinstellingen die overeenkomen met uw toepassingstype.
Voer /src in als de locatie voor de toepassingsbestanden en druk op Enter.
Deze app produceert geen build-uitvoer. Zorg ervoor dat de uitvoerlocatie van de build leeg is en druk op Enter.
Zodra de app is gemaakt, wordt er een bevestigingsbericht weergegeven in Visual Studio Code.
Terwijl de implementatie wordt uitgevoerd, rapporteert Visual Studio code-extensie de buildstatus aan u.
Zodra de implementatie is voltooid, kunt u rechtstreeks naar uw website navigeren.
Als u de website in de browser wilt weergeven, klikt u met de rechtermuisknop op het project in Static Web Apps extensie en selecteert u Bladeren door site.
Resources opschonen
Als u deze toepassing verder niet gaat gebruiken, kunt u het Azure Static Web Apps-exemplaar verwijderen via de extensie.
Ga in het Visual Studio Code Explorer-venster terug naar het gedeelte Static Web Apps en klik met de rechtermuisknop op my-first-static-web-app en selecteer Verwijderen.
