¿Cómo puedo cargar una imagen o un archivo PDF a Amazon S3 a través de API Gateway?

Descripción corta

Para usar API Gateway para cargar una imagen o un PDF como archivo binario a un bucket de Amazon S3, activa la compatibilidad con archivos binarios.

Para conceder a API Gateway acceso a tu bucket de S3, crea un rol de AWS Identity and Access Management (IAM). El rol de IAM debe incluir permisos para que API Gateway realice las acciones PutObject y GetObject en tu bucket de S3.

Resolución

Nota: Si se muestran errores al ejecutar comandos de la Interfaz de la línea de comandos de AWS (AWS CLI), consulta Solución de problemas de AWS CLI. Además, asegúrate de utilizar la versión más reciente de la AWS CLI.

Creación de un rol de IAM para API Gateway

Sigue estos pasos:

1. Abra la consola de IAM.
2. En el panel de navegación, selecciona Roles.
3. Selecciona Crear rol.
4. En Trusted entity type (Tipo de entidad de confianza), elige AWS service (Servicio de AWS).
5. En Service or use case (Servicio o caso de uso), elige API Gateway.
6. En Use case (Caso práctico), elige API Gateway.
7. Selecciona Siguiente. A continuación, vuelve a elegir Siguiente.
8. En Nombre de rol, introduce un nombre para tu política. Por ejemplo: api-gateway-upload-to-s3.
9. (Opcional) Para añadir etiquetas al rol de IAM, elige Agregar nueva etiqueta.
10. Selecciona Crear rol.

Creación y asociación de una política de IAM al rol de API Gateway

Sigue estos pasos:

1. Abre la consola de IAM.
2. En el panel de navegación, selecciona Roles.
3. En el cuadro de búsqueda, introduce el nombre del rol de IAM para API Gateway y, a continuación, selecciona el rol en la columna Nombre del rol.
4. En la pestaña Políticas de permisos, elige Agregar permisos y, a continuación, Create inline policy (Crear política insertada).
5. En la pestaña Editor visual, en la sección Seleccionar un servicio,elige Elegir un servicio.
6. Introduce S3 y, a continuación, elige S3.
7. En Actions allowed (Acciones permitidas), escribe PutObject y, a continuación, elige PutObject. Escribe GetObject y, a continuación, elige GetObject.
8. Amplía Recursos y, a continuación, selecciona Específico.
9. Elige Agregar ARN.
10. En Resource bucket name (Nombre del bucket de recursos), introduce el nombre del bucket. Incluye el prefijo, si corresponde.
11. En Resource object name (Nombre del objeto de recursos), introduce un nombre de objeto.
    Nota: El nombre del bucket especifica la ubicación de los archivos cargados. El nombre del objeto especifica el patrón que debe seguir el objeto para alinear las políticas. Para obtener más información, consulta las reglas de nomenclatura de buckets de uso general y la descripción general de los objetos de Amazon S3.
12. Elige Agregar ARN.
13. Selecciona Siguiente.
14. En Nombre, introduce el nombre de tu política.
15. Selecciona Crear política.

Creación de una API de REST en API Gateway

Para crear una API que entregue tus solicitudes, sigue estos pasos:

1. Abre la consola de API Gateway.
2. En el panel de navegación, selecciona API.
3. Selecciona Crear API.
4. En la sección Elige un tipo de API, en API de REST, elige Crear.
5. En Nombre de API, introduce un nombre para tu API y, a continuación, selecciona Crear API.

Para crear recursos para tu API, sigue estos pasos:

1. En el panel Recursos de la página de la API, selecciona /.
2. Elige Crear recurso.
3. En Ruta de recurso, elige /.
4. En Nombre del recurso, introduce {bucket}.
   Nota: Bucket es un nombre de variable que el usuario puede cambiar.
5. Elige Crear recurso.
6. En el panel Recursos, selecciona el recurso /{bucket}.
7. Elige Crear recurso.
8. En Ruta de recurso, elige /{bucket}/.
9. En Nombre del recurso, introduce {proxy+}.
10. Elige Crear recurso.

Para crear un método PUT para que tu API cargue imágenes o archivos PDF, sigue estos pasos:

