Exercício – Criar suas rotas de fallback

4 minutos

Agora é hora de criar uma rota de fallback, para que os usuários possam navegar para seu aplicativo com êxito.

Efetuar pull de seu código mais recente

Os Aplicativos Web Estáticos do Azure adicionaram um arquivo de fluxo de trabalho do GitHub Actions ao branch selecionado no exercício anterior. Primeiro, obtenha esse arquivo efetuando pull de seu código do Git.

Efetue pull das alterações de código do Git seguindo estas etapas:

Abra a solução ShoppingList no Visual Studio.
Efetue pull das últimas alterações no GitHub.

Agora você pode ver o 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 roteamento

Antes de publicar o aplicativo, crie regras de roteamento que incluam uma rota de fallback.

Criar o arquivo staticwebapp.config.json

Se ainda não há um arquivo staticwebapp.config.json no projeto, crie um seguindo estas etapas:

No Visual Studio, clique com o botão direito do mouse na pasta wwwroot dentro do projeto Client.
Selecione Adicionar –> Novo item.
Selecione Arquivo JSON nos modelos disponíveis, nomeie-o como 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/*"]
  }
}

Efetuar push das alterações para o Git

Agora, salve as alterações no repositório Git local e faça commit delas. Depois, envie essas alterações por push ao GitHub.

Experimentar a rota de fallback

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

Vá para seu repositório no navegador e observe o progresso da GitHub Action. Siga estas etapas para ver o progresso:

Selecione o menu Ações.
No menu Fluxos de trabalho, selecione o item de fluxo de trabalho CI/CD de Aplicativos Web Estáticos do Azure.
Selecione o link mais recente (superior) nas execuções de ação à direita.
Selecione o link Criar e Implantar Trabalho.

Você pode ver o progresso da GitHub Action à medida que ela compila e publica o aplicativo Web e a API.