Adicionando um plug-in de serviço de arquivo à sua loja Medusa: um guia essencial

O comércio sem cabeça já existe há muito tempo, sendo a Medusa uma das melhores ferramentas para oferecer componentes modulares. A arquitetura combinável da Medusa permite que você crie uma loja com qualquer estrutura ou linguagem de sua escolha, fornecendo assim uma capacidade de personalização completa. A Medusa também permite que você crie uma experiência única de comércio eletrônico, fornecendo um conjunto de ferramentas e blocos de construção essenciais que os desenvolvedores podem adicionar para criar um poderoso site de comércio eletrônico. Ele oferece recursos prontos para uso, como cliente, produto, remessa, gerenciamento de impostos e região e RMA Flow. No tutorial de hoje, você aprenderá como adicionar um plug-in de serviço de arquivos para poder adicionar produtos à sua loja Medusa por meio do painel de administração

o que é Medusa

Medusa é um conjunto de ferramentas de código aberto que permite criar sites de comércio eletrônico incríveis e confiáveis. Com mais de 17,8 mil estrelas e 1,3 mil forks no GitHub , esta solução de comércio sem cabeça vem com vários módulos de comércio, do básico ao avançado, e está disponível gratuitamente. Sua documentação bem escrita também contribui para seu sucesso, pois há orientações passo a passo sobre como adicionar um módulo ou plugins. Alguns plugins populares, entre outros, são pagamentos, notificações, pesquisa e plugins de serviços de arquivos.

O que é um plug-in de serviço de arquivo

Um plug-in de serviço de arquivo permite hospedar arquivos como imagens usadas no Medusa. Você pode enfrentar problemas se não usar ou configurar um serviço de arquivo para sua loja Medusa corretamente. A Medusa oferece três maneiras diferentes de gerenciar o armazenamento de arquivos; S3, MinIo e Espaços . Este tutorial se concentra exclusivamente no armazenamento de arquivos S3 para armazenar imagens e arquivos carregados no Medusa.

S3 ou Simple Storage Service é um armazenamento de objeto usado para armazenar e recuperar qualquer quantidade de dados de qualquer maneira e a qualquer momento. Usaremos o Amazon S3 para esta demonstração.

Como fazer upload de arquivos em sua loja Medusa

A Amazon mantém os dados como objetos dentro de um balde. Um objeto consiste em um arquivo e dados opcionais que o descrevem. Para armazenar um arquivo, você precisa carregá-lo em um balde (Baldes são os recipientes para objetos), uma vez carregado, você pode definir permissões no objeto .

Agora vamos fazer upload de arquivos em seus projetos Medusa rapidamente.

Pré-requisitos

• Uma loja Medusa . Um projeto Medusa é basicamente dividido em três componentes; uma vitrine, um painel de administração e um Medusa Backend
• Uma conta da AWS

Se você tiver tudo configurado, siga as etapas abaixo para adicionar um plug-in de serviço de arquivo à sua loja Medusa.

Etapa 1: criar um balde S3

Faça login na sua conta da AWS, pesquise e selecione S3

Na próxima página, clique em Criar balde

Na janela que se abre, forneça as informações necessárias para criar seu bucket.

Configuração Geral

Forneça um nome para seu bucket e deixe a região padrão ou escolha outra de acordo com seus requisitos.

Propriedade do objeto

Para propriedade, permita que os objetos no bucket sejam propriedade de sua conta.

Nas configurações de Bloquear acesso público, desmarque Bloquear todo acesso público. Ao fazer isso, uma mensagem de aviso será exibida, marque a caixa na mensagem, como na imagem.

Quanto ao controle de versão do bucket, tags, criptografia padrão e configurações avançadas, deixe as configurações padrão ou altere-as de acordo com os requisitos do seu projeto e clique em Create bucket .

Etapa 2: gerenciar políticas

A próxima etapa consiste em gerenciar suas políticas de bucket criadas. Vá para a página do seu balde e abra a guia de permissão. Em seguida, role para baixo até a seção de política de balde, clique em editar, adicione o código abaixo e salve.

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

Substitua <YOUR_BUCKET_NAME> pelo nome do seu intervalo. Aqui é medusastorebucket

Etapa 3: anexar uma política

Em sua conta, navegue até IAM e selecione Gerenciamento de acesso->Políticas no menu à esquerda.

Se esta for a primeira vez que você escolhe uma política, você verá uma página Bem-vindo à página Gerenciar políticas e selecione começar, caso contrário, escolha Criar política.

