Upload de arquivo para um bucket na Amazon S3 utilizando AWS SDK for JavaScript v3 no Next.js
No tutorial anterior já abordei como se trabalhar com a SDK for JavaScript v3 da AWS. Porém, nesse tutorial, abordei uma forma comum de se fazer um Upload, que é a partir de um "FormData". Neste tutorial, quero abordar uma forma diferente, que é através da função "getStaticProps" do Next.js que é executada diretamente no servidor e não no front-end da aplicação.
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. Porém, aqui, preciso realizar esse upload no momento do "build" da aplicação, que no Next.js é executado através da função "getStaticProps".
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 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.
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.”
Código, código e código…
Aqui começam as diferenças. A função getStaticProps é executada no "server-side", ou seja, no servidor! Ela não é executada no navegador do usuário. Portanto, não posso construir aqui um "FormData" e realizar o "Fetch".
Vamos ter uma abordagem ainda mais simples aqui. Basicamente, o que preciso é a URL da imagem. Vou enviar para minha API apenas uma "string", somente a URL do arquivo (neste caso, uma imagem), e na API é que vou realizar todo o tratamento.
Tratamento na API
Para tratarmos as informações e obtermos a imagem através da URL, necessitamos dos seguintes pacotes:
@aws-sdk/client-s3: Este pacote realiza toda comunicação com o Amazon S3.
fetch: Este pacote é necessário para obtermos as informações da imagem no server-side.
Basta realizarmos suas intalações:
npm install @aws-sdk/client-s3npm install fetch
E agora trato a URL recebida na API:
A lógica aqui é realmente mais simples, a função "PutObjectCommand" espera receber os parâmetros, o parâmetro que de fato envia o arquivo é o "Body", e conforme sua documentação, espera receber: string | Uint8Array | Buffer. Ou seja, podemos enviar apenas o Buffer do arquivo.
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.