1. En la sección Métodos, elige Crear método.
2. En Method type (Tipo de método), elige PUT.
3. En Tipo de integración, elige Servicio de AWS.
4. En Región de AWS, elige us-east-1 o la región de AWS que aparece en la página Propiedades del bucket.
5. En Servicio de AWS, elige Simple Storage Service (S3).
6. Mantén vacío el subdominio de AWS.
7. En Método HTTP, elige PUT.
8. En Tipo de acción, elige Usar sustitución de ruta.
9. En Sustitución de ruta, introduce {bucket}/{proxy}.
10. En Rol de ejecución, introduce el nombre de recurso de Amazon (ARN) del rol de IAM.
11. En Tratamiento de contenido, elige Paso a través.
12. Selecciona Crear método.

Configuración de las asignaciones de parámetros para el método PUT

Sigue estos pasos:

1. En el panel Recursos de la página de la API, selecciona PUT.
2. Selecciona Solicitud de integración y, a continuación, selecciona Editar.
3. Amplía Parámetros de ruta URL.
4. Elige Agregar parámetro de ruta.
5. En Nombre, introduce bucket.
6. En Asignado desde, escribe method.request.path.bucket.
7. Repite los pasos 4 a 6, pero para el paso 5, define Nombre en clave. En el paso 6, define Asignado desde en method.request.path.proxy.
8. Selecciona Guardar.

Creación de un método GET para que la API recupere una imagen

Sigue estos pasos:

1. En el panel Recursos de la página de la API, selecciona /{object}.
2. En la sección Métodos, elige Crear método.
3. En Tipo de método, selecciona GET.
4. En Tipo de integración, elige Servicio de AWS.
5. En Región de AWS, elige us-east-1 o la región que aparece en la página de propiedades del bucket.
6. En Servicio de AWS, elige Simple Storage Service (S3).
7. Mantén vacío el subdominio de AWS.
8. En Método HTTP, elige GET.
9. En Tipo de acción, elige Usar sustitución de ruta.
10. En Sustitución de ruta, introduce {bucket}/{key}.
11. En Rol de ejecución, introduce el ARN del rol de IAM.
12. Para la Gestión de contenido, elige Transferencia.
13. Selecciona Crear método.

Configuración de las asignaciones de parámetros para el método GET

Sigue estos pasos:

1. En el panel Recursos de la página de la API, selecciona GET.
2. Selecciona Solicitud de integración y, a continuación, selecciona Editar.
3. Amplía Parámetros de ruta URL.
4. Selecciona Agregar parámetros de ruta.
5. En Nombre, introduce bucket.
6. En Asignado desde, escribe method.request.path.folder.
7. Repite los pasos 4 a 6, pero para el paso 5, define Nombre en clave. En el paso 6, define Asignado desde en method.request.path.object.
8. Selecciona Guardar.

Configuración de la asignación de respuestas para ver la imagen o el PDF en un navegador

Sigue estos pasos:

1. En el panel Recursos de la página de la API, selecciona GET.
2. Selecciona Método de respuesta.
3. En **Respuesta 200, ** elige Editar.
4. En Cuerpo de respuesta, elimina application/json.
5. En Nombre del encabezado, selecciona Agregar encabezado.
6. En Nombre, introduce content-type.
7. Selecciona Guardar.
8. Selecciona Respuesta de integración y, a continuación, elige Editar.
9. En Código de estado de respuesta del método 200, introduce image/jpeg para un archivo de imagen o application/pdf para un archivo PDF.
10. Selecciona Guardar.

Configuración de tipos de medios binarios para la API

Sigue estos pasos:

