Agregar un complemento de servicio de archivos a su tienda Medusa: una guía esencial

El comercio sin cabeza ha existido durante mucho tiempo y Medusa es una de las mejores herramientas para ofrecer componentes modulares. La arquitectura componible de Medusa le permite crear una tienda con cualquier marco o idioma de su elección, lo que proporciona una capacidad de personalización completa. Medusa también le permite crear una experiencia de comercio electrónico única al proporcionar un conjunto de herramientas y componentes esenciales que los desarrolladores pueden agregar para crear un poderoso sitio web de comercio electrónico. Ofrece funciones listas para usar, como gestión de clientes, productos, envíos, impuestos y regiones, y RMA Flow. En el tutorial de hoy, aprenderá cómo agregar un complemento de servicio de archivos para poder agregar productos a su tienda Medusa a través del panel de administración.

que es medusa

Medusa es un conjunto de herramientas de código abierto que le permite crear sitios web de comercio electrónico sorprendentes y confiables. Con más de 17,800 estrellas y 1,300 bifurcaciones en GitHub , esta solución de comercio sin cabeza viene con un puñado de módulos de comercio, desde básico hasta avanzado, y está disponible gratuitamente. Su documentación bien escrita también contribuye a su éxito, ya que hay pautas paso a paso sobre cómo agregar un módulo o complementos. Algunos complementos populares, entre otros, son complementos de pagos, notificaciones, búsqueda y servicio de archivos.

¿Qué es un complemento de servicio de archivos?

Un complemento de servicio de archivos le permite alojar archivos como imágenes utilizadas en Medusa. Es posible que tenga problemas si no usa o configura correctamente un servicio de archivos para su tienda Medusa. Medusa ofrece tres formas diferentes de administrar el almacenamiento de archivos; S3, MinIo y Espacios . Este tutorial se centra únicamente en el almacenamiento de archivos S3 para almacenar imágenes y archivos cargados en Medusa.

S3 o Simple Storage Service es un almacenamiento de objetos que se utiliza para almacenar y recuperar cualquier cantidad de datos de cualquier forma y en cualquier momento. Usaremos Amazon S3 para esta demostración.

Cómo subir archivos a tu tienda Medusa

Amazon guarda los datos como objetos dentro de un cubo. Un objeto consiste en un archivo y datos opcionales que lo describen. Para almacenar un archivo, debe cargarlo en un cubo (los cubos son los contenedores de los objetos), una vez cargado, puede establecer permisos en el objeto .

Ahora vamos a hacer que cargue archivos en sus proyectos de Medusa rápidamente.

requisitos previos

• Una tienda Medusa . Un proyecto Medusa se divide básicamente en tres componentes; un escaparate, un panel de administración y un backend de Medusa
• Una cuenta de AWS

Si tiene todo configurado, siga los pasos a continuación para agregar un complemento de servicio de archivos a su tienda Medusa.

Paso 1: Cree un depósito S3

Inicie sesión en su cuenta de AWS, busque y seleccione S3

En la página siguiente, haga clic en Crear depósito

En la ventana que se abre, proporcione la información necesaria para crear su cubo.

Configuración general

Proporcione un nombre a su depósito y deje la región predeterminada o elija otra según sus requisitos.

propiedad del objeto

Para la propiedad, permita que los objetos en el cubo sean propiedad de su cuenta.

En la configuración de Bloquear acceso público, desmarque Bloquear todo el acceso público. Al hacer esto, aparecerá un mensaje de advertencia, marque la casilla en el mensaje como en la imagen.

En cuanto al control de versiones del depósito, las etiquetas, el cifrado predeterminado y la configuración avanzada, deje la configuración predeterminada o cámbiela según los requisitos de su proyecto y haga clic en Crear depósito .

Paso 2: Administrar políticas

El siguiente paso consiste en administrar las políticas de depósito creadas. Dirígete a la página de tu depósito y abre la pestaña de permisos. Luego, desplácese hacia abajo hasta la sección de políticas del depósito, haga clic en editar, agregue el código a continuación y guarde.

 { "Version": "2012-10-17", "Id": "Policy1397632521960", "Statement": [ { "Sid": "Stmt1397633323327", "Effect": "Allow", "Principal": { "AWS": "*" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/*" } ] }

Reemplace <YOUR_BUCKET_NAME> con el nombre de su depósito. Aquí está medusastorebucket

Paso 3: adjunte una política

En su cuenta, vaya a IAM y seleccione Gestión de acceso->Políticas en el menú de la izquierda.

Si es la primera vez que elige una política, verá una página de bienvenida a la administración de políticas y seleccione comenzar; de lo contrario, elija Crear política.

Luego seleccione la pestaña JSON y agregue el siguiente código:

 { "Version": "2012-10-17", "Statement" : [ { "Effect" : "Allow", "Action" : [ "action-statement" ], "Resource" : [ "resource-statement" ] }, { "Effect" : "Allow", "Action" : [ "action-statement" ], "Resource" : [ "resource-statement" ] } ] }

Sustituya la action-statement y resource-statement según sus requisitos y haga clic en Next:tag

Más información sobre políticas y permisos

Las etiquetas son opcionales, por lo que puede omitir este paso y hacer clic en el botón de revisión para revisar su política.

A continuación, proporcione un nombre y una descripción para su política y luego haga clic en Crear política

Ahora que ha creado su política, debe adjuntarla a un grupo de usuarios, navegar a la consola de Amazon y elegir Grupos de usuarios . Seleccione el nombre del grupo y luego abra la pestaña Permiso

Elija Agregar permiso y luego adjunte políticas

En la ventana que se abre, seleccione la política que desea adjuntar y haga clic en Agregar permiso en la parte inferior de la página.

Paso 4: obtenga su clave de acceso

Debe obtener su clave de acceso para integrar el complemento S3 en su proyecto. Necesitarás dos elementos; Access Key ID y Secret Access Key .

Para obtener su ID de clave de acceso de AWS y su clave de acceso secreta, diríjase a su consola de Amazon en la navegación de la izquierda y elija Usuarios.

Elija su nombre de usuario de IAM y abra la pestaña Credenciales de seguridad

Desplácese hacia abajo hasta Claves de acceso y haga clic en Crear clave de acceso

En la siguiente ventana, se le pedirá que elija dónde desea usar la clave de acceso. Marque Código local si está trabajando en un entorno de desarrollo local.

Al elegir local aparecerá un mensaje de advertencia preguntándote si entiendes la recomendación. Marque la casilla y haga clic en el siguiente botón.

Finalmente, agregue una descripción de etiqueta si desea agregar una y haga clic en Crear clave de acceso

En la siguiente ventana, verá su clave de acceso y acceso secreto. Cópielo y péguelo en algún lugar de su PC, ya que lo usará en el siguiente paso o descargará el archivo CSV.

Paso 5: Instale el complemento S3

Ahora que configuró su depósito y creó sus claves de acceso, es hora de instalar el complemento S3. Para hacerlo, diríjase a la carpeta backend de Medusa e instálela con el siguiente comando:

 yarn add medusa-file-s3

O

 npm install medusa-file-s3

Luego abra su archivo .env y agregue lo siguiente

 S3_URL=<YOUR_BUCKET_URL> S3_BUCKET=<YOUR_BUCKET_NAME> S3_REGION=<YOUR_BUCKET_REGION> S3_ACCESS_KEY_ID=<YOUR_ACCESS_KEY_ID> S3_SECRET_ACCESS_KEY=<YOUR_SECRET_ACCESS_KEY>

Dónde

• <YOUR_BUCKET_URL> es la URL de su depósito. Tiene el formato https://<BUCKET_NAME>.s3.<REGION>.amazonaws.com . Donde <BUCKET_NAME> es el nombre de su depósito, <REGION> la región.
• <YOUR_BUCKET_NAME> es el nombre del depósito creado
• <YOUR_BUCKET_REGION> la región de su depósito
• <YOUR_ACCESS_KEY_ID> es su clave de acceso
• <YOUR_SECRET_ACCESS_KEY> es su clave secreta

Finalmente, en su medusa-config.js agregue el siguiente código:

 const plugins = [ // ... { resolve: `medusa-file-s3`, options: { s3_url: process.env.S3_URL, bucket: process.env.S3_BUCKET, region: process.env.S3_REGION, access_key_id: process.env.S3_ACCESS_KEY_ID, secret_access_key: process.env.S3_SECRET_ACCESS_KEY, }, }, ]

Tenga en cuenta que si tiene muchos complementos de almacenamiento configurados, se utilizará el último complemento declarado. Entonces, si desea que se use S3, asegúrese de que sea el último complemento de almacenamiento agregado.

Paso 6: Prueba del complemento

Ahora que ha agregado con éxito su complemento. Es hora de probar para asegurarse de que todo está en el lugar correcto. Puede usar las API REST o Medusa Admin para probar.

Navegue a sus carpetas de administrador y back-end respectivamente y ejecute el siguiente comando:

 // admin yarn run start

 // backend yarn run start

El correo electrónico y la contraseña de administrador predeterminados son [email protected] y supersecret respectivamente. Abra su panel de administración con http://localhost:7000/

En el menú, haga clic en Productos y luego en Añadir producto . Proporcione detalles para su producto y publíquelo.

Por último, debe agregar una configuración en su tienda que agregue el nombre de dominio del depósito S3 a los nombres de dominio de las imágenes configuradas si está utilizando la tienda NextJS . Si no lo hace, recibirá el siguiente error next/image Host no configurado .

Entonces, en su next.config.js agregue lo siguiente:

 const { withStoreConfig } = require("./store-config")

 // ...module.exports = withStoreConfig({ // ... images: { domains: [ // ... "<BUCKET_NAME>.s3.amazonaws.com", ], }, })

<BUCKET_NAME> representa el nombre de su depósito.

Ejecute su escaparate con yarn run dev para verificar si los nuevos productos que agregó están allí y continúe con la siguiente fase de su proyecto.

Conclusión

Esto marca el final de este tutorial, con suerte, pudo agregar un complemento de servicio de archivos a su tienda Medusa. Para obtener lo mejor de la herramienta, considere agregar servicios de pago, servicios de búsqueda y notificaciones.