Upload de foto para Amazon S3 utilizando AWS SDK for JavaScript v3
A maioria dos tutoriais que encontrei pela internet focam na utilização da AWS SDK for JavaScript em sua versão 2. Mas com uma nova versão dessa SDK, obviamente existem vantagens em utilizar sua versão atualizada, como por exemplo: códigos mais limpos, uma execução mais segura e com melhor desempenho.
Cenário
Ao desenvolver uma aplicação, me deparei com a seguinte necessidade: Realizar o upload de uma imagem para um Bucket S3 a partir da URL de uma imagem.
Arquitetura da aplicação
Front-end
O front-end da aplicação foi desenvolvida utilizando o framework Next.js e é servido através de uma URL.
Back-end
O back-end possuí uma API também desenvolvida sob o framework Next.js e servida em uma URL diferente do front-end.
Lembrando que o Next.js fornece a possibilidade de construção do front-end e da API dentro da mesma aplicação, porém, optei pela separação desses serviços.
Um pouco de código no front-end
Esta função obtem uma imagem a partir de uma URL, convertendo-a para o formato do tipo "file" e enviando essas informações através de um "FormData" para a API.
Analisando o back-end
Nesta etapa, vamos precisar do AWS SDK S3 Client e do Multiparty.
AWS SDK S3 Client
Este cliente nos fornece as classes para manipularmos corretamente todos os eventos referentes a comunicação com o serviço Amazon S3.
Requisitos
Como vamos trabalhar com a AWS SDK, necessitamos do correto nível de acesso e as informações que nos garantem a devida comunicação com os serviços da AWS. Essas informações devem estar definidas como variáveis de ambiente:
A AWS SDK em sua versão 3 vai reconhecer automaticamente as variáveis de ambiente definidas nesse padrão. "Cuidado para não trocar seus nomes."
Instalação
Para instalar esse pacote, simplesmente execute "add" ou "install @aws-sdk/client-s3" utilizando seu gerenciador de pacotes favorito:
npm install @aws-sdk/client-s3yarn add @aws-sdk/client-s3pnpm add @aws-sdk/client-s3
Multiparty
O Multiparty analisa todas as solicitações "http", incluindo as que possuem "multipart/form-data" e basicamente as converte em um formato que podemos manipular com facilidade.
Instalação
Para instalar esse pacote, simplesmente execute:
npm install multiparty
Mais um pouco de código
Esta função é executada em um end-point da nossa API, que recebe os dados do "FormData" e os converte para um padrão simples de manipular.
Algo muito importante nesse código é a definição que desabilita o "bodyParser" por parte da API. Visualizar a linha 69.
Referências
Acredite, sem essas referências, seria impossível a correta elaboração destes scripts.
- Documentação oficial da AWS
- Exemplo de script no repositório oficial de exemplos da AWS no GitHub
- Uma issue aberta no GitHub onde o usuário mikaelfs, encontra uma solução para o tratamento do arquivo e obtenção do stream utilizando a função "fs" do Node. Link para a issue: GitHub.
- Um post que me auxiliou na construção correta da função. Muita qualidade de código aqui!
Obviamente os serviços da AWS merecem uma abordagem mais técnica e teórica para seu devido entendimento. Aqui apenas abordei como os scripts irão funcionar, tome o devido cuidado ao possibilitar acesso público aos seus Buckets.