1. En el panel de navegación de la página de la API, selecciona Configuración de API.
2. En la sección Tipos de medios binarios, elige Administrar tipos de medios.
3. Elige Agregar tipo de medio binario y, a continuación, agrega la cadena / en el cuadro de texto.
   Nota: No pongas la cadena entre comillas. Puedes sustituir un comodín por un tipo específico de extensiones de correo de Internet multipropósito (MIME) para administrarlo como un tipo de medio binario. Por ejemplo, para que API Gateway administre las imágenes JPEG como tipos de medios binarios, elige image/jpeg. Si agregas */*, API Gateway administra todos los tipos de medios como tipos de medios binarios.
4. Selecciona Guardar cambios.

Resolución del error CORS con la configuración binaria de la API

Nota: Si usas las API PUT y GET en una aplicación web, es posible que recibas un error de intercambio de recursos entre orígenes (CORS). Para obtener más información, consulta los errores de CORS en el sitio web de Mozilla.

Para resolver el error de CORS con la configuración binaria activada, sigue estos pasos:

1. Abre la consola de API Gateway.
2. Selecciona tu API.
3. En el panel Recursos de la página de la API, selecciona /{object}.
4. Elige Habilitar CORS.
5. En Respuestas de gateway, elige 4xx predeterminado, 5xx predeterminado.
6. En Access-Control-Allow-Methods, elige GET y PUT.
7. Selecciona Guardar.
8. Ejecuta el comando update-integration de la AWS CLI:

   aws apigateway update-integration --rest-api-id API_ID --resource-id RESOURCE_id --http-method OPTIONS --patch-operations op='replace',path='/contentHandling',value='CONVERT_TO_TEXT' --region AWS_REGION

   Nota: Sustituye rest-api-id por tu ID de API de REST, RESOURCE_id por tu ID de recurso y AWS_REGION por tu región.
9. Ejecuta el comando update-integration-response:

   aws apigateway update-integration-response --rest-api-id API_ID --resource-id RESOURCE_id --http-method OPTIONS --status-code 200 --patch-operations op='replace',path='/contentHandling',value='CONVERT_TO_TEXT' --region AWS_REGION

   Nota: Sustituye rest-api-id por tu ID de API de REST, RESOURCE_id por tu ID de recurso y AWS_REGION por tu región. Para que API Gateway ejecute solicitudes de opciones, debes ejecutar los comandos update-integration y update-integration-response uno tras otro.

Implementación de la API

Sigue estos pasos:

1. En el panel de navegación de la página de la API, selecciona Recursos.
2. Elige Desplegar API.
3. En la ventana Desplegar API, para Etapa, elige *New Stage* (Nueva etapa).
4. Para Nombre de etapa, escribe v1.
5. Seleccione Desplegar.
6. En el panel de navegación, selecciona Etapas.
7. Elige la etapa v1.
8. Anota la URL de invocación que aparece.

Para obtener más información, consulta Despliegue de las API de REST en API Gateway.

Invocación de la API de REST para cargar un archivo de imagen en Amazon S3

Sigue estos pasos:

1. Agrega el nombre del bucket y el nombre del archivo del objeto a la URL de invocación de la API.
2. Usa tu cliente preferido para hacer una solicitud HTTP PUT. Por ejemplo, puedes descargar y usar Postman. Para obtener más información, consulta Download Postman (Descargar Postman) en el sitio web de Postman.
3. Elige Cuerpo y, a continuación, elige binario. Cuando aparezca el botón Seleccionar archivo, selecciona un archivo local para cargarlo.

El siguiente es un ejemplo de comando curl que puedes ejecutar para hacer una solicitud PUT HTTP para cargar una imagen o un PDF:

curl -i --location --request PUT 'https://abc12345.execute-api.us-west-2.amazonaws.com/v1/testfolder/testimage.jpeg' --header 'Content-Type: text/plain' --data-binary '@/Path/to/file/image.jpeg'

Nota: Sustituye abc12345 por el ID de la API, testfolder por el bucket de S3 y testimage.jpeg por el archivo local que cargues.

Si has incluido */* en la lista de tipos de medios binarios, puedes realizar una solicitud PUT para cargar el archivo. Si has incluido image.jpeg en la lista de tipos de medios binarios, añade el encabezado Content-Type a la solicitud PUT y configúralo en image/jpeg. Como el navegador web realiza una solicitud GET, puedes ver la imagen o el PDF en un navegador web con la misma URL.

Información relacionada

Habilitar la compatibilidad con datos binarios mediante la API de REST de API Gateway

Habilitar CORS en un recurso mediante la consola de API Gateway