Uso de redireccionamientos - AWS Amplify Hospedaje

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Uso de redireccionamientos

Los redireccionamientos permiten a un servidor web redirigir la navegación desde una URL a otra. Entre los motivos habituales para el uso de redireccionamientos se incluye: personalizar el aspecto de una dirección URL, evitar enlaces rotos, mover la ubicación de alojamiento de una aplicación o sitio sin cambiar su dirección y cambiar una dirección URL solicitada a la forma que necesita una aplicación web.

Tipos de redireccionamiento

Amplify admite los siguientes tipos de redireccionamiento en la consola.

Redireccionamiento permanente (301)

Los redireccionamientos 301 se han diseñado para cambios duraderos en el destino de una dirección web. El historial de clasificación del motor de búsqueda de la dirección original se aplica a la nueva dirección de destino. El redireccionamiento se produce en el lado del cliente, por tanto, una barra de navegación de explorador muestra la dirección de destino tras el redireccionamiento.

Entre los motivos habituales para utilizar redireccionamientos 301 se incluyen:

  • Para evitar un enlace que no funciona cuando cambia la dirección de una página.

  • Para evitar un enlace que no funciona cuando un usuario comete un error tipográfico predecible en una dirección.

Redireccionamiento temporal (302)

Los redireccionamientos 302 se han diseñado para cambios temporales en el destino de una dirección web. El historial de clasificación del motor de búsqueda de la dirección original no se aplica a la nueva dirección de destino. El redireccionamiento se produce en el lado del cliente, por tanto, una barra de navegación de explorador muestra la dirección de destino tras el redireccionamiento.

Entre los motivos habituales para utilizar redireccionamientos 302 se incluyen:

  • Proporcionar un destino alternativo mientras se llevan a cabo reparaciones en una dirección original.

  • Proporcionar páginas de prueba para una comparación A/B de interfaz de usuario.

    nota

    Si su aplicación devuelve una respuesta 302 inesperada, es probable que el error se deba a los cambios que has realizado en la configuración de redireccionamiento y de los encabezados personalizados de la aplicación. Para solucionar este problema, compruebe que los encabezados personalizados sean válidos y, a continuación, vuelva a activar la regla de reescritura 404 predeterminada de su aplicación.

Reescritura (200)

Los redireccionamientos 200 (reescrituras) se han diseñado para mostrar contenido desde la dirección de destino como si se sirviera desde la dirección original. El historial de clasificación del motor de búsqueda se sigue aplicando a la dirección original. El redireccionamiento se produce en el lado del servidor, por tanto, una barra de navegación de explorador muestra la dirección original tras el redireccionamiento. Entre los motivos habituales para utilizar redireccionamientos 200 se incluyen:

  • Para redirigir un sitio completo a una nueva ubicación de alojamiento sin cambiar la dirección del sitio.

  • Para redireccionar todo el tráfico a una aplicación de web de página única (SPA) a su página index.html para gestión por parte de una función de router del lado del cliente.

No encontrado (404)

Los redireccionamientos 404 se producen cuando una solicitud apunta a una dirección que no existe. Se muestra la página de destino de un error 404 en lugar de la solicitada. Entre los motivos habituales por los que se produce un redireccionamiento 404 se incluyen:

  • Para evitar un mensaje de enlace que no funciona cuando un usuario introduce una dirección URL incorrecta.

  • Para apuntar solicitudes a páginas no existentes de una aplicación web a su página index.html para gestión por parte de una función de router del lado del cliente.

Creación y edición de redireccionamientos

Puede crear y editar redireccionamientos de una aplicación en la consola de Amplify. Antes de comenzar, necesita la siguiente información sobre las partes de un redireccionamiento.

Una dirección original

La dirección que solicitó el usuario.

Una dirección de destino

La dirección que realmente ofrece el contenido que el usuario ve.

Un tipo de redireccionamiento

Entre los tipos se incluye un redireccionamiento permanente (301), un redireccionamiento temporal (302), una reescritura (200) o no encontrado (404).

Un código de país de dos letras (opcional)

