Setup do S3 e permissões de leitura

Upload de Imagens para o S3 com Next.js: Configurando o Bucket

Agora, vamos explorar o processo de configuração de um bucket no S3 para hospedar imagens. Nosso objetivo é preparar o ambiente para que as imagens sejam acessíveis publicamente em nossa aplicação Next.js.

Antes de começar, você precisa ter uma conta na Amazon AWS. Se ainda não possui uma, crie uma conta gratuita. Com sua conta criada, você terá acesso ao AWS Management Console, o dashboard que reúne todas as ferramentas e produtos da AWS.

Criando um Bucket no S3

1. Acesse o AWS Management Console e navegue até o serviço S3.
2. Clique em "Create bucket".
3. Dê um nome ao seu bucket. Usaremos codante-mp-foto-upload como exemplo.
4. Mantenha as configurações padrão e clique em "Create bucket".

Configurando Permissões de Acesso

Por padrão, os buckets no S3 são privados. Para tornar as imagens públicas, precisamos configurar as permissões.

1. Acesse o bucket codante-mp-foto-upload.
2. Vá até a aba "Permissions".
3. Em "Block public access (bucket settings)", clique em "Edit".
4. Desabilite o bloqueio de acesso público, desmarcando a opção "Block all public access".
5. Confirme a alteração digitando "confirm" e clicando em "Confirm".

Definindo a Política de Acesso do Bucket

Para garantir a leitura pública das imagens, vamos definir uma política de acesso no bucket.

1. Em "Permissions", clique em "Edit" na seção "Bucket policy".
2. Cole o seguinte código na área de texto "Policy":

{
  "Version": "2008-10-17",
  "Statement": [
    {
      "Sid": "AllowPublicRead",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::codante-mp-foto-upload/*"
    }
  ]
}

3. Clique em "Save changes".

Configurando o Next.js para Acessar as Imagens

O Next.js utiliza um servidor próprio por trás do componente next/image para otimizar as imagens. É necessário registrar os domínios permitidos para evitar abusos.

1. Abra o arquivo next.config.mjs na raiz do seu projeto Next.js.
2. Adicione o seguinte código:

const nextConfig = {
  images: {
    remotePatterns: [
      {
        hostname: 'codante-mp-foto-upload.s3.sa-east-1.amazonaws.com',
      },
    ],
  },
};

export default nextConfig;

Pronto! O bucket no S3 está configurado para hospedar imagens publicamente e seu projeto Next.js já pode acessá-las de forma segura e otimizada.

Em breve, veremos como enviar imagens para o S3 através da nossa aplicação Next.js e como exibi-las de forma dinâmica!