Uma aplicação frontend moderna desenvolvida com Vue.js 3 e Vuetify 3 que fornece uma interface web intuitiva para gerenciar e visualizar recursos do LocalStack (Não oficial).
- ✅ Visão geral de todos os serviços LocalStack ativos
- ✅ Status em tempo real de conectividade
- ✅ Estatísticas resumidas de cada serviço
- ✅ Ações rápidas para limpeza de recursos
- ✅ Métricas de uso e performance
- ✅ Alertas de saúde dos serviços
- ✅ Listar todos os buckets com paginação
- ✅ Visualizar estatísticas detalhadas (número de objetos, tamanho total, custo simulado)
- ✅ Criar novos buckets com configurações avançadas (versionamento, lifecycle)
- ✅ Deletar buckets (com limpeza automática de objetos)
- ✅ Navegar dentro dos buckets com estrutura de pastas
- ✅ Upload de arquivos (individual e em lote)
- ✅ Download e exclusão de objetos
- ✅ Busca e filtros avançados (por tipo, tamanho, data)
- ✅ Pré-visualização de arquivos (imagens, texto, JSON)
- ✅ Configuração de políticas de bucket
- ✅ Gerenciamento de ACLs (Access Control Lists)
- ✅ Listar todas as filas com filtros
- ✅ Visualizar estatísticas em tempo real (mensagens disponíveis, em processamento, DLQ)
- ✅ Criar novas filas com configurações personalizadas (FIFO, delay, retention)
- ✅ Deletar filas com confirmação
- ✅ Enviar mensagens para filas (individual e em lote)
- ✅ Receber e visualizar mensagens com formatação JSON
- ✅ Deletar mensagens individuais ou múltiplas
- ✅ Purgar filas completamente
- ✅ Configurar Dead Letter Queues (DLQ)
- ✅ Monitoramento de métricas de fila
- ✅ Listar todas as tabelas com status
- ✅ Visualizar estatísticas detalhadas (número de itens, tamanho, índices)
- ✅ Criar tabelas com chaves primárias e índices secundários
- ✅ Deletar tabelas com confirmação
- ✅ Visualizar itens da tabela com paginação
- ✅ Adicionar, editar e deletar itens (via JSON e formulário)
- ✅ Suporte para todos os tipos de dados DynamoDB
- ✅ Query e Scan com filtros avançados
- ✅ Backup e restore de dados
- ✅ Gerenciamento de índices GSI/LSI
- ✅ Listar todas as funções com filtros
- ✅ Visualizar detalhes, configurações e versões
- ✅ Invocar funções com payload customizado
- ✅ Visualizar resultados, logs e métricas de execução
- ✅ Deletar funções e versões
- ✅ Suporte para invocação síncrona e assíncrona
- ✅ Configurar triggers e event sources
- ✅ Gerenciar aliases e configurações de concorrência
- ✅ Monitor de execuções e erros
- ✅ Listar todos os streams com status
- ✅ Visualizar detalhes, shards e métricas
- ✅ Criar novos streams com configuração de shards
- ✅ Deletar streams com confirmação
- ✅ Enviar records para streams (individual e em lote)
- ✅ Ler records de streams com iteradores
- ✅ Visualizar dados decodificados em múltiplos formatos
- ✅ Monitoramento de throughput e latência
- ✅ Gerenciar resharding automático
- ✅ Listar todos os tópicos
- ✅ Criar e deletar tópicos
- ✅ Gerenciar assinatures (subscriptions)
- ✅ Publicar mensagens em tópicos
- ✅ Configurar filtros de mensagens
- ✅ Visualizar histórico de notificações
- ✅ Listar todas as chaves de criptografia
- ✅ Criar novas chaves (simétricas e assimétricas)
- ✅ Gerenciar aliases de chaves
- ✅ Criptografar e descriptografar dados
- ✅ Gerar data keys e random data
- ✅ Configurar políticas de chaves
- ✅ Rotação automática de chaves
- ✅ Importar material de chaves externas
- ✅ Visualizar uso e métricas de chaves
- ✅ Gerenciar identidades de email
- ✅ Enviar emails de teste
- ✅ Visualizar estatísticas de envio
- ✅ Configurar templates de email
- ✅ Monitor de bounces e complaints
- ✅ Design moderno e responsivo com Material Design 3
- ✅ Tema claro/escuro com persistência
- ✅ Feedback visual para todas as ações
- ✅ Busca e filtros em tempo real
- ✅ Notificações toast personalizadas
- ✅ Configuração dinâmica do endpoint LocalStack
- ✅ Atalhos de teclado para ações rápidas
- ✅ Suporte para múltiplos idiomas (i18n)
- ✅ Modo offline com cache local
- ✅ Exportação de dados (JSON, CSV)
- Vue.js 3 - Framework frontend reativo
- Vuetify 3 - Biblioteca de componentes Material Design
- Vite - Build tool e dev server
- Pinia - Gerenciamento de estado
- Vue Router - Roteamento SPA
- AWS SDK for JavaScript - Integração com LocalStack
- Docker - Containerização
- Nginx - Servidor web para produção
- Node.js 18+
- npm ou yarn
- Docker e Docker Compose (para execução com containers)
- Clone o repositório
git clone <url-do-repositorio>
cd localstack-web- Instale as dependências
npm install- Execute o LocalStack separadamente
# Em um terminal separado
docker run --rm -it -p 4566:4566 localstack/localstack- Execute a aplicação em modo desenvolvimento
npm run dev- Acesse a aplicação
http://localhost:3000
- Clone o repositório
git clone <url-do-repositorio>
cd localstack-web- Execute com Docker Compose
docker-compose up --build- Acesse a aplicação
http://localhost:3000
O LocalStack estará disponível em http://localhost:4566
A aplicação permite configurar dinamicamente o endpoint do LocalStack através da interface:
- Clique no ícone de configurações na barra lateral
- Insira o endpoint desejado (ex:
http://localhost:4566) - Salve as configurações
Você pode configurar o endpoint através de variáveis de ambiente no docker-compose.yml:
environment:
- LOCALSTACK_ENDPOINT=http://localstack:4566docker build -t localstack-web .docker run -p 3000:80 localstack-web# Desenvolvimento
npm run dev
# Build para produção
npm run build
# Preview da build
npm run preview
# Linting
npm run lint
# Formatação de código
npm run formatsrc/
├── components/ # Componentes reutilizáveis
├── views/ # Páginas/Views da aplicação
├── router/ # Configuração de rotas
├── stores/ # Gerenciamento de estado (Pinia)
├── App.vue # Componente raiz
└── main.js # Ponto de entrada
- Fork o projeto
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
- Visualizar rapidamente o estado dos recursos durante desenvolvimento
- Testar integrações com serviços AWS de forma local
- Limpar ambientes entre testes
- Debugar problemas com dados de teste
- Criar cenários de teste com dados específicos
- Verificar comportamento de aplicações em diferentes estados
- Limpar e preparar ambientes de teste
- Validar integrações com serviços AWS
- Monitorar recursos em ambientes de desenvolvimento
- Automatizar limpeza de ambientes
- Configurar dados iniciais para testes
- Verificar configurações de serviços
- Verifique se o LocalStack está rodando na porta 4566
- Confirme se o endpoint está configurado corretamente
- Verifique se não há problemas de CORS
- Use o modo de desenvolvimento do LocalStack para melhor performance
- Considere configurar persistence se precisar manter dados entre reinicializações
- Certifique-se de que o Docker está rodando
- Verifique se as portas 3000 e 4566 estão disponíveis
- Use
docker-compose logspara debug
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
- LocalStack - Por fornecer uma excelente ferramenta para desenvolvimento local
- Vue.js - Framework frontend incrível
- Vuetify - Componentes Material Design para Vue
- AWS SDK - SDK oficial da AWS
⭐ Se este projeto foi útil para você, considere dar uma estrela no repositório!