Un valor que puede incluir para segmentar la experiencia de usuario de su aplicación por región geográfica.

Para crear un redireccionamiento en la consola de Amplify
  1. Inicia sesión en la consola de Amplify AWS Management Console y ábrela.

  2. Elija la aplicación para la que desea crear un redireccionamiento.

  3. En el panel de navegación, selecciona Alojamiento y, a continuación, selecciona Reescrituras y redirecciones.

  4. En la página Reescrituras y redireccionamientos, selecciona Administrar redireccionamientos.

  5. El procedimiento para añadir un redireccionamiento varía en función de si desea añadir las reglas de forma individual o realizar una edición masiva:

    • Para crear una redirección individual, selecciona Añadir reescritura.

      1. En Dirección de origen, introduzca la dirección original solicitada por el usuario.

      2. En Dirección de destino, introduzca la dirección de destino que muestra el contenido al usuario.

      3. En Tipo, elija el tipo de redireccionamiento de la lista.

      4. (Opcional) En Código de país, introduzca una condición de código de país de dos letras.

    • Para editar redireccionamientos masivos, elija Abrir editor de texto.

      1. Añade o actualiza manualmente las redirecciones en el editor JSON de reescrituras y redirecciones.

  6. Elija Guardar.

Orden de redireccionamientos

Los redireccionamientos se aplican desde la parte superior de la lista hacia abajo. Asegúrese de que el orden tenga el efecto previsto. Por ejemplo, el siguiente orden de redireccionamientos hace que todas las solicitudes de una ruta determinada en /docs/ se redirijan a la misma ruta en /documents/, excepto /docs/specific-filename.html que redirige a /documents/different-filename.html:

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

El siguiente orden de redireccionamientos omite el redireccionamiento de specific-filename.html a different-filename.html:

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

Parámetros de consulta

Puede utilizar parámetros de consulta para tener un mayor control sobre las coincidencias de dirección URL. Amplify reenvía todos los parámetros de consulta a la ruta de destino para los redireccionamientos 301 y 302, con las siguientes excepciones:

  • Si la dirección original incluye una cadena de consulta establecida en un valor específico, Amplify no reenvía los parámetros de la consulta. En este caso, el redireccionamiento solo se aplica a las solicitudes a la dirección URL de destino con el valor de consulta especificado.

  • Si la dirección de destino de la regla coincidente tiene parámetros de consulta, los parámetros de consulta no se reenvían. Por ejemplo, si la dirección de destino del redireccionamiento es https://example-target.com?q=someParam, los parámetros de consulta no se transfieren.

Redireccionamientos y reescrituras sencillos

En esta sección se incluye código de ejemplo de situaciones de redireccionamiento comunes.

nota

La coincidencia de dominios de direcciones originales no distingue entre mayúsculas y minúsculas.

Puede utilizar el siguiente código de ejemplo para redirigir permanentemente una página específica a una nueva dirección.

Dirección original Dirección de destino Tipo de redireccionamiento Código de país

/original.html

/destination.html

permanent redirect (301)

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

Puede utilizar el siguiente código de ejemplo para redirigir cualquier ruta en una carpeta a la misma ruta de una carpeta diferente.

Dirección original Dirección de destino Tipo de redireccionamiento Código de país

/docs/<*>

/documents/<*>

permanent redirect (301)

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

Puede utilizar el siguiente código de ejemplo para redirigir todo el tráfico a index.html como una reescritura. En esta situación, la reescritura hace que aparezca al usuario que ha llegado a la dirección original.

Dirección original Dirección de destino Tipo de redireccionamiento Código de país

/<*>

/index.html

rewrite (200)

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

Puede utilizar el siguiente código de ejemplo para usar una reescritura para cambiar el subdominio que aparece al usuario.

Dirección original Dirección de destino Tipo de redireccionamiento Código de 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}]

Puede utilizar el siguiente código de ejemplo para redirigir a un dominio diferente con un prefijo de ruta.

Dirección original Dirección de destino Tipo de redireccionamiento Código de 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}]

Puede utilizar el siguiente código de ejemplo para redirigir rutas de una carpeta que no se puede encontrar a una página 404 personalizada.

