Esercizio - Creare le route di fallback

4 minuti

A questo punto, è necessario creare una route di fallback in modo che gli utenti possano passare correttamente all'app.

Eseguire il pull del codice più recente

App Web statiche di Azure ha aggiunto un file del flusso di lavoro di GitHub Actions al ramo selezionato nell'esercizio precedente. Innanzitutto, è necessario ottenere questo file eseguendo il pull del codice da Git.

Eseguire il pull delle modifiche del codice da Git completando questi passaggi:

Aprire la soluzione ShoppingList in Visual Studio.
Eseguire il pull delle modifiche più recenti da GitHub.

È ora possibile visualizzare il file del flusso di lavoro nella cartella .github/workflows in Esplora risorse (il file non fa parte della soluzione Visual Studio).

Creare una regola di gestione

Prima di pubblicare l'app è necessario creare regole di routing che includono una route di fallback.

Creare il file staticwebapp.config.json

Se non è già presente un file staticwebapp.config.json nel progetto, è possibile crearne uno seguendo questa procedura:

In Visual Studio fare clic con il pulsante destro del mouse nella cartella wwwroot all'interno del progetto Client.
Selezionare Aggiungi -> Nuovo elemento.
Selezionare File JSON dai modelli disponibili, denominarlo staticwebapp.config.json e premere INVIO.

Viene creato un file staticwebapp.config.json. Aggiornarlo per includere la route di fallback seguente:

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

Eseguire il push delle modifiche in Git

A questo punto, salvare ed eseguire il commit delle modifiche nel repository Git locale. Eseguire quindi il push delle modifiche in GitHub.

Provare la route di fallback

Il flusso di lavoro di GitHub Actions compila e distribuisce l'app.

Passare al repository nel browser e controllare lo stato di GitHub Actions. Per visualizzare lo stato, completare questi passaggi:

Selezionare il menu Actions.
Nel menu Workflows (Flussi di lavoro) selezionare la voce del flusso di lavoro Azure Static Web Apps CI/CD (CI/CD App Web statiche di Azure).
Selezionare il collegamento più recente (in alto) nelle esecuzioni di GitHub Actions a destra.
Selezionare il collegamento Build and Deploy Job (Compila e distribuisci processo).

È possibile visualizzare lo stato di GitHub Actions durante la compilazione e la pubblicazione dell'app Web e dell'API.