nataliagranato.github.io

Este é um template inicial de blog usando Next.js e Tailwind CSS. A versão 2 é baseada no diretório App do Next.js com Componentes de Servidor do React e utiliza o Contentlayer para gerenciar conteúdo em markdown.

Site pessoal e blog de Natália Granato, focado em tecnologias Cloud Native, containers, Infraestrutura como Código, Observabilidade, DevSecOps e temas relacionados à CNCF.

---

Sobre o Projeto

Este projeto utiliza Next.js, Tailwind CSS, Contentlayer e integra monitoramento completo com Sentry, proporcionando uma experiência otimizada e observabilidade em produção.

Principais tecnologias:

• Performance: Contentlayer para processamento eficiente de conteúdo MDX
• Observabilidade: Sentry para monitoramento de erros, logging e feedback de usuários
• Infraestrutura: Deploy otimizado para Vercel com source maps e configurações de produção

Principais temas abordados:

• Cloud Native, Kubernetes, Docker, Observabilidade, DevOps, DevSecOps, automações, ferramentas CNCF.

---

Instalação e Uso Local

Pré-requisitos:

• Node.js 22.x ou superior
• npm ou yarn

Clone o repositório:

git clone https://github.com/nataliagranato/nataliagranato.github.io.git
cd nataliagranato.github.io

Instale as dependências:

npm install
# ou
yarn install

Configuração de ambiente:

• Copie o arquivo .env.example para .env e configure as variáveis de ambiente conforme necessário:
  • Sentry: DSN, organização e projeto para monitoramento de erros
• Para testar o Sentry, configure o DSN e habilite a página de teste com NEXT_PUBLIC_ENABLE_SENTRY_TEST_PAGE=true.

Inicie o servidor de desenvolvimento:

npm run dev
# ou
yarn dev

Abra http://localhost:3000 no navegador.

---

Principais Funcionalidades

Monitoramento e Observabilidade com Sentry

• Monitoramento de Erros: Captura automática de erros JavaScript/TypeScript no frontend e backend
• Logging Avançado: Integração com console.log, console.warn, console.error para envio automático ao Sentry
• Performance Monitoring: Rastreamento de performance com sampling configurável por ambiente
• User Feedback: Widget integrado para coleta de feedback dos usuários
• Source Maps: Upload automático de source maps para debugging em produção
• Configuração Multi-Runtime: Suporte para Server, Client e Edge runtimes do Next.js
• Controle por Ambiente: Configuração flexível via variáveis de ambiente para desenvolvimento/produção

Variáveis de Ambiente do Sentry

# Configuração básica
SENTRY_DSN=seu_dsn_aqui
NEXT_PUBLIC_SENTRY_ORG=sua_organizacao
NEXT_PUBLIC_SENTRY_PROJECT=seu_projeto

# Controles de produção
SENTRY_TRACES_SAMPLE_RATE=0.05          # Taxa de sampling (5% em prod)
SENTRY_ENABLE_LOGS=true                  # Habilitar logs (padrão: true)
NEXT_PUBLIC_ENABLE_SENTRY_TEST_PAGE=false # Página de teste (padrão: false)

# Upload de source maps
SENTRY_ORG=sua_organizacao
SENTRY_PROJECT=seu_projeto
SENTRY_AUTH_TOKEN=seu_token_de_auth

Página de Teste do Sentry

• Acessível em /test-sentry (apenas quando NEXT_PUBLIC_ENABLE_SENTRY_TEST_PAGE=true)
• Interface para testar: geração de erros, logs console, Sentry.logger e feedback de usuário
• Protegida em produção (retorna 404 por padrão)
• Metadata com robots: noindex para evitar indexação

---

Diagramas de Arquitetura

Renderização de Posts do Blog

sequenceDiagram
  autonumber
  actor User as Usuário
  participant Page as Página do Blog (Next.js)
  participant BlogCache as lib/blogCache
  participant CL as Contentlayer

  User->>Page: Acessa página/lista/post
  Page->>BlogCache: getCachedPosts / getCachedPost / getCachedPostsByTag / getCachedPagedPosts
  BlogCache->>CL: carregar posts (allBlogs/allCoreContent)
  CL-->>BlogCache: dados processados
  BlogCache-->>Page: dados formatados
  Page-->>User: HTML renderizado

Loading

---

Customização

• Editar o layout em app/ ou o conteúdo em data/.
• Posts e artigos em data/blog/.
• Informações de autor em data/authors/default.mdx.
• Configurações de projetos em data/projectsData.ts.
• Links de navegação em data/headerNavLinks.ts.
• Favicons/imagens em public/static/.
• Configuração do cache e API em .env.

---

Documentação

• docs/SENTRY_CONFIG.md: Configuração completa do Sentry, monitoramento de erros, logging e feedback de usuários.
• docs/MONITORING.md: Documentação sobre monitoramento e observabilidade.

---

Deploy

Este projeto está pronto para deploy no Vercel e pode ser facilmente integrado a ambientes cloud-native.