[pt-BR] Problemas com pacotes do npm? Verdaccio pode ser a solução

dxwebster

Adriana Ferreira Lima Shikasho

Posted on May 4, 2022

[pt-BR] Problemas com pacotes do npm? Verdaccio pode ser a solução

Este é um conteúdo adaptado do vídeo Vienna.js, Introduction to Verdaccio, January 2019. Para mais informações, veja What is Verdaccio? | Verdaccio


Verdaccio é um registro de proxy npm privado e leve para pacotes NodeJs.

  • A configuração é muito fácil e é feita local por meio de um arquivo config.yaml, e permite modificar o comportamento padrão, ativar plugins e recursos externos.

  • É compatível com todos os gerenciadores de pacotes como npm, yarn ou pnpm.

  • Todos os pacotes que você publica são privados e acessíveis apenas com base em sua configuração.

  • Armazena em cache todas as dependências sob demanda e agiliza as instalações em redes locais ou privadas.

NPM Registry

O NPM Registry é uma coleção open source de pacotes NodeJS com registros públicos, usado por back-end e front-end developers. Esses pacotes podem ser baixados e instalados por meio dos gerenciadores de pacotes como: npm (npm Inc), yarn (Facebook, Google, Exponent, Tidle), pnpm (Zoltan Kochan). Não importa qual gerenciador utilizarmos para instalar os pacotes de Node, eles farão a mesma coisa: requisições para o NPM Registry.

Quando instalamos um pacote, esperamos receber apenas um pacote, certo? Mas a verdade é que quando instalamos um pacote, recebemos muito mais pacotes do que esperávamos.

No contexto de javascript, a quantidade de pacotes publicados passa de 100k e está crescendo a cada dia. Cory House, especialista em React e JavaScript, publicou em seu Twitter a seguinte afirmação: "[...] atualmente, 97% do código de aplicações web vem do npm. Apenas 3% do código foi você que escreveu.”

Ou seja, nós dependemos completamente do NPM registry e devemos levar isso a sério pois esse registro pode falhar - como já aconteceu em agosto de 2018, quando acidentalmente um funcionário da npm Inc apagou alguns pacotes.

Podemos listar outros problemas que podem acontecer ao depender do npm como: Latência e problemas de conexão, preço e segurança estão foras do nosso controle, e o desenvolvimento offline que possui diversas limitações.

Offline

O npm cria um cache mas não permite compartilhá-lo (a não ser que você crie um registro de proxy); não permite a utilização de alguns comandos CLI como publish e info; áreas de funcionamento isoladas por políticas de seguranças restritas em algumas empresas, sendo necessário contatar time de operaçoes para permissões.

Conexão

Internet com conexão lenta prejudicam a velocidade de download. Alguns pacotes podem ser corrompidos por bloqueios de firewall (China por exemplo), ou os planos de internet são bem limitados (Russia, pode cobrar 60 euros para enviar apenas 1 email).

Segurança

Confiar seu código a empresas terceiras; dados confidenciais podem ser vazados ao npm.

A solução do Verdaccio

Ter registros é essencial para escalar projetos novos, mas fontes privadas são privilégios caros para pequenos grupos ou start-ups. Verdaccio vem como uma solução acessível para todos os problemas que vimos até agora.

Sua instalação é muito fácil, basta instalar globalmente executando: npm install —global verdaccio@latest , e rodar sua CLI com o comando verdaccio. É possível utiliza-lo também com o docker. Alguns recursos do Verdaccio:

Registro Privado

Podemos desfrutar de todos os benefícios e controle do registro npm sem tornar o nosso código público, pois tudo é feito localmente. Além disso, se você quiser usar uma versão modificada de algum pacote de terceiros, poderá publicar sua versão localmente com o mesmo nome.

Proxy / Uplinks

As ferramentas do cliente só trabalham com um registro por vez, mas podemos associar todos os registros com um recurso de escopo do npm (~/.npmrc), como o exemplo abaixo:

registry=https://registry.npmjs.org
@mycompany:registry=http://verdaccio-domain:4873
Enter fullscreen mode Exit fullscreen mode

Entretanto, dessa forma é difícil de manter e de certa forma insegura, porque uma vez que isso é publicado acidentalmente ao github, tokens podem ser compartilhados ao publico.

O Verdaccio é um aplicativo de servidor proxy npm que atua como intermediário entre o cliente e solicita um recurso ao servidor npm.

Se você usa vários registros em sua organização e precisa buscar pacotes de várias fontes em um único projeto, o Verddacio permite encadear vários registros e buscar em um único endpoint.

Uplinks é o recurso que o Verddacio tem para associar multiplos registros. Um pacote pode ser fetch por multiplos registros como fallback, se um falhar, você terá outro disponível.

Cache de pacotes

Cache consiste num monte de dependências organizadas por nome. Uma dependência, consiste num arquivo metadata com um monte de tarballs, que é a versão binária do pacote. O cache irá te cobrir quando a conexão com o registro falhar ou quando você tiver totalmente offline.

O armazenamento do verdaccio é sistema baseado em arquivos, mas você pode usar algo diferente se você deseja escalar, como por exemplo usar Amazon s3 bucket para utilizar o verdaccio em nuvem.

O caching é importante principalmente para Integração Contínua (CI), pois você quer evitar falhas por questões externas. Com cache podemos salvar largura de banda e reduzir tráfico externo, principalmente quando rodamos o CI na nuvem, pois cada megabyte custa dinheiro.

O verdaccio é super recomendado a ser utilizado entre o servidor de build e o registro externo.

Possui plugins

Pode-se utilizar plugins gratuitos com o verdaccio, como plugins de autenticação (gitlab, LDAP), plugins de armazenamento (AWS, GCP), e por ser uma aplicação express nodejs, você pode adicionar seus endpoints ou pode interceptar suas requisições com plugins de middleware (npm audit).

Interface de usuário na web

Podemos pesquisar e navegar por pacotes privados e verificar todos os metadados que o pacote oferece: regulamento, autor, últimas versões, dependências, etc

E2E Tests

Se você usa monorepo, é recomendado testar todos os pacotes antes de publicá-los.


Como instalar e configurar o verdaccio

Instale verdaccio globalmente:

$ yarn global add verdaccio
Enter fullscreen mode Exit fullscreen mode

Rode verdaccio para criar o arquivo de configuração default config.yaml:

$ verdaccio
Enter fullscreen mode Exit fullscreen mode

Abra o config.yaml no VSCode:

$ code ~/.config/verdaccio/config.yaml
Enter fullscreen mode Exit fullscreen mode

Adicione o github no uplinks, e inclua seu token de acesso pessoal no auth.token:

uplinks:
  npmjs:
    url: https://registry.npmjs.org/
  github:
    url: https://npm.pkg.github.com/
    auth:
      type: bearer
      token: <GITHUB_PERSONAL_TOKEN>
Enter fullscreen mode Exit fullscreen mode

Adicione os pacotes que deseja rodar localmente nos packages:

packages:
  '@belezanaweb/*':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: github
Enter fullscreen mode Exit fullscreen mode

🙌🏼  Pronto! O verdaccio está configurado para ser utilizado!

💖 💪 🙅 🚩
dxwebster
Adriana Ferreira Lima Shikasho

Posted on May 4, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related