Use uma página 404 personalizada
Nesta página
- Visão geral
- Procedimento
- Crie um arquivo de página 404 personalizado
- Hospede o arquivo 404 no App Services
- Configurar o caminho do recurso 404 no App Services
- Obtenha a versão mais recente da sua aplicação
- Crie um arquivo HTML de página 404 personalizado
- Hospede o arquivo HTML no App Services
- Especifique a página 404 na configuração do aplicativo
- Distribuir a configuração de hospedagem atualizada
Visão geral
Você pode substituir a 404 página padrão que o Atlas App Services exibe quando um usuário tenta acessar um recurso que não existe com um documento HTML personalizado. Você pode especificar essa 404 página personalizada na UI do App Services ou importando um diretório de configuração do aplicativo que inclua a página em seu hosting diretório . Selecione a aba abaixo que corresponde ao método que você deseja usar.
Observação
Erros 404 em aplicativos de página única
Quando o alojamento de aplicativos de página única está habilitado, o App Services sempre retorna uma resposta HTTP 200 com a raiz do aplicativo, independentemente da rota solicitada. Isso significa que você não pode especificar uma página 404 personalizada para um SPA. Em vez disso, você deve incluir código personalizado em seu aplicativo para lidar com rotas inválidas.
Procedimento
Crie um arquivo de página 404 personalizado
Você pode usar qualquer arquivo hospedado como sua página 404 personalizada. É comum usar um arquivo HTML que incorpora os seguintes elementos:
Uma mensagem curta indicando o erro, por exemplo "Esta página não existe."
Links ou opções alternativas para o usuário continuar navegando.
Hospede o arquivo 404 no App Services
Depois de criar o arquivo 404 personalizado, você precisa carregá-lo nos App Services. Para carregar o arquivo, navegue até a tela Hosting da UI do App Services, clique em Upload Files e selecione o arquivo HTML personalizado.
Configurar o caminho do recurso 404 no App Services
Depois de carregar o arquivo 404, basta configurar o App Services para veicular esse arquivo em vez da página 404 padrão.
Na página Hosting , clique na aba Settings .
Em Custom 404 Page, clique em Choose File.
Selecione seu arquivo 404 personalizado na lista.
Clique em Save.
Depois de atualizar a configuração do Hosting , o App Services começará a veicular seu arquivo personalizado em vez da página 404 padrão.
Obtenha a versão mais recente da sua aplicação
Para configurar uma página 404 personalizada com o App Services CLI, você precisa de uma cópia local dos arquivos de configuração do seu aplicativo.
Para extrair uma cópia local da versão mais recente do seu aplicativo, execute o seguinte:
appservices pull --remote="<Your App ID>"
Dica
Você também pode baixar uma cópia dos arquivos de configuração do seu aplicativo na tela Deploy > Import/Export App na interface do usuário do App Services.
Crie um arquivo HTML de página 404 personalizado
Você pode usar qualquer arquivo HTML válido para a página 404 do seu aplicativo. Considere incorporar os seguintes elementos:
Uma mensagem curta indicando o erro, por exemplo "Esta página não existe."
Links ou opções alternativas para o usuário continuar navegando.
Hospede o arquivo HTML no App Services
Depois de criar o arquivo HTML personalizado, você precisa hospedá-lo no App Services.
Se ainda não estiver hospedando o arquivo HTML no App Services, adicione-o ao diretório hosting/files/ .
Especifique a página 404 na configuração do aplicativo
Em hosting/config.json, defina default_error_path para o caminho do recurso do arquivo HTML da página 404 e, em seguida, salve o arquivo de configuração.
"hosting": { "enabled": true, "default_error_path": "/pages/custom_404.html" }
Distribuir a configuração de hospedagem atualizada
Depois de atualizar o hosting/config.json , você pode enviar a configuração atualizada para seu aplicativo remoto. Se você também adicionou a página 404, certifique-se de usar o sinalizador --include-hosting . O App Services CLI começa imediatamente a veicular sua página 404 personalizada por push.
appservices push --remote="<Your App ID>" --include-hosting