Configuración de encabezados personalizados

Existen dos formas de especificar los encabezados HTTP personalizados en una aplicación de Amplify. Puede especificar los encabezados en la consola de Amplify o bien descargar y editar el archivo customHttp.yml de la aplicación, que deberá guardar en el directorio raíz del proyecto.

Cómo configurar encabezados personalizados de una aplicación y guardarlos en la consola

1. Inicie sesión en AWS Management Console y abra la consola de Amplify.

2. Elija la aplicación para la que desea configurar encabezados personalizados.

3. En el panel de navegación, seleccione Alojamiento y, a continuación, seleccione Encabezados personalizados.

4. En la página Encabezados personalizados, seleccione Editar.

5. En la ventana Editar encabezados personalizados, introduzca la información de los encabezados personalizados con formato de encabezado personalizado YAML.

   1. En pattern, introduzca el patrón de coincidencia.

   2. En key, ingrese el nombre del encabezado personalizado.

   3. En value, ingrese el valor del encabezado personalizado.

6. Elija Guardar.

7. Vuelva a implementar la aplicación para aplicar los nuevos encabezados personalizados.

   • Para una aplicación de CI/CD, desplácese a la ramificación que desea implementar y eligir Volver a implementar esta versión. También puede realizar una nueva compilación desde su repositorio de Git.

   • Para una aplicación de implementación manual, vuelva a implementar la aplicación en la consola de Amplify.

Cómo configurar encabezados personalizados de una aplicación y guardarlos en la raíz del repositorio

1. Inicie sesión en AWS Management Console y abra la consola de Amplify.

2. Elija la aplicación para la que desea configurar encabezados personalizados.

3. En el panel de navegación, seleccione Alojamiento y, a continuación, seleccione Encabezados personalizados.

4. En la página Encabezados personalizados, seleccione Descargar YML.

5. Abra el archivo customHttp.yml descargado en su editor de código preferido e introduzca la información de los encabezados personalizados con formato de encabezado personalizado YAML.

   1. En pattern, introduzca el patrón de coincidencia.

   2. En key, ingrese el nombre del encabezado personalizado.

   3. En value, ingrese el valor del encabezado personalizado.

6. Guarde el archivo customHttp.yml editado en el directorio raíz de su proyecto. Si está trabajando con un monorepo, guarde el archivo customHttp.yml en la raíz de su repositorio.

7. Vuelva a implementar la aplicación para aplicar los nuevos encabezados personalizados.

   • Para una aplicación de CI/CD, lleve a cabo una nueva compilación desde su repositorio de Git que incluya el nuevo archivo customHttp.yml.

   • Para una aplicación de implementación manual, vuelva a implementar la aplicación en la consola de Amplify e incluya el nuevo archivo customHttp.yml con los artefactos a cargar.

nota

Los encabezados personalizados configurados en el archivo customHttp.yml e implementados en el directorio raíz de la aplicación anularán los encabezados personalizados definidos en la sección Encabezados personalizados de la consola de Amplify.

Ejemplo de encabezados personalizados de seguridad

Los encabezados personalizados de seguridad permiten aplicar HTTPS, evitar ataques XSS y defender su navegador frente a ataques tipo clickjack. Use la siguiente sintaxis de YAML para aplicar encabezados de seguridad personalizados a su aplicación.

customHeaders:
  - pattern: '**'
    headers:
      - key: 'Strict-Transport-Security'
        value: 'max-age=31536000; includeSubDomains'
      - key: 'X-Frame-Options'
        value: 'SAMEORIGIN'
      - key: 'X-XSS-Protection'
        value: '1; mode=block'
      - key: 'X-Content-Type-Options'
        value: 'nosniff'
      - key: 'Content-Security-Policy'
        value: "default-src 'self'"

Configuración de encabezados Cache-Control personalizados

Las aplicaciones alojadas en Amplify respetan los encabezados Cache-Control que envía el origen, a menos que los anule al definir encabezados personalizados. Amplify solo aplica encabezados personalizados Cache-Control para las respuestas correctas con un código de estado 200 OK. Esto evita que las respuestas de error se almacenen en caché y se distribuyen a otros usuarios que hagan la misma solicitud.

Puede ajustar manualmente la directiva s-maxage para tener más control sobre el rendimiento y la disponibilidad de implementación de la aplicación. Por ejemplo, para aumentar el tiempo que el contenido permanece almacenado en caché en la periferia, puede aumentar manualmente el tiempo de vida (TTL) actualizando s-maxage a un valor superior al predeterminado de 600 segundos (10 minutos).

Para especificar un valor personalizado para s-maxage, utilice el siguiente formato YAML. Este ejemplo mantiene el contenido asociado en caché en la periferia durante 3600 segundos (una hora).

customHeaders:
  - pattern: '/img/*'
    headers:
      - key: 'Cache-Control' 
        value: 's-maxage=3600'

Para obtener más información sobre cómo controlar el rendimiento de las aplicaciones con encabezados, consulte Uso del encabezado Cache-Control para aumentar el rendimiento de la aplicación.