Exercício – Criar rotas de contingência

Concluído

Chegou a altura de criar uma rota de contingência para que os seus utilizadores possam navegar para a sua aplicação com êxito.

Solicitar o código mais recente

As Aplicações Web Estáticas do Azure adicionaram um ficheiro de fluxo de trabalho do GitHub Actions ao ramo selecionado no exercício anterior. Primeiro, você obtém esse arquivo puxando seu código do Git.

Solicite as alterações do seu código ao Git ao seguir estes passos:

  1. Abra a solução ShoppingList no Visual Studio.

  2. Solicite as alterações mais recentes do GitHub.

    Captura de tela mostrando onde extrair as alterações do GitHub.

Agora você pode ver seu arquivo de fluxo de trabalho na pasta .github/workflows no Windows Explorer (o arquivo não faz parte da solução do Visual Studio).

Criar uma regra de encaminhamento

Antes de publicar seu aplicativo, você cria regras de roteamento que incluem uma rota de fallback.

Criar o arquivo staticwebapp.config.json

Se você ainda não tiver um arquivo staticwebapp.config.json em seu projeto, poderá criar um seguindo estas etapas:

  1. No Visual Studio, clique com o botão direito do rato na pasta wwwroot dentro do projeto Client (Cliente).

  2. Selecione Adicionar -> Novo Item.

  3. Selecione Arquivo JSON nos modelos disponíveis, nomeie-o staticwebapp.config.json e pressione Enter.

Depois que o staticwebapp.config.json for criado, atualize-o para incluir a seguinte rota de fallback:

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

Emitir as alterações para o Git

Agora, salve e confirme suas alterações em seu repositório Git local. Em seguida, envie essas alterações para o GitHub.

Testar a rota de contingência

O fluxo de trabalho GitHub Actions cria e implanta seu aplicativo.

Aceda ao repositório no seu browser e observe o progresso da ação do GitHub Actions. Siga estes passos para ver o progresso:

  1. Selecione o menu Ações .

  2. No menu Fluxos de trabalho, selecione o item de fluxo de trabalho CI/CD do Azure Static Web Apps.

  3. Selecione o link mais recente (superior) na ação executada à direita.

  4. Selecione o link Criar e implantar trabalho .

Pode ver o progresso da sua ação do GitHub Actions à medida que compila e publica a sua aplicação Web e API.

Depois que seu aplicativo for reimplantado, navegue até ele. Repare que o URL apresenta /products. Agora, atualize o navegador pressionando F5 para testar sua rota de fallback. A sua aplicação deverá ser recarregada com êxito graças à sua rota de contingência nas regras de encaminhamento!