Distribuera en React-app i Azure Static Web Apps

I den här artikeln lär du dig att distribuera ett React-program till Azure Static Web Apps med hjälp av Azure-portalen.

Förutsättningar

Resurs	Kommentar
Azure-prenumeration	Om du inte har en Azure-prenumeration skapar du ett kostnadsfritt utvärderingskonto.
GitHub-konto	Om du inte har något GitHub-konto kan du skapa ett kostnadsfritt.

Resurs	Kommentar
Azure-prenumeration	Om du inte har en Azure-prenumeration skapar du ett kostnadsfritt utvärderingskonto.
Azure DevOps-konto	Om du inte har något GitHub-konto kan du skapa ett.

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.

1. Gå till följande plats för att skapa en ny lagringsplats:

   https://github.com/staticwebdev/react-basic/generate

2. Ge lagringsplatsen namnet my-first-static-web-app.

3. Välj Create repository from template (Skapa lagringsplats från mall).

   

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.

1. Logga in på Azure DevOps.

2. Välj Ny lagringsplats.

3. I fönstret Skapa nytt projekt expanderar du menyn Avancerat och gör följande val:

   Inställning	Värde
   Project	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.

4. Välj Skapa.

5. Välj menyalternativet Lagringsplatser .

6. Välj menyalternativet Filer .

7. Under kortet Importera lagringsplats väljer du Importera.

8. Kopiera en lagringsplats-URL för det ramverk du väljer och klistra in den i rutan Klona URL .

   https://github.com/staticwebdev/react-basic.git

9. 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-portalen.

1. Gå till Azure-portalen.
2. Välj Skapa en resurs.
3. Sök efter statisk webbapp.
4. Välj Statisk webbapp.
5. 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.

När du har loggat in med GitHub anger du lagringsplatsens information.

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 några lagringsplatser:

• Du kan behöva auktorisera Azure Static Web Apps i GitHub. Bläddra till din GitHub-lagringsplats 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.
Källa	Välj DevOps.
Organisation	Välj din organisation.
Project	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.

1. Välj React i listrutan Build Presets (Skapa förinställningar).

2. Behåll standardvärdet i rutan Appplats .

3. Lämna rutan Api-plats tom.

4. Skriv build i rutan Appartefaktplats .

Välj Granska + skapa.

Kommentar

Du kan redigera arbetsflödesfilen för att ändra dessa värden när du har skapat appen.

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.

1. Om du väljer GitHub-åtgärdskörningar i översikten kommer du till GitHub Actions som körs mot din lagringsplats. Kontrollera att distributionsåtgärden är klar innan du fortsätter.

2. 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:

1. Öppna Azure Portal.
2. Sök efter my-first-web-static-app från det övre sökfältet.
3. Välj appnamnet.
4. Välj Ta bort.
5. Välj Ja för att bekräfta borttagningsåtgärden (den här åtgärden kan ta en stund att slutföra).

Nästa steg

Lägga till ett API i ditt program