Usar redirecionamentos

Os redirecionamentos permitem que um servidor web redirecione a navegação de um URL para outro. As razões comuns para usar redirecionamentos incluem: personalizar a aparência de um URL, evitar links quebrados, mover o local de hospedagem de um aplicativo ou site sem alterar seu endereço e alterar um URL solicitado para a forma exigida por um aplicativo web.

Tipos de redirecionamentos

O Amplify suporta os seguintes tipos de redirecionamento no console.

Redirecionamento permanente (301)

Os redirecionamentos 301 são destinados a alterações duradouras ao destino de um endereço web. O histórico de classificação do mecanismo de busca do endereço original se aplica ao novo endereço de destino. O redirecionamento ocorre do lado do cliente, portanto, a barra de navegação de um navegador exibirá o endereço de destino após o redirecionamento.

Os motivos comuns para usar redirecionamentos 301 incluem:

• Evitar um link quebrado quando o endereço de uma página é alterado.

• Evitar um link quebrado quando um usuário comete um erro de digitação previsível em um endereço.

Redirecionamento temporário (302)

Os redirecionamentos 302 são destinados a alterações temporárias ao destino de um endereço web. O histórico de classificação do mecanismo de busca do endereço original não se aplica ao novo endereço de destino. O redirecionamento ocorre do lado do cliente, portanto, a barra de navegação de um navegador exibirá o endereço de destino após o redirecionamento.

Os motivos comuns para usar redirecionamentos 302 incluem:

• Fornecer um destino de desvio enquanto estão sendo feitos reparos no endereço original.

• Fornecer páginas de teste para comparação entre A/B da interface de um usuário.

  nota

  Se seu aplicativo estiver retornando uma resposta 302 inesperada, o erro provavelmente foi causado por alterações que você fez no redirecionamento e na configuração do cabeçalho personalizado do seu aplicativo. Para resolver esse problema, verifique se seus cabeçalhos personalizados são válidos e reative a regra de regravação 404 padrão para seu aplicativo.

Regravação (200)

Os redirecionamentos 200 (regravações) são destinados a mostrar conteúdo do endereço de destino como se ele fosse fornecido pelo endereço original. O histórico de classificação do mecanismo de busca continua a ser aplicado ao endereço original. O redirecionamento ocorre do lado do servidor, portanto, a barra de navegação de um navegador exibirá o endereço original após o redirecionamento. Os motivos comuns para usar redirecionamentos 200 incluem:

• Redirecionar todo um site para um novo local de hospedagem sem alterar o endereço do site.

• Redirecionar todo o tráfego para um aplicativo de única página web (SPA) para sua página index.html para manipulação por uma função de roteamento do lado do cliente.

Não encontrado (404)

Os redirecionamentos 404 ocorrem quando uma solicitação aponta para um endereço que não existe. A página de destino de um 404 é exibida em vez da página solicitada. Os motivos comuns para que ocorra um redirecionamento 404 incluem:

• Evitar uma mensagem de link quebrado quando um usuário entra em um URL inválido.

• Apontar solicitações de páginas não existentes de um aplicativo web para sua página index.html para manipulação por uma função de roteamento do lado do cliente.

Criando e editando redirecionamentos

É possível criar e editar redirecionamentos para um aplicativo no console do Amplify. Antes de começar, você precisará das seguintes informações sobre as partes de um redirecionamento.

Um endereço original

O endereço solicitado pelo usuário.

Um endereço de destino

O endereço que realmente fornece o conteúdo que o usuário vê.

Um tipo de redirecionamento

Os tipos incluem um redirecionamento permanente (301), um redirecionamento temporário (302), uma regravação (200) ou não encontrado (404).

Um código de país de duas letras (opcional)

Um valor que é possível incluir para segmentar a experiência do usuário do seu aplicativo por região geográfica.

Para criar um redirecionamento no console do Amplify

1. Faça login AWS Management Console e abra o console do Amplify.

2. Escolha o aplicativo para o qual você deseja criar um redirecionamento.

3. No painel de navegação, escolha Hospedagem e, em seguida, escolha Regravações e redirecionamentos.

4. Na página Regravações e redirecionamentos, escolha Gerenciar redirecionamentos.

5. O procedimento para adicionar um redirecionamento varia dependendo se você deseja adicionar regras individualmente ou fazer uma edição em massa:

   • Para criar um redirecionamento individual, escolha Adicionar reescrita.

     1. Para um endereço original, insira o endereço que o usuário solicitou.

     2. Em Endereço de destino, insira o endereço de destino que renderiza o conteúdo para o usuário.

     3. Em Tipo, escolha o tipo de redirecionamento na lista.

     4. (Opcional) Em Código do país, insira uma condição de código do país de duas letras.

   • Para editar redirecionamentos em massa, escolha Abrir editor de texto.

     1. Adicione ou atualize manualmente os redirecionamentos no editor JSON de regravações e redirecionamentos.

