Cvičení – vytvoření náhradních tras

Dokončeno

Teď je čas vytvořit náhradní trasu, aby uživatelé mohli do vaší aplikace úspěšně přecházet.

Načtěte svůj nejnovější kód

Služba Azure Static Web Apps přidala do větve, kterou jste vybrali v předchozím cvičení, soubor pracovního postupu GitHub Actions. Nejprve získáte tento soubor načtením kódu z Gitu.

Následujícím postupem si vytáhněte změny kódu z Gitu:

1. Otevřete řešení ShoppingList ve Visual Studio.

2. Stáhněte z GitHubu nejnovější změny.

   

Soubor pracovního postupu teď můžete zobrazit ve složce .github/workflows v Průzkumníku Windows (soubor není součástí řešení sady Visual Studio).

Vytvoření pravidla směrování

Před publikováním aplikace vytvoříte pravidla směrování, která zahrnují náhradní trasu.

Vytvoření souboru staticwebapp.config.json

Pokud ještě v projektu nemáte soubor staticwebapp.config.json , můžete ho vytvořit pomocí následujícího postupu:

1. V sadě Visual Studio klikněte pravým tlačítkem myši na složku wwwroot v rámci projektu Klienta .

2. Vyberte Přidat –> nová položka.

3. V dostupných šablonách vyberte soubor JSON , pojmenujte ho staticwebapp.config.jsona stiskněte Enter.

Po vytvoření staticwebapp.config.json ji aktualizujte tak, aby zahrnovala následující náhradní trasu:

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

Odešlete změny do Gitu

Teď uložte a potvrďte změny do místního úložiště Git. Pak tyto změny nasdílíte do GitHubu.

Vyzkoušejte náhradní trasu

Pracovní postup GitHub Actions sestaví a nasadí vaši aplikaci.

Přejděte do svého úložiště v prohlížeči a sledujte průběh akce GitHubu. Průběh si zobrazíte takto:

1. Vyberte nabídku Akce .

2. V nabídce Pracovní postupy vyberte položku pracovního postupu Azure Static Web Apps CI/CD.

3. Výběr nejnovějšího (horního) odkazu v akci se spustí vpravo.

4. Vyberte odkaz Sestavit a nasadit úlohu .

Tady můžete sledovat průběh akce GitHubu při sestavování a publikování webové aplikace a rozhraní API.

Po opětovném nasazení aplikace ji přejděte. Všimněte si, že adresa URL zobrazuje /products. Teď aktualizujte prohlížeč stisknutím klávesy F5 a otestujte náhradní trasu. Vaše aplikace by se měla znovu úspěšně načíst díky náhradní trase ve vašich pravidlech směrování!