Hospedar um aplicativo de página única
Nesta página
Visão geral
Muitos aplicativos web criados com frameworks modernos, como React, Vue e Angular, são aplicativos de página única (SPAs) que lidam dinamicamente com o roteamento e a renderização do lado do cliente em vez de buscar cada página renderizada do servidor. Você pode usar o Atlas App Services para hospedar seu SPA e servi-lo aos clientes.
Para hospedar seu aplicativo, você precisa especificar que é uma SPA no App Services. Por padrão, o App Services lida com solicitações para um determinado recurso ao retornar o arquivo hospedado no caminho de recurso especificado ou um 404, se nenhum arquivo corresponder ao caminho. No entanto, as SPAs renderizam em um único arquivo HTML específico, portanto, todas as solicitações devem retornar esse arquivo independentemente do caminho do recurso solicitado.
Este guia aborda como configurar a hospedagem do App Services para redirecionar todas as solicitações de recursos para um único arquivo, a fim de oferecer suporte ao padrão SPA.
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
Carregue seu aplicativo criado para o App Services
Aplicativos de página única são renderizados em um único arquivo HTML específico, normalmente /index.html. O arquivo deve incluir o código JavaScript necessário para conectar e renderizar seu aplicação, seja embutido em uma marcação <script> ou importado de um arquivo externo. Você também precisará hospedar todos os recursos que não pretende acessar por meio de uma CDN.
Quando estiver pronto para hospedar seu SPA, execute o script de compilação do seu aplicativo e carregue a pasta de compilação para o App Services.
Configure o App Services para atender seu aplicativo
Depois de começar a hospedar os arquivos do aplicativo, você pode acessar imediatamente o SPA solicitando o arquivo HTML raiz diretamente. No entanto, uma solicitação para qualquer caminho que não seja o arquivo raiz retornará um 404. Isso pode interromper o comportamento esperado de um SPA que usa um roteador do lado do cliente ou que depende do caminho da URL.
Configurar o App Services para servir a página raiz do SPA para todas as solicitações:
Navegue até a página Hosting na interface do usuário do App Services e clique na aba Settings .
Certifique-se de não ter especificado uma página 404 personalizada. Se o 404 personalizado estiver habilitado, clique no ícone da lixeira () ao lado da página 404 especificada.
Ao lado de Single Page Application, clique em Choose File. Escolha o arquivo HTML raiz do seu SPA e clique em Select.
Clique em Save.
Observação
Habilite a hospedagem na interface do usuário
Antes de começar a usar a App Services CLI com hospedagem estática, você deve habilitar a hospedagem na UI do App Services.
Obtenha a versão mais recente da sua aplicação
Para configurar um aplicação de página única com a App Services CLI, você precisa de uma cópia local dos arquivos de configuração do 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.
Adicione seu código de aplicativo criado
Aplicação de página única são renderizados em um único arquivo HTML específico, normalmente /index.html. O arquivo deve incluir o código JavaScript necessário para conectar e renderizar seu aplicativo, seja em linha em uma tag <script> ou importado de um arquivo externo. Você também precisará hospedar todos os recursos que não pretende acessar por meio de um CDN.
Quando estiver pronto para hospedar seu SPA, execute o script de compilação do aplicativo e, em seguida, copie a pasta de compilação de saída para o diretório /hosting/files do diretório do aplicação .
Configure o App Services para atender seu aplicativo
Em hosting/config.json, defina default_response_code como 200 e defina default_error_path como o caminho do recurso do arquivo HTML raiz do seu SPA. Certifique-se de salvar o arquivo quando terminar.
{ "enabled": true, "default_response_code": 200, "default_error_path": "/index.html", }
Distribuir a configuração de hospedagem atualizada
Depois de atualizar e salvar hosting/config.json , você poderá enviar a configuração atualizada para seu aplicativo remoto. O App Services CLI oferece suporte imediatamente ao seu SPA no push.
appservices push --remote="<Your App ID>" --include-hosting