6. Escolha Salvar.

Ordem de redirecionamentos

Os redirecionamentos são aplicados do topo da lista para baixo. Verifique se a sua solicitação tem o efeito pretendido. Por exemplo, a seguinte ordem de redirecionamentos faz com que todas as solicitações de determinado caminho em /docs/ sejam redirecionadas ao mesmo caminho em /documents/, exceto /docs/specific-filename.html, que é redirecionado para documents/different-filename.html:

/docs/specific-filename.html /documents/different-filename.html 301
/docs/<*> /documents/<*>

A seguinte ordem de redirecionamentos ignora o redirecionamento de specific-filename.html para different-filename.html:

/docs/<*> /documents/<*>
/docs/specific-filename.html /documents/different-filename.html 301

Parâmetros de consulta

É possível usar parâmetros de consulta para ter mais controle sobre suas correspondências de URL. O Amplify encaminha todos os parâmetros de consulta para o caminho de destino dos redirecionamentos 301 e 302, com as seguintes exceções:

• Se o endereço original incluir uma sequência de caracteres de consulta definida com um valor específico, o Amplify não encaminhará os parâmetros de consulta. Nesse caso, o redirecionamento se aplica somente às solicitações para o URL de destino com o valor de consulta especificado.

• Se o endereço de destino da regra correspondente tiver parâmetros de consulta, os parâmetros de consulta não serão encaminhados. Por exemplo, se o endereço de destino do redirecionamento for https://example-target.com?q=someParam, os parâmetros de consulta não serão transmitidos.

Redirecionamentos e regravações simples

Esta seção inclui exemplos de código para cenários comuns de redirecionamento.

nota

A correspondência de domínio do endereço original não diferencia maiúsculas de minúsculas.

É possível usar o código de exemplo a seguir para redirecionar permanentemente uma página específica a um novo endereço.

Endereço original	Endereço de destino	Tipo de redirecionamento	Código do país
/original.html	/destination.html	permanent redirect (301)

^{JSON [{"source": "/original.html", "status": "301", "target": "/destination.html", "condition": null}]}

É possível usar o código de exemplo a seguir para redirecionar qualquer caminho em uma pasta para o mesmo caminho em uma pasta diferente.

Endereço original	Endereço de destino	Tipo de redirecionamento	Código do país
/docs/<*>	/documents/<*>	permanent redirect (301)

^{JSON [{"source": "/docs/<*>", "status": "301", "target": "/documents/<*>", "condition": null}]}

É possível usar o código de exemplo a seguir para redirecionar todo o tráfego para index.html como uma regravação. Nesse cenário, a regravação faz parecer para o usuário que ele está no endereço original.

Endereço original	Endereço de destino	Tipo de redirecionamento	Código do país
/<*>	/index.html	rewrite (200)

^{JSON [{"source": "/<*>", "status": "200", "target": "/index.html", "condition": null}]}

É possível usar o código de exemplo a seguir para usar uma regravação para alterar o subdomínio que é exibido ao usuário.

Endereço original	Endereço de destino	Tipo de redirecionamento	Código do país
https://mydomain.com	https://www.mydomain.com	rewrite (200)

^{JSON [{"source": "https://mydomain.com", "status": "200", "target": "https://www.mydomain.com", "condition": null}]}

É possível usar o código de exemplo a seguir para redirecionar para um domínio diferente com um prefixo de caminho.

Endereço original	Endereço de destino	Tipo de redirecionamento	Código do país
https://mydomain.com	https://www.mydomain.com/documents	temporary redirect (302)

^{JSON [{"source": "https://mydomain.com", "status": "302", "target": "https://www.mydomain.com/documents/", "condition": null}]}

É possível usar o código de exemplo a seguir para redirecionar caminhos em uma pasta que não podem ser encontrados para uma página 404 personalizada.

Endereço original	Endereço de destino	Tipo de redirecionamento	Código do país
/<*>	/404.html	not found (404)

^{JSON [{"source": "/<*>", "status": "404", "target": "/404.html", "condition": null}]}

Redireciona para aplicativos de única página web (SPA)

A maioria dos frameworks SPA suporta HTML5 history.pushState () para alterar a localização do navegador sem iniciar uma solicitação do servidor. Isso funciona para usuários que começam a jornada a partir da raiz (ou /index.html), mas falha para usuários que navegam diretamente para qualquer outra página.