Dirección original Dirección de destino Tipo de redireccionamiento Código de país

/<*>

/404.html

not found (404)

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

Redireccionamientos para aplicaciones web de página única (SPA)

La mayoría de los marcos SPA admiten HTML5 History.pushState () para cambiar la ubicación del navegador sin iniciar una solicitud de servidor. Esto funciona para los usuarios que comienzan su recorrido desde la raíz (o /index.html), pero devuelve un error a los usuarios que van directamente a cualquier otra página.

El ejemplo siguiente utiliza expresiones regulares para configurar una reescritura 200 de todos los archivos en index.html, excepto para las extensiones de archivo concretas especificadas en la expresión regular.

Dirección original Dirección de destino Tipo de redireccionamiento Código de 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}]

Reescritura de proxy inverso

En el siguiente ejemplo se utiliza una reescritura a contenido de proxy desde otra ubicación para que al usuario le parezca que el dominio no ha cambiado.

Dirección original Dirección de destino Tipo de redireccionamiento Código de país

/images/<*>

https://images.otherdomain.com/<*>

rewrite (200)

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

Barras finales y direcciones URL limpias

Para crear estructuras de direcciones URL limpias como about en lugar de about.html, los generadores de sitios estáticos, como Hugo, generan directorios de páginas con un index.html (/about/index.html). Amplify crea automáticamente direcciones URL limpias añadiendo una barra diagonal siempre que sea necesario. La tabla siguiente destaca diferentes situaciones:

Entradas de usuario en el navegador Dirección URL en la barra de dirección Documento servido

/about

/about

/about.html

/about (when about.html returns 404)

/about/

/about/index.html

/about/

/about/

/about/index.html

Marcadores de posición

Puede utilizar el siguiente código de ejemplo para redirigir rutas en una estructura de carpetas a una estructura coincidente en otra carpeta.

Dirección original Dirección de destino Tipo de redireccionamiento Código de 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}]

Cadenas de consulta y parámetros de ruta

Puede utilizar el siguiente código de ejemplo para redirigir una ruta a una carpeta con un nombre que coincida con el valor de un elemento de cadena de consulta en la dirección original:

Dirección original Dirección de destino Tipo de redireccionamiento Código de 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

Amplify reenvía todos los parámetros de la cadena de consulta a la ruta de destino para los redireccionamientos 301 y 302. Sin embargo, si la dirección original incluye una cadena de consulta establecida en un valor específico, como se muestra en este ejemplo, Amplify no reenvía los parámetros de la consulta. En este caso, el redireccionamiento solo se aplica a las solicitudes a la dirección de destino con el valor de consulta especificado id.

Puede utilizar el siguiente código de ejemplo para redirigir todas las rutas que no se pueden encontrar en un determinado nivel de una estructura de carpetas a index.html de una carpeta especificada.

Dirección original Dirección de destino Tipo de redireccionamiento Código de 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}]

Redireccionamientos basados en la región

Puede utilizar el siguiente código de ejemplo para redirigir solicitudes según la región.

Dirección original Dirección de destino Tipo de redireccionamiento Código de país

/documents

/documents/us/

temporary redirect (302)

<US>

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

Expresiones comodín en las redirecciones y reescrituras

Puede utilizar la expresión comodín,<*>, en la dirección original para redirigir o reescribir. Debe colocar la expresión al final de la dirección original y debe ser única. Amplify ignora las direcciones originales que incluyen más de una expresión comodín o las usa en una ubicación diferente.

El siguiente es un ejemplo de una redirección válida con una expresión comodín.

Dirección original Dirección de destino Tipo de redireccionamiento Código de país

/docs/<*>

/documents/<*>

permanent redirect (301)

Los dos ejemplos siguientes muestran redireccionamientos no válidos con expresiones comodín.

Dirección original Dirección de destino Tipo de redireccionamiento Código de país

/docs/<*>/content

/documents/<*>/content

permanent redirect (301)

/docs/<*>/content/<*>

/documents/<*>/content/<*>

permanent redirect (301)