Snabbstart: Skapa din första statiska webbapp
Azure Static Web Apps publicerar en webbplats i en produktionsmiljö genom att skapa appar från en Azure DevOps- eller GitHub-lagringsplats. I den här snabbstarten distribuerar du ett webbprogram till Azure Static Web Apps med hjälp av Azure Portal.
Förutsättningar
- Om du inte har en Azure-prenumeration skapar du ett kostnadsfritt utvärderingskonto.
- GitHub-konto
- Om du inte har en Azure-prenumeration skapar du ett kostnadsfritt utvärderingskonto.
- Azure DevOps-organisation
Skapa en lagringsplats
Den här artikeln använder en GitHub-malllagringsplats för att göra det enkelt för dig att komma igång. Mallen har en startapp som ska distribueras till Azure Static Web Apps.
- Gå till följande plats för att skapa en ny lagringsplats:
- Ge lagringsplatsen namnet my-first-static-web-app
Kommentar
Azure Static Web Apps kräver minst en HTML-fil för att skapa en webbapp. Lagringsplatsen som du skapar i det här steget innehåller en enda index.html fil.
Välj Create repository (Skapa lagringsplats).
Skapa en lagringsplats
Den här artikeln använder en Azure DevOps-lagringsplats för att göra det enkelt för dig att komma igång. Lagringsplatsen har en startapp som används för att distribuera med Hjälp av Azure Static Web Apps.
Logga in på Azure DevOps.
Välj Ny lagringsplats.
I fönstret Skapa nytt projekt expanderar du Menyn Avancerat och gör följande val:
Inställning Värde Projekt Ange my-first-web-static-app. Synlighet Välj Privat. Versionskontroll Välj Git. Arbetsobjektsprocess Välj det alternativ som bäst passar dina utvecklingsmetoder. Välj Skapa.
Välj menyalternativet Lagringsplatser .
Välj menyalternativet Filer .
Under kortet Importera lagringsplats väljer du Importera.
Kopiera en lagringsplats-URL för det ramverk du väljer och klistra in den i rutan Klona URL .
Välj Importera och vänta tills importen har slutförts.
Skapa en statisk webbapp
Nu när lagringsplatsen har skapats kan du skapa en statisk webbapp från Azure Portal.
- Gå till Azure-portalen.
- Välj Skapa en resurs.
- Sök efter Static Web Apps.
- Välj Static Web Apps.
- Välj Skapa.
I avsnittet Grundläggande börjar du med att konfigurera din nya app och länka den till en GitHub-lagringsplats.
| Inställning | Värde |
|---|---|
| Prenumeration | Välj din Azure-prenumerationen. |
| Resursgrupp | Välj länken Skapa ny och ange static-web-apps-test i textrutan. |
| Name | Ange my-first-static-web-app i textrutan. |
| Abonnemangstyp | Välj Kostnadsfri. |
| Källa | Välj GitHub och logga in på GitHub om det behövs. |
Om det behövs loggar du in med GitHub och anger följande lagringsplatsinformation.
| Inställning | Värde |
|---|---|
| Organisation | Välj din organisation. |
| Lagringsplats | Välj my-first-web-static-app. |
| Filial | Välj huvud. |
Kommentar
Om du inte ser en lista över lagringsplatser:
Du kan behöva auktorisera Azure Static Web Apps i GitHub. Bläddra till din GitHub-profil och gå till Inställningar Program Auktoriserade OAuth-appar, välj Azure Static Web Apps och välj sedan Bevilja.> >
Du kan behöva auktorisera Azure Static Web Apps i din Azure DevOps-organisation. Du måste vara ägare till organisationen för att bevilja behörigheterna. Begär programåtkomst från tredje part via OAuth. Mer information finns i Auktorisera åtkomst till REST-API:er med OAuth 2.0.
I avsnittet Grundläggande börjar du med att konfigurera din nya app och länka den till en Azure DevOps-lagringsplats.
| Inställning | Värde |
|---|---|
| Prenumeration | Välj din Azure-prenumerationen. |
| Resursgrupp | Välj länken Skapa ny och ange static-web-apps-test i textrutan. |
| Name | Ange my-first-static-web-app i textrutan. |
| Abonnemangstyp | Välj Kostnadsfri. |
| Information om Azure Functions och mellanlagring | Välj en region som är närmast dig. |
| Källa | Välj Azure DevOps. |
| Organisation | Välj din organisation. |
| Projekt | Välj ditt projekt. |
| Lagringsplats | Välj my-first-web-static-app. |
| Filial | Välj huvud. |
Kommentar
Kontrollera att grenen du använder inte är skyddad och att du har tillräcklig behörighet för att utfärda ett push kommando. Om du vill verifiera bläddrar du till din DevOps-lagringsplats och går till Repos ->Branches och väljer Fler alternativ. Välj sedan din gren och sedan Grenprinciper för att säkerställa att nödvändiga principer inte är aktiverade.
I avsnittet Bygginformation lägger du till konfigurationsinformation som är specifik för ditt önskade klientdelsramverk.
- I listrutan Build Presets (Skapa förinställningar) väljer du Anpassad.
- I rutan Appplats anger du ./src.
- Lämna rutan Api-plats tom.
- I rutan Utdataplats anger du ./src.
Välj Granska + skapa.
Välj Skapa.
Välj Skapa.
Välj Gå till resurs.
Visa webbplatsen
Det finns två aspekter för att distribuera en statisk app. Den första skapar de underliggande Azure-resurser som utgör din app. Det andra är ett arbetsflöde som skapar och publicerar ditt program.
Innan du kan gå till den nya statiska platsen måste distributionsversionen först slutföras.
Fönstret Översikt över statiska webbappar visar en serie länkar som hjälper dig att interagera med din webbapp.
Om du väljer på banderollen som säger väljer du här för att kontrollera statusen för dina GitHub Actions-körningar och tar dig till GitHub Actions som körs mot din lagringsplats. När du har kontrollerat att distributionsjobbet är klart kan du gå till din webbplats via den genererade URL:en.
När GitHub Actions-arbetsflödet är klart kan du välja URL-länken för att öppna webbplatsen på den nya fliken.
När arbetsflödet är klart kan du välja URL-länken för att öppna webbplatsen på den nya fliken.
Rensa resurser
Om du inte kommer att fortsätta att använda det här programmet kan du ta bort Azure Static Web Apps-instansen genom följande steg:
- Öppna Azure Portal.
- Sök efter my-first-web-static-app från det övre sökfältet.
- Välj appnamnet.
- Välj Ta bort.
- Välj Ja för att bekräfta borttagningsåtgärden (den här åtgärden kan ta en stund att slutföra).