O exemplo a seguir usa expressões regulares para configurar uma reescrita 200 para todos os arquivos em index.html, exceto para as extensões de arquivo especificadas na expressão regular.

Endereço original	Endereço de destino	Tipo de redirecionamento	Código do país
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>	/index.html	200

^{JSON [{"source": "</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>", "status": "200", "target": "/index.html", "condition": null}]}

Regravação de proxy reverso

O exemplo a seguir usa uma regravação para criar um proxy de conteúdo de outro local para que pareça ao usuário que o domínio não foi alterado.

Endereço original	Endereço de destino	Tipo de redirecionamento	Código do país
/images/<*>	https://images.otherdomain.com/<*>	rewrite (200)

^{JSON [{"source": "/images/<*>", "status": "200", "target": "https://images.otherdomain.com/<*>", "condition": null}]}

Barras finais e URLs limpos

Para criar estruturas limpas de URL, como about, em vez de about.html, geradores de site estático, como Hugo, geram diretórios para páginas com um index.html (/about/index.html). O Amplify cria automaticamente URLs limpos adicionando uma barra final quando necessário. A tabela a seguir destaca diferentes cenários:

Entradas do usuário no navegador	URL na barra de endereços	Documento fornecido
/about	/about	/about.html
/about (when about.html returns 404)	/about/	/about/index.html
/about/	/about/	/about/index.html

Espaços reservados

É possível usar o código de exemplo a seguir para redirecionar caminhos em uma estrutura de pastas a uma estrutura correspondente em outra pasta.

Endereço original	Endereço de destino	Tipo de redirecionamento	Código do país
/docs/<year>/<month>/<date>/<itemid>	/documents/<year>/<month>/<date>/<itemid>	permanent redirect (301)

^{JSON [{"source": "/docs/<year>/<month>/<date>/<itemid>", "status": "301", "target": "/documents/<year>/<month>/<date>/<itemid>", "condition": null}]}

Strings de consulta e parâmetros de caminho

É possível usar o código de exemplo a seguir para redirecionar um caminho para uma pasta com um nome que corresponde ao valor de um elemento de string de consulta no endereço original:

Endereço original	Endereço de destino	Tipo de redirecionamento	Código do país
/docs?id=<my-blog-id-value	/documents/<my-blog-post-id-value>	permanent redirect (301)

^{JSON [{"source": "/docs?id=<my-blog-id-value>", "status": "301", "target": "/documents/<my-blog-id-value>", "condition": null}]}

nota

O Amplify encaminha todos os parâmetros da sequência de caracteres de consulta para o caminho de destino para redirecionamentos 301 e 302. No entanto, se o endereço original incluir uma sequência de caracteres de consulta definida com um valor específico, conforme demonstrado neste exemplo, o Amplify não encaminhará os parâmetros de consulta. Nesse caso, o redirecionamento se aplica somente às solicitações para o endereço de destino com o valor de consulta id especificado.

É possível usar o código de exemplo a seguir para redirecionar todos os caminhos que não podem ser encontrados em determinado nível de uma estrutura de pastas para index.html em uma pasta especificada.

Endereço original	Endereço de destino	Tipo de redirecionamento	Código do país
/documents/<folder>/<child-folder>/<grand-child-folder>	/documents/index.html	not found (404)

^{JSON [{"source": "/documents/<x>/<y>/<z>", "status": "404", "target": "/documents/index.html", "condition": null}]}

Redirecionamentos baseados em região

É possível usar o código de exemplo a seguir para redirecionar solicitações com base na região.

Endereço original	Endereço de destino	Tipo de redirecionamento	Código do país
/documents	/documents/us/	temporary redirect (302)	<US>

^{JSON [{"source": "/documents", "status": "302", "target": "/documents/us/", "condition": "<US>"}]}

Expressões curinga em redirecionamentos e regravações

Você pode usar a expressão curinga,<*>, no endereço original para redirecionar ou reescrever. Você deve colocar a expressão no final do endereço original e ela deve ser exclusiva. O Amplify ignora os endereços originais que incluem mais de uma expressão curinga ou os usa em um posicionamento diferente.

Veja a seguir um exemplo de um redirecionamento válido com uma expressão curinga.

Endereço original	Endereço de destino	Tipo de redirecionamento	Código do país
/docs/<*>	/documents/<*>	permanent redirect (301)

Os dois exemplos a seguir demonstram redirecionamentos inválidos com expressões curinga.

Endereço original	Endereço de destino	Tipo de redirecionamento	Código do país
/docs/<*>/content	/documents/<*>/content	permanent redirect (301)
/docs/<*>/content/<*>	/documents/<*>/content/<*>	permanent redirect (301)