Cómo configurar la carga de imágenes simple con Node y AWS S3

Una guía paso a paso que explica cómo cargar una imagen o cualquier archivo en el servicio Amazon S3.

Esta es la primera parte de un tutorial en el que manejaremos la parte del código del servidor (Node.js).

También preparé un video tutorial en YouTube. Puede encontrar un enlace en los recursos al final de este artículo.

1. Qué necesitamos instalar y una breve descripción.

multer: middleware para manejar archivos de datos. Se utiliza principalmente para cargar archivos. Más información: Npm Link

multer-s3: extensión multer para una fácil carga de archivos en el servicio Amazon S3. Más información: Npm Link

aws-sdk: paquete necesario para trabajar con AWS (Amazon Web Services). En nuestro caso el servicio S3. Más información: Npm Link

Vaya a sus proyectos e instalemos paquetes:

npm install —-save multer multer-s3 aws-sdk

2. Regístrese en AWS

Primero, creemos una cuenta en //aws.amazon.com. Amazon ofrece un increíble nivel gratuito que puede usar durante el primer año. Después de iniciar sesión, busque el servicio S3.

En pocas palabras, S3 es un servicio en la nube para almacenar archivos.

Necesitamos crear un Bucket . Puedes imaginar un cubo como una carpeta para tus archivos. Elija un nombre de depósito y la región . Dado que esta es una configuración simple, no estamos interesados ​​en otras configuraciones. (La configuración predeterminada está bien; si algo no está claro, pregunte en los comentarios). Haga clic en " siguiente " hasta que esté en Revisión y cree su depósito.

Navegue a su depósito creado y verifique su barra de URL . Recuerde su nombre de depósito (para mí, "prueba media") y la región (para mí, "us-east").

Ahora, necesitamos obtener nuestras credenciales seguras . Navegue a través del nombre de su cuenta hasta " mis credenciales de seguridad ". Luego, " Claves de acceso " y Crear nueva clave de acceso .

¡Nunca comparta sus llaves con nadie! Guarde temporalmente estas claves en algún archivo o descargue el archivo de claves, porque necesitamos claves para configurar la carga de un archivo.

Todo bien. ¡Configuración de Amazon lista!

3. Vaya a su editor de codificación

No explicaré los conceptos básicos de Node o Express aquí. Este tutorial se centra únicamente en la carga de archivos. Si está interesado en la implementación completa del proyecto, consulte mi repositorio de GitHub o vea el tutorial completo. (Puede encontrar enlaces al final de esta publicación de blog).

  1. Cree su servicio de carga de archivos con la siguiente implementación (primera parte):

Nota importante: ¡ Nunca exponga sus credenciales secretas directamente en un archivo! ¡Nunca comparta sus credenciales secretas! Considere configurar variables de entorno en su entorno local o, en el caso de proyectos implementados, variables en su proveedor de nube. La mejor solución sería utilizar aws-profiles : //docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/loading-node-credentials-shared.html.

Primero, estamos importando todos nuestros paquetes instalados. La segunda parte es configurar nuestro AWS . Necesitamos proporcionar nuestras claves secretas y la región de la barra de URL que les mostré antes.

Después de la configuración de AWS, podemos crear una instancia de nuestro Amazon S3. Todavía no hemos terminado. Ahora, veamos la segunda parte de esta implementación.

Ahora, podemos configurar una solución para una carga múltiple. Necesitamos proporcionar una función al objeto multer con las siguientes propiedades.

  1. s3 : instancia de Amazon S3 que creamos antes.
  2. depósito : nombre de nuestro depósito (en mi caso: "prueba media")
  3. acl : control de acceso para el archivo ('lectura pública' significa que cualquiera puede ver los archivos), puede verificar todos los tipos disponibles aquí: enlace de amazon
  4. metada : función de devolución de llamada para establecer metadatos de archivos cargados. Aquí, estoy configurando metadatos adicionales para un fieldName . Puede ver estos datos en la imagen a continuación.

5. clave: función de devolución de llamada para establecer la propiedad de la clave (bajo qué clave se guardará su archivo en su depósito). En nuestro caso, estamos creando una marca de tiempo de una hora actual y guardando este archivo con este nombre. De esta manera, nuestro nombre de archivo siempre será único, pero puede elegir el nombre que desee.

Después de toda la configuración, estamos exportando el objeto de carga para usarlo en otros archivos.

4. Configura una ruta para cargar la imagen

Casi hemos terminado, pero los usuarios de nuestra aplicación aún no tienen acceso a la carga de imágenes. Necesitamos exponerles esta funcionalidad. Creemos un punto final para guardar un archivo.

Estamos exportando nuestro objeto de carga que hemos creado antes y creando uno nuevo a partir de él. El nuevo es más específico con configuración adicional para la carga de una sola imagen . Le estamos proporcionando un valor de " imagen ". Este valor es muy importante, porque enviaremos nuestro archivo a un servidor con esta clave.

La segunda parte es la ruta misma. POST punto final a ' / image-upload '. En el interior lo llamamos singleUpload . No olvide pasar dentro de req y res, porque multer obtendrá el archivo que estamos enviando al servidor desde el objeto req.

Estamos buscando un error. Si no hay ninguno, estamos enviando JSON con el valor de la ubicación de nuestro archivo, que es solo una URL del archivo en Amazon .

¡Aaaa y eso es todo! Podemos subir archivos a Amazon S3 ahora. Bastante simple, ¿qué te parece?

5. Probémoslo en Postman.

Para ver los resultados de nuestro arduo trabajo, necesitamos enviar una solicitud al servidor con una imagen que queremos subir. En esta parte lo probaremos a través de Postman. En la siguiente parte del tutorial, crearemos una implementación en una aplicación Angular.

Si no tiene Postman, simplemente puede descargarlo como una extensión de Google Chrome. Simplemente busque ' postman google chrome extension '. Postman es una aplicación para inicializar, enviar y probar solicitudes al servidor de una manera sencilla.

  1. Envíe una solicitud de publicación a un punto final que creamos antes. En mi caso, lo especifiqué en la ruta del nodo de / image-upload .
  2. Seleccione Cuerpo de datos de formulario .
  3. Proporcione la clave de una imagen. Notarás que esta es una clave que configuramos antes en nuestro código. Verifique un archivo y elija algún archivo de su computadora.
  4. Envíe la solicitud .

Debería recuperar JSON con la URL de su archivo cargado.

¡Voilà! Eso es todo chicos. Esta es una carga de archivo simple para Node. En el próximo artículo, continuaré con una implementación de frontend para Angular.

Si te gusta este tutorial, no dudes en consultar mi curso completo en Udemy: la guía completa de ángulos, reacciones y nodos | Aplicación estilo Airbnb.

Video conferencia: video de Youtube

Proyecto completado: Mi repositorio de github

Salud,

Filip