Em seguida, selecione a guia JSON e adicione o seguinte código:

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

Substitua a action-statement e resource-statement de acordo com sua necessidade e clique em Next:tag

Saiba mais sobre políticas e permissões

As tags são opcionais, então você pode pular esta etapa e clicar no botão de revisão para revisar sua política.

Em seguida, forneça um nome e uma descrição para sua política e clique em Criar política

Agora que você criou sua política, você precisa anexá-la a um grupo de usuários, navegar até o console da Amazon e escolher Grupos de usuários . Selecione o nome do grupo e abra a guia Permissão

Escolha Adicionar permissão e, em seguida , anexe políticas

Na janela que se abre, selecione a política que deseja anexar e clique em adicionar permissão na parte inferior da página.

Etapa 4: obtenha sua chave de acesso

Você precisa obter sua chave de acesso para integrar o Plugin S3 em seu projeto. Você precisará de dois elementos; Access Key ID e Secret Access Key .

Para obter o ID da chave de acesso da AWS e a chave de acesso secreta, acesse o console da Amazon na navegação à esquerda e escolha Usuários.

Escolha seu nome de usuário IAM e abra a guia Credenciais de segurança

Role para baixo até Chaves de acesso e clique em Criar chave de acesso

Na próxima janela, você será solicitado a escolher onde deseja usar a chave de acesso. Marque Código local se estiver trabalhando em um ambiente de desenvolvimento local.

Ao escolher local aparecerá uma mensagem de aviso perguntando se você entendeu a recomendação. Marque a caixa e clique no próximo botão.

Finalmente, adicione uma descrição de tag se você quiser adicionar uma e clique em Criar chave de acesso

Na próxima janela, você verá sua chave de acesso e acesso secreto. Por favor, copie e cole em algum lugar do seu PC, pois você o usará na próxima etapa ou baixe o arquivo CSV.

Etapa 5: instalar o plug-in S3

Agora que você configurou seu bucket e criou suas chaves de acesso, é hora de instalar o plug-in S3. Para fazer isso, vá para a pasta de back-end da Medusa e instale-a com o seguinte comando:

 yarn add medusa-file-s3

Ou

 npm install medusa-file-s3

Em seguida, abra seu arquivo .env e adicione o seguinte

 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>

Onde

• <YOUR_BUCKET_URL> é a URL do seu bucket. Ele está no formato https://<BUCKET_NAME>.s3.<REGION>.amazonaws.com . Onde <BUCKET_NAME> é o nome do seu bucket, <REGION> a região.
• <YOUR_BUCKET_NAME> é o nome do bucket criado
• <YOUR_BUCKET_REGION> a região do seu bucket
• <YOUR_ACCESS_KEY_ID> é sua chave de acesso
• <YOUR_SECRET_ACCESS_KEY> é sua chave secreta

Por fim, em seu medusa-config.js adicione o seguinte 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, }, }, ]

Observe que se você tiver muitos plug-ins de armazenamento configurados, o último plug-in declarado será usado. Portanto, se você deseja que o S3 seja usado, certifique-se de que seja o último plug-in de armazenamento adicionado.

Passo 6: Testando o Plugin

Agora que você adicionou seu plugin com sucesso. É hora de testar para ter certeza de que tudo está no lugar certo. Você pode usar APIs REST ou o Medusa Admin para testar.

Navegue até as pastas admin e back-end, respectivamente, e execute o seguinte comando:

 // admin yarn run start

 // backend yarn run start

O e-mail e a senha padrão do administrador são admin@medusa-test.com e supersecret , respectivamente. Abra seu painel de administração com http://localhost:7000/

No menu, clique em Produtos e em Adicionar Produto . Forneça detalhes do seu produto e publique-o.

Por fim, você precisa adicionar uma configuração em sua vitrine que inclua o nome de domínio do bucket S3 nos nomes de domínio das imagens configuradas se estiver usando a vitrine NextJS . Se você não fizer isso, receberá o seguinte erro next/image Un-configured Host .

Portanto, em seu next.config.js adicione o seguinte:

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

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

<BUCKET_NAME> representa o nome do seu intervalo.

Execute sua vitrine com yarn run dev para verificar se os novos produtos que você adicionou estão lá e prossiga para a próxima fase do seu projeto.

Conclusão

Isso marca o fim deste tutorial, esperamos que você tenha conseguido adicionar um plug-in de serviço de arquivo à sua loja Medusa. Para obter o melhor da ferramenta, considere adicionar serviços de pagamento, pesquisa e notificações.