Oefening: terugvalroutes maken

  • 4 minuten

Nu is het tijd om een terugvalroute te maken zodat uw gebruikers naar uw app kunnen navigeren.

Haal de nieuwste code op

Azure Static Web Apps heeft een werkstroombestand voor de GitHub-actie toegevoegd aan de vertakking die u in de vorige oefening hebt geselecteerd. Eerst haalt u dit bestand op door uw code op te halen uit Git.

Haal uw codewijzigingen op uit Git door de volgende stappen te volgen:

  1. Open de oplossing ShoppingList in Visual Studio.

  2. Haal de meest recente wijzigingen op uit GitHub.

    Schermopname die laat zien waar wijzigingen kunnen worden opgehaald uit GitHub.

U kunt uw werkstroombestand nu zien in de map .github/workflows in Windows Verkenner (het bestand maakt geen deel uit van de Visual Studio-oplossing).

Een regel voor doorsturen maken

Voordat u uw app publiceert, maakt u routeringsregels die een terugvalroute bevatten.

Het bestand maken staticwebapp.config.json

Als u nog geen staticwebapp.config.json bestand in uw project hebt, kunt u er een maken door deze stappen te volgen:

  1. Klik in Visual Studio met de rechtermuisknop op de map wwwroot binnen het project Client.

  2. Selecteer Toevoegen -> Nieuw item.

  3. Selecteer JSON-bestand in de beschikbare sjablonen, geef het staticwebapp.config.json een naam en druk op Enter.

Nadat de staticwebapp.config.json is gemaakt, werkt u deze bij zodat deze de volgende terugvalroute bevat:

{
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/_framework/*", "/css/*"]
  }
}

Uw wijzigingen naar Git pushen

Sla nu uw wijzigingen op in uw lokale Git-opslagplaats en voer deze door. Push vervolgens deze wijzigingen naar GitHub.

De terugvalroute proberen

De GitHub Actions-werkstroom bouwt en implementeert uw app.

Ga in uw browser naar uw opslagplaats om de voortgang van de GitHub-actie bekijken. Volg deze stappen om de voortgang te bekijken:

  1. Selecteer het menu Acties .

  2. Selecteer in het menu Werkstromen het werkstroomitem Azure Static Web Apps CI/CD .

  3. Selecteer de meest recente (bovenste) koppeling in de actie wordt rechts uitgevoerd.

  4. Selecteer de koppeling Taak bouwen en implementeren.

U kunt de voortgang van uw GitHub-actie bekijken tijdens het bouwen en publiceren van de web-app en API.

Nadat uw app opnieuw is geïmplementeerd, bladert u naar de app. U ziet dat de URL /products weergeeft. Vernieuw nu de browser door op F5 te drukken om uw terugvalroute te testen. Uw app zou nu opnieuw moeten worden geladen dankzij uw terugvalroute in de regels voor doorsturen!