Backstage: Facilitando a criação de componentes e melhorando a governança no desenvolvimento de software
Tags: backstage, dx, platformengineering, tooling
Published: 2023-06-19 01:14:40

Oi, eu sou o Edu!

Pra mim, uma das coisas mais bacanas de trabalhar com tecnologia é a possibilidade de estar sempre aprendendo e aplicando algo novo, como uma nova linguagem de programação, uma abordagem diferente para lidar com problemas relacionados ao desenvolvimento de software, ou uma nova ferramenta ou metodologia que possa melhorar a experiência do desenvolvedor. Isso me proporciona a oportunidade de descobrir o que são, para que servem e como funcionam coisas como aquela que vou comentar hoje: o **Backstage**.

Algumas das preocupações que afetam as empresas que possuem equipes de desenvolvimento de software estão relacionadas a como oferecer aos desenvolvedores uma boa experiência de trabalho, reduzindo o overhead com aspectos que não fazem parte de seu dia a dia, permitindo que se concentrem na melhor forma de transformar requisitos de negócios em código.

O Backstage, _uma plataforma open-source criada pelo Spotify_, pode ser descrito como uma ferramenta focada em aumentar e aprimorar a experiência e agilidade da equipe de desenvolvimento. Ela permite a criação de componentes de software de forma padronizada e facilita a governança dos serviços disponíveis. Isso possibilita uma rápida resposta a perguntas como _"Qual equipe desenvolveu ou é responsável por esta API?"_, _"Quais são os serviços desenvolvidos pela equipe X?"_, _"Quais são as dependências deste componente?"_ e _"Para que serve e como consumo esta API?"_.

Meu objetivo aqui não é apresentar em detalhes o Backstage _(muitas pessoas já fizeram isso e de forma muito melhor do que eu poderia fazer)_, mas sim compartilhar um pouco do que aprendi ao trabalhar em uma _PoC_ com o objetivo de avaliar a ferramenta. Não encontrei muito material relacionado à configuração da ferramenta para aproveitar os principais benefícios que ela oferece. Portanto, o primeiro ponto que abordarei aqui está relacionado à **criação de templates de software**.

## Antes, porém, cabe revisar o passo a passo que utilizei para instalar e configurar o Backstage

O Backstage foi escrito em _NodeJS_ e _React_, o que quer dizer que você precisa tê-los no seu ambiente antes de seguir com a instalação. Para isso, eu fiz o seguinte:

- Instalei o **Curl**: 
```lang-bash
apt install curl
```

![Instalando o curl no Ubuntu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0dcphibbms4v0amka5t.gif)

- Daí instalei o **NVM**: 
```lang-bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
```

![Instalação do NVM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9dfo80be04dhowzvfqz.gif)

- E então instalei a **versão LTS do NodeJS**: 
```lang-bash
nvm install --lts
```

![Instalando a versão LTS do NodeJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsyelabszmgrk7yov627.gif)

- Pra concluir, também instalei o **Yarn**: 
```lang-bash
npm install --global yarn
```

![Instalando o Yarn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/maos4jtecluzjoz1aqj6.gif)

- E o **Git**:

```lang-bash
apt install git
```

![Instalando o Git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ld63bvwnbpx0cpf4xb4w.gif)

> _Em tempo: eu fiz tudo isso no Ubuntu, então dependendo do ambiente que você tiver usando pode haver pequenas variações._

Feito isso, você já tem os requisitos necessários para instalar o Backstage, então o próximo passo é iniciar a instalação, usando o comando abaixo:

```lang-bash
npx @backstage/create-app
```

![Instalando o Backstage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bus832khj4sphfq88av9.gif)

Após concluir essas etapas, o Backstage estará instalado e pronto para ser executado. Para isso, basta acessar o diretório de instalação do Backstage _(se você seguiu a recomendação, o diretório será chamado "backstage")_ e, em seguida, executar o comando:

```lang-bash
yarn dev
```

