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

Descripción breve

Para subir una imagen o un PDF como archivo binario a un bucket de Amazon S3 a través de API Gateway, active la compatibilidad con archivos binarios.

Para conceder a su API acceso a su bucket de S3, cree un rol de AWS Identity and Access Management (IAM). La función de IAM debe incluir permisos para que API Gateway realice las acciones PutObject y GetObject en su bucket de S3.

Resolución

Crear un rol de IAM para API Gateway

1.    Abra la consola de IAM.

2.    En el panel de navegación, seleccione Roles.

3.    Elija Crear rol.

4.    En la sección Seleccione el tipo de entidad de confianza, elija el servicio de AWS.

5.    En la sección Elija un caso de uso, elija API Gateway.

6.    En la sección Seleccione su caso de uso,elija API Gateway.

7.    Elija Siguiente: Permisos.
Nota: En esta sección se muestra el servicio administrado de AWS que permite a API Gateway enviar registros a la cuenta de un usuario. Añada permisos para Amazon S3 más adelante.

8.    (Opcional) Elija Siguiente: Etiquetas para añadir etiquetas.

9.    Elija Siguiente: Revisar.

10.    En Nombre de función, introduzca un nombre para su política. Por ejemplo: api-gateway-upload-to-s3.

11.    Elija Crear rol.

Cree y adjunte una política de IAM a la función API Gateway

1.    Abra la consola de IAM.

2.    En el panel de navegación, seleccione Roles.

3.    En el cuadro de búsqueda, introduzca el nombre del nuevo rol de API Gateway que creó. A continuación, elija esa función en la columna Nombre de función.

4.    En la pestaña de detalles de las funciones,seleccione Agregar permisos.

5.    Elija Crear política en línea.

6.    En la pestaña Editor visual,en la sección Seleccione un servicio,elija Elegir un servicio.

7.    Introduzca S3 y, a continuación, elija S3.

8.    En el cuadro Especifique las acciones permitidas en S3, escriba PutObject y, a continuación, elija PutObject.

9.    Escriba GetObject y, a continuación, elija GetObject.

10.    Amplíe Recursos y, a continuación, seleccione Específico.

11.    Elija Agregar ARN.

12.    En Nombre del bucket, introduzca el nombre del bucket. Incluya el prefijo, si corresponde.

13.    En Nombre de objeto, introduzca 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, consulte las reglas de nomenclatura de buckets y la descripción general de los objetos de Amazon S3.

14.    Seleccione Añadir.

15.    (Opcional) Elija Siguiente: Etiquetas para añadir etiquetas.

16.    Elija Siguiente: Revisar.

17.    En Nombre, introduzca el nombre de su política.

18.    Elija Crear política.

19.    En el cuadro de búsqueda de políticas, introduzca el nombre de la política que creó en el paso 17 y, a continuación, selecciónela.

20.    Elija acciones de políticas y, a continuación, elija Adjuntar. Aparece una lista de funciones de IAM.

21.    Busque la función API Gateway que creó anteriormente. A continuación, seleccione la función.

22.    Elija Adjuntar política.

Crear una API REST de API Gateway

Crea una API para atender sus solicitudes

1.    Abra la consola de API Gateway.

2.    En el panel de navegación, seleccione API.

3.    Elija Crear API.

4.    En la sección Elegir un tipo de API,para API REST, elija Crear.

5.    En Nombre de API, introduzca un nombre para su API y, a continuación, seleccione Siguiente.

6.    Elija Crear API.

Cree recursos para su API

1.    En el panel Recursos de la página de la API, seleccione**/**.

2.    En Acciones, elija Crear recurso.

3.    En Nombre del recurso, introduzca carpeta.

4.    En Ruta de recursos, escriba {folder}.

5.    Elija Crear recurso compartido.

6.    En el panel Recursos,seleccione el recurso**/{folder}** que creó en el paso 5.

7.    Elija Acciones y, a continuación, elija Crear recurso.

8.    En Nombre del recurso, introduzca objeto.

9.    En Ruta de recursos, escriba {object}.

10.    Elija Crear recurso compartido.

Cree un método PUT para su API para subir imágenes o PDF

1.    Elija Acciones y, a continuación, elija Crear método.

2.    En la lista desplegable, seleccione PUT y, a continuación, seleccione el icono de marca de verificación.

3.    En la categoría Tipo de integración,elija AWS Service.

4.    Para la región de AWS, elija us-east-1 o la región de AWS que aparece en la página de propiedades del bucket.

5.    Para AWS Service, elija Simple Storage Service (S3).

6.    Mantenga vacío el subdominio de AWS.

7.    Para el método HTTP, elija PUT.

8.    En Tipo de acción, elija Usar anulación de ruta.

9.    Para anular la ruta (opcional), introduzca {bucket}/{key}.

10.    Para la función de ejecución, introduzca el ARN de la función de IAM que creó anteriormente. La creación de ARN forma parte de la sección Crear y adjuntar una política de IAM a las funciones de API Gateway.

11.    Para la Gestión de contenido, elija Passthrough.

12.    Seleccione Guardar.

Configurar los mapeos de parámetros para el método PUT

1.    En el panel Recursos de la página de la API, seleccione PUT.

2.    Elija Solicitud de integración.

3.    Amplíe los parámetros de la ruta URL.

4.    Elija Añadir ruta.

5.    En Nombre, introduzca bucket.

6.    Para Mapeado desde, escriba method.request.path.folder.

7.    Seleccione el icono de marca de verificación al final de la fila.

8.    Repita los pasos del 4 al 7. En el paso 5, defina Nombre como clave. En el paso 6, defina Mapeado desde en method.request.path.object.

Cree un método GET para su API para recuperar una imagen

1.    En el panel Recursos de la página de la API, seleccione /{object}.

2.    Elija Acciones y, a continuación, elija Crear método.

3.    En la lista desplegable, seleccione GET y, a continuación, seleccione el icono de marca de verificación.

4.    En la categoría Tipo de integración,elija AWS Service.

5.    Para la región de AWS, elija us-east-1 o la región que aparece en la página de propiedades del bucket.

6.    Para AWS Service, elija Simple Storage Service (S3).

7.    Mantenga vacío el subdominio de AWS.

8.    Para el método HTTP, elija GET.

9.    En Tipo de acción, elija Usar anulación de ruta.

10.    Para anular la ruta (opcional), introduzca {bucket}/{key}.

11.    Para la función de ejecución, introduzca el ARN de la función de IAM que creó anteriormente. La creación de ARN forma parte de la sección Crear y adjuntar una política de IAM a las funciones de API Gateway.

12.    Para la Gestión de contenido, elija Passthrough.

13.    Seleccione Guardar.

Configure los mapeos de parámetros para el método GET

1.    En el panel Recursos de la página de la API, seleccione GET.

2.    Elija Solicitud de integración.

3.    Amplíe los parámetros de la ruta URL.

4.    Elija Añadir ruta.

5.    En Nombre, introduzca bucket.

6.    Para Mapeado desde, escriba method.request.path.folder.

7.    Seleccione el icono de marca de verificación al final de la fila.

8.    Repita los pasos del 4 al 7. En el paso 5, defina Nombre como clave. En el paso 6, defina Mapeado desde en method.request.path.object.

Configure el mapeo de respuestas para ver la imagen o el PDF en el navegador

1.    En el panel Recursos de la página de la API, seleccione GET.

2.    Elija el método de respuesta.

3.    Expanda 200.

4.    En Cuerpo de respuesta para 200, elimine application/json.

5.    En Encabezados de respuesta para 200, seleccione Agregar encabezado.

6.    En Nombre, introduzca content-type.

7.    Seleccione el icono de marca de verificación para guardar.

8.    Seleccione Ejecución de métodos para volver al panel Ejecución de métodos.

9.    Elija Respuesta de integración.

10.    Expanda 200, y, a continuación, expanda Header Mappings.

11.    Elija el icono del lápiz al final de la fila denominado content-type.

12.    Introduzca 'image/jpeg' para ver un archivo de imagen.
-o-
Introduzca 'application/pdf' para ver un archivo PDF.

Configure tipos de medios binarios para la API

1.    En el panel de navegación de la página de la API, seleccione Configuración.

2.    En la sección Tipos de medios binarios, elija Agregar tipo de medio binario.

3.    En el cuadro de texto, añada la siguiente cadena:*/*
Nota: No ponga la cadena entre comillas. Puede sustituir un tipo concreto de extensiones de correo de Internet multipropósito (MIME) por un comodín que desee tratar como un tipo de medio binario. Por ejemplo, para que API Gateway trate las imágenes JPEG como tipos de medios binarios, elija 'image/jpeg'. Si agrega */*, API Gateway trata todos los tipos de medios como tipos de medios binarios.

4.    Elija Guardar cambios.

Resuelva el error CORS con la configuración binaria de la API

1.    Si utiliza las API mencionadas anteriormente (PUT y GET) en una aplicación web, es posible que encuentre un error CORS. Para obtener más información, consulte los errores de CORS en el sitio web de Mozilla.

2.    Para resolver el error CORS con la configuración binaria activada, inicie CORS desde la consola de API Gateway.

3.    En el panel Recursos de la página de la API, seleccione /{object}.

4.    En Acciones, elija Habilitar CORS.

5.    Elija Habilitar CORS y sustituya los encabezados CORS existentes.

6.    Para actualizar la propiedad de gestión de contenido, ejecute el comando de CLI update-integration. Esta actualización permite que el contenido binario gestione las solicitudes de opciones previas al vuelo con una integración simulada.

7.    Actualice el ID de API, el ID de recurso y la región de AWS para ejecutar los dos comandos de CLI siguientes. Para obtener el ID de API y el ID de recurso, seleccione el recurso {object} en la parte superior de la consola de API Gateway.

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

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

Despliegue su API

1.    En el panel de navegación de la página de la API, seleccione Recursos.

2.    En el panel Recursos, elija Acciones y, a continuación, elija Desplegar API.

3.    En la ventana Desplegar API, para Fase de despliegue, elija**\New Stage]**.

4.    Para Nombre de etapa, escriba v1.

5.    Elija Desplegar.

6.    En el panel de navegación, seleccione Stages.

7.    Elija la etapa v1. Aparece la URL de invocación para realizar solicitudes a la instantánea de la API implementada.

8.    Copie la URL de invocación.

Nota: Para obtener más información, consulte Desplegar una API REST en Amazon API Gateway.

Invoque a su API para subir un archivo de imagen a S3

Añada el nombre del bucket y el nombre del archivo del objeto a la URL de invocación de su API. A continuación, realice una solicitud PUT HTTP con un cliente de su elección. Por ejemplo, con la aplicación externa Postman, elija el método PUT en el menú desplegable. Elija Cuerpo y, a continuación, elija binario. Cuando aparezca el botón Seleccionar archivo, seleccione un archivo local para cargarlo.

Para obtener más información, consulte Invocar una API REST en Amazon API Gateway.

Ejemplo de comando curl para realizar una solicitud PUT HTTP para cargar una imagen o un PDF

En el siguiente ejemplo, abc12345 es su ID de API, testfolder es su bucket de S3 y testimage.jpeg es el archivo local que sube:

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'

Importante: Si***/*** está incluido en la lista de tipos de medios binarios, puede realizar una solicitud PUT para cargar el archivo. Si image.jpeg está incluido en la lista de tipos de medios binarios, debe añadir el encabezado Content-Type a su solicitud PUT. Debe configurar el encabezado Content-Type en 'image/jpeg'.

Ahora verá la imagen o el PDF en un navegador web con la misma URL. Esto se debe a que el navegador web realiza una solicitud GET.

Información relacionada

Activación del soporte binario mediante la API REST de API Gateway