Øvelse – opret en Azure Static Web App

  • 5 minutter

I denne øvelse skal du oprette en Forekomst af Azure Static Web Apps, herunder en GitHub-handling, der automatisk opretter og publicerer dit program.

Opret en statisk webapp

Nu, hvor du har oprettet dit GitHub-lager, kan du oprette en Static Web Apps-forekomst fra Azure Portal.

I dette modul bruges Azure-sandkassen til at give dig et gratis, midlertidigt Azure-abonnement, som du kan bruge til at fuldføre øvelsen. Før du fortsætter, skal du sørge for, at du har aktiveret sandkassen øverst på denne side.

Den Azure-sandkasse, du har aktiveret, giver dig mulighed for at bruge Azure-tjenester uden at pådrage dig nogen omkostninger.

Installér Udvidelsen Azure Static Web Apps til Visual Studio Code

  1. Gå til Visual Studio Marketplace-, og installér udvidelsen Azure Static Web Apps til Visual Studio Code.

  2. Når udvidelsesfanen indlæses i Visual Studio Code, skal du vælge knappen Installér.

  3. Når installationen er fuldført, skal du vælge Genstart for at opdatere, hvis du bliver bedt om det.

Log på Azure i Visual Studio Code

  1. Log på Azure i Visual Studio Code ved at vælge Vis>kommandopaletog angive Azure: Log på.

    Vigtig

    Log på Azure ved hjælp af den samme konto, der bruges til at oprette sandkassen. Sandkassen giver adgang til et Concierge-abonnement.

  2. Følg prompterne for at kopiere og indsætte den kode, der er angivet i webbrowseren, som godkender din Visual Studio Code-session.

Vælg dit abonnement

  1. Åbn Visual Studio Code, og vælg Fil > Åbn, og åbn det lager, du klonede, til computeren i editoren.

  2. Kontrollér, at du har filtreret dine Azure-abonnementer, så de omfatter Concierge-abonnementet, ved at åbne kommandopaletten og angive Azure: Select Subscriptions, og tryk på Enter.

  3. Vælg Concierge Subscription, og tryk på Enter.

    Skærmbillede af VS Code, der viser, hvordan du filtrerer efter abonnement.

Opret en statisk webapp

  1. Åbn Visual Studio Code, og vælg Fil > Åbn for at åbne det lager, du klonede til computeren i editoren.

  2. I Visual Studio Code skal du vælge Azure-logoet i aktivitetslinjen for at åbne vinduet Azure-udvidelser.

    Skærmbillede af Azure Logo i VS Code.

    Seddel

    Azure- og GitHub-logon er påkrævet. Hvis du ikke allerede er logget på Azure og GitHub fra Visual Studio Code, bliver du i udvidelsen bedt om at logge på begge under oprettelsesprocessen.

  3. Placer musen over overskriften Static Web Apps, højreklik, og vælg Create Static Web App.

    Skærmbillede, der viser, hvor du kan oprette en webapp.

  4. Angiv min-først-statisk-web-app , og tryk på Enter.

    Skærmbillede, der viser, hvordan du opretter en Static Web App.

  5. Vælg din placering, og tryk på Enter.

    Skærmbillede, der viser, hvordan du vælger et abonnement.

  1. Vælg indstillingen Angular, og tryk på Enter

    Skærmbillede, der viser den vinkelindstilling, der er valgt.

  2. Angiv /angular-app- som placering for programkoden, og tryk på Enter.

    Skærmbillede, der viser den kodeplacering, der er angivet som Angular-app.

  3. Angiv dist/angular-app- som den placering af buildoutputtet, hvor filer er bygget til produktion i din app, og tryk på Enter.

    Skærmbillede, der viser, hvordan du angiver placeringen af buildoutputtet for Angular.

  1. Vælg indstillingen React, og tryk på Enter

    Skærmbillede, der viser indstillingen React valgt.

  2. Angiv /react-app- som placering for programkoden, og tryk på Enter.

    Skærmbillede, der viser den kodeplacering, der er angivet som react-app.

  3. Angiv build som outputplaceringen for buildet, hvor filer er bygget til produktion i din app, og tryk på Enter.

    Skærmbillede, der viser, hvordan du angiver placeringen af buildoutputtet for React.

  1. Vælg indstillingen Facet, og tryk på Enter

    Skærmbillede, der viser indstillingen facet valgt.

  2. Angiv /svelte-app- som placering for programkoden, og tryk på Enter.

    Skærmbillede, der viser den kodeplacering, der er angivet som Svelte-app.

  3. Angiv offentlige som placeringen af buildoutputtet, hvor filer er bygget til produktion i din app, og tryk på Enter.

    Skærmbillede, der viser, hvordan du angiver placeringen af buildoutputtet for Svelte.

  1. Vælg indstillingen Vue, og tryk på Enter

    Skærmbillede, der viser vueindstillingen valgt.

  2. Angiv /vue-app som placering for programkoden, og tryk på Enter.

    Skærmbillede, der viser den kodeplacering, der er angivet som Vue-app.

  3. Angiv dist som placeringen af buildoutputtet, hvor filer er bygget til produktion i din app, og tryk på Enter.

    Skærmbillede, der viser, hvordan du angiver placeringen af buildoutputtet for Vue-

Seddel

Dit lager kan være en smule anderledes end dem, du tidligere har brugt. Den indeholder fire forskellige apps i fire forskellige mapper. Hver mappe indeholder en app, der er oprettet i en anden JavaScript-struktur. Du har typisk én app i roden af dit lager og angiver / for placeringen af appstien. Dette er et godt eksempel på, hvorfor Azure Static Web Apps giver dig mulighed for at konfigurere placeringerne i første omgang – du får fuld kontrol over, hvordan appen bygges.

  1. Når appen er oprettet, vises der en bekræftelsesmeddelelse i Visual Studio Code.

    Skærmbillede af bekræftelseskoden, der beder brugeren om at åbne handlinger i GitHub eller Vis/rediger konfigurer.

    Efterhånden som installationen er i gang, rapporterer udvidelsen Visual Studio Code buildstatus til dig.

    Skærmbillede af brugergrænsefladen i VS Code, der viser venter på udrulning.

  2. Du kan få vist status for installationen ved hjælp af GitHub-handlinger ved at udvide menuen Handlinger.

    Skærmbillede, der viser, hvordan du kontrollerer status via GitHub-handlinger.

    Når installationen er fuldført, kan du navigere direkte til dit websted.

  3. Hvis du vil have vist webstedet i browseren, skal du højreklikke på projektet i udvidelsen Static Web Apps og vælge Gennemse websted.

    Skærmbillede, der viser, hvordan du navigerer til dit statiske websted til webapps.

Tillykke! Du har udrullet din første app i Azure Static Web Apps!

Seddel

Bare rolig, hvis du får vist en webside, hvor der står, at appen ikke er blevet bygget og udrullet endnu. Opdater browseren om et minut. GitHub-handlingen kører automatisk, når Azure Static Web Apps oprettes. Hvis du kan se velkomstsiden, installeres appen stadig.