![Executando o Backstage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnrg5v6ck7mdzcyokzkr.gif)

> **Atenção!** Talvez você receba algumas mensagens de erro relacionadas ao Git quando subir o Backstage pela primeira vez. Para resolver isso, basta inicializar o Git no diretório do Backstage, e fazer o commit dos arquivos de lá, usando o `git init`, e depois os comandos `git add .` e então o `git commit -m“Primeiro commit”`.

Pronto, o Backstage foi instalado e iniciado, e já pode ser acessado a partir da url `http://localhost:3000`. Assim que a página carregar, você verá isso:

![Página inicial do Backstage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2weohtdv1hx5mbbh0v7.png)

### Com o Backstage devidamente instalado, podemos iniciar a configuração dele

#### Configurando o banco de dados

Por padrão, o Backstage é iniciado com um banco de dados "in-memory", o que significa que todos os dados manipulados nele são armazenados na memória. No entanto, assim que o Backstage é interrompido, esses dados são perdidos. Então, a primeira coisa que eu recomendo fazer é configurá-lo para utilizar um banco de dados para armazenamento destas informações.

Se você já tiver um banco de dados que possa ser utilizado _(eu usei o PostgreSQL)_, basta alterar o arquivo _app-config.local.yaml_, que está dentro do diretório do backstage, incluindo as configurações necessárias.

Ao abrir o arquivo em um editor, você verá o seguinte:

![Arquivo app-config.local.yaml padrão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ouh4vfy17j9r4lx6wavl.png)

As configurações que você deverá incluir nele, para que possa utilizar um banco de dados como repositório são:

```lang-yaml
backend:
  database:
    connection:
      host: localhost
      port: 5432
      user: postgres
      password: secret
```

> **Importante!** Não esqueça de alterar as configurações do _host_, _port_, _user_ e _password_ de acordo com as do banco que você irá utilizar!

Depois de alterado, o arquivo deverá estar assim:

![Arquivo app-config.local.yaml configurado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjq4j59qesspxa6ub3eb.png)

Para aplicar as novas configurações, é só parar o Backstage (`Control+C`) e iniciá-lo novamente (`yarn dev`).

#### Configurando os repositórios

O Backstage possui um arquivo chamado _app-config.yaml_. É nele que estão as configurações que iremos alterar.

##### Configurando o Github como repositório

Ao abrir o arquivo app-config.yaml, localize a seção integrations:

![Seção integrations do arquivo app-config.yaml](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxpsn2a9mp6hi3at5arg.png)

Você verá que o arquivo já está preparado para integrar com o Github - para isto basta apenas criar uma variável de ambiente com o nome _GITHUB_TOKEN_, e atribuir a ela o seu Personal Access Token.

> Se você não quiser ou não puder criar uma variável de ambiente, pode inserir no próprio arquivo o seu token no lugar da variável GITHUB_TOKEN. Dessa forma, ele ficará assim:

![Token do Github inserido no arquivo app-config.yaml](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6aj4axbbxosfg3a98wqr.png)

##### Configurando o Azure como repositório

A configuração do Azure é basicamente a mesma que a do Github. A diferença é que como não existe uma seção para o Azure dentro da seção integrations, você terá que criá-la. E, do mesmo jeito que no Github, você poderá utilizar uma variável de ambiente para armazenar seu Personal Acess Token (informando ela no arquivo de configuração), ou inserir o token diretamente no arquivo.

> *Dica:* O host do Azure é o `dev.azure.com`!

Se fizer usando a variável de ambiente, seu arquivo ficará assim:

![Configurando o Azure no Backstage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgx67hrn7hplaxyn57tl.png)

Pronto! Com essa configuração já podemos partir para o próximo passo: demonstrar como criar templates de software para o desenvolvimento de novas aplicações. Mas isso é assunto para o próximo post.

Bem, por hora é isso... como sempre, comentários, críticas e sugestões são sempre bem-vindos.

Grande abraço, e até mais!