Voce esta cansado da listagem de diretorios sem graca e simples do bucket S3? Deseja que houvesse uma maneira de torna-la mais amigavel e atraente? Bem, nao procure mais! Apresentando S3-Directory-Listing, uma combinacao simples e facil de usar de script JS e HTML que transformara a listagem de diretorios do seu bucket S3 em uma listagem moderna e elegante de arquivos e pastas com uma bela UI e funcionalidade de busca.

Primeiro, vamos falar sobre o uso. Para usar S3-Directory-Listing, tudo que voce precisa fazer e clonar o repositorio ou copiar o conteudo de dark-mode.css, s3.js e index.html para o seu bucket S3. Em seguida, atualize a variavel bucketName no app.js com o nome do seu bucket e configure as definicoes do seu bucket S3. Acesse o arquivo index.html no seu navegador, e voila! Voce agora tem uma listagem elegante do diretorio S3. E simples assim!

Mas e as configuracoes do bucket S3? Para fazer essa magica funcionar, voce precisa configurar as definicoes do seu bucket S3 corretamente. Primeiro, certifique-se de que seu bucket S3 seja publicamente acessivel ou pelo menos acessivel aos usuarios com quem voce deseja compartilhar a listagem de diretorios. Em seguida, defina a politica do bucket para permitir acesso publico de leitura aos seus objetos. Use a seguinte politica, substituindo <nome-do-seu-bucket> pelo nome real do seu bucket:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "S3DirectoryListing",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::<nome-do-seu-bucket>/*",
                "arn:aws:s3:::<nome-do-seu-bucket>"
            ]
        }
    ]
}

Substitua <seu-endereco-ip> pelo endereco IP desejado ou um bloco CIDR para restringir o acesso a enderecos IP especificos. Por fim, habilite a hospedagem de site estatico para seu bucket e anote o endpoint de site estatico do bucket (ex.: http://<nome-do-seu-bucket>.s3-website-<sua-regiao>.amazonaws.com/index.html ou https://<nome-do-seu-bucket>.s3.amazonaws.com/index.html para conexao segura).

Agora que as configuracoes do seu bucket S3 estao prontas, voce pode desfrutar da sua nova e elegante listagem de diretorios S3! Mas espere, tem mais. Voce pode personalizar o numero de itens exibidos por pagina modificando a variavel itemsPerPage no s3.js.

Atualize suas configuracoes de Cross-origin resource sharing (CORS) como abaixo.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

S3-Directory-Listing nao e apenas facil de usar, mas tambem e altamente personalizavel. Voce pode ajustar o script e o HTML para atender suas necessidades e preferencias especificas. E se voce encontrar algum problema ou tiver alguma duvida, pode ir ao repositorio GitHub e informar aos criadores. Eles adorariam ouvir de voce!

Em conclusao, S3-Directory-Listing e um divisor de aguas para qualquer um que queira dar um toque elegante a listagem de diretorios do bucket S3. E facil de usar, altamente personalizavel e o melhor de tudo, e gratuito! Entao, por que se contentar com uma listagem sem graca e simples do S3 quando voce pode ter uma moderna e amigavel? Experimente S3-Directory-Listing hoje e veja por si mesmo a diferenca que pode fazer.

Voce tambem pode usar no Modo Escuro! Aqui esta a demonstracao: https://s3-directory-listing.s3.amazonaws.com/index.html

Voce pode encontrar o README bem documentado e o codigo fonte no Repositorio Github: https://github.com/flightlesstux/S3-Directory-Listing

Boas listagens!