Monte seu ambiente

Ambiente

Usamos Java, Maven, Node, Docker, Eclipse e Visual Studio Code para trabalhar nos serviços do STF Digital. Usamos Maven como ferramenta de construção, Docker para montar a infraestrutura local necessária, Eclipse para trabalhar no código de back-end e Visual Studio Code para trabalhar no código de front-end.

O tutorial abaixo foi criado para o Sistema Operacional Windows. Alguns passos foram documentados também para Linux. Siga os passos abaixo para deixar seu ambiente pronto para começar a trabalhar. Caso encontre alguma dificuldade, entre em contato com Tomás Godoi no e-mail tomas.godoi@stf.jus.br.

Instale o JDK 8

O STF Digital ainda utiliza alguns serviços que necessitam do JDK 8 para funcionar. Portanto, é necessário instalar essa versão do JDK.

Passo a passo de como instalar o JDK 8

Instale o JDK 12

Em um terminal, digite javac -version e caso não tenha instalado a versão 12, baixe em Java JDK 12 e instale.

Crie uma nova variável de ambiente chamada JAVA_HOME com o endereço da instalação do JDK (ex: C:\Program Files\Java\jdk-12.0.2). Também adicione na variável PATH o seguinte valor “;%JAVA_HOME%\bin”.

Execute o comando javac -version para verficar se a instalação foi realizada com sucesso.

Instale o JDK 17

Alguns microserviços do STF Digital já estão utilizando o Java 17 e no futuro todos serão migrados para utilizar essa versão do Java. Então para já estar preparado para trabalhar nesses microserviços, é necessário instalar essa versão do Java.

Passo a passo de como instalar o JDK 17

Baixe a IDE recomendada: Spring Tool Suite

Baixe o Eclipse STS (Spring Tool Suite 4). Enquanto o download é realizado, continue configurando o ambiente…

Instale o Docker Community Edition

  1. Faça download do Docker Community Edition. Enquanto o download é realizado, prossiga aos próximos passos.
  2. O Docker utiliza um recurso chamado virtualização, chamado no Windows de Hyper-V. Para ativar o Hyper-V vá em Painel de Controle\Programas.
  3. Clique em Ativar ou destivar recursos do Windows.
  4. Marque Hyper-V e clique em OK, após fazer isso o computador irá reiniciar.
  5. Feito isso, execute o arquivo executável baixado no primeiro passo, chamado Docker for Windows install.
  6. Clique em Close, ao fazer isso a máquina irá deslogar.
  7. Realize login.
  8. Para testar se está tudo funcionando corretamente, abra um terminal e digite o comando abaixo:
    $ docker ps

Aumente a memoria do Docker

  1. Clique em mostrar ícones ocultos no lado direito da tela, ao lado do ícone de Acesso à Internet
  2. Clique com o botão direito do mouse no ícone do docker(uma baleia)
  3. Clique em Settings
  4. Clique em Advanced
  5. Aumente a memória para 3072 e clique em Apply

Caso o usuário esteja utilizando o WLS (Windows Subsystem for Linux), a alocação de memória ao Docker é feita dinâmicamente pelo próprio WSL, dessa forma, para aumentarmos a memória disponível ao Docker, devemos aumentar a memória do WSL. Para isso:

  1. Crie (caso não exista) um arquivo chamado .wslconf no diretório do usuário (C:\Users\Seu_Usuário) e adicione o código abaixo nele, substituindo o valor da memória para o desejado:
    [wsl2]
    memory=3GB

Instale o Git e configure SSH para acesso

  1. Faça download do Git for Windows.
  2. Realize a instalação.
  3. Para configurar o SSH, acesse o GIT Bash.
  4. Execute os comandos abaixo substituindo o seu e-mail (é muito importante o -m PEM, caso contrário o configserver não poderá utilizar a chave em outro formato):

    ssh-keygen -m PEM -t rsa -b 4096 -C "email@example.com"
    ssh-keyscan -H -t rsa gitlab.com >> ~/.ssh/known_hosts
  5. Na opção “Enter file in which to save the key” deixe em branco para salvar no diretório padrão.

  6. Insira uma senha de segurança que também pode ser em branco. Recomendamos não utilizar senha.
  7. Utilize o comando para copiar a chave configurada:

    cat ~/.ssh/id_rsa.pub | clip
  8. Acesse o Gitlab e ir no canto superior direito no “Seu usuário” -> Settings -> SSH Keys e copiar em Key -> Add Key

  9. Feche o Git bash, ao abri novamente ele pedirá a senha para acesso.
  10. Para verificar se está funcionando, execute o comando abaixo marcando a primeira pergunta como “yes”:

    ssh -T git@gitlab.com
  11. Entre no diretório /.ssh do seu usuário, crie o arquivo config e insira o código abaixo:

    Host gitlab.com
    Hostname altssh.gitlab.com
    Port 443

E rode o comando

ssh-keyscan -H -t rsa -p 443 altssh.gitlab.com >> ~/.ssh/known_hosts

Atualize as imagens dos outros contextos a partir do Docker Hub/Registro Corporativo

A partir daqui, é necessário que o usuário ou esteja usando a rede local do STF ou já tenha configurado o VPN para a própria máquina. Se estiver em dúvida como fazer isso, entre com contato com o Help Desk.
Se ainda não estiver logado no registry execute o seguinte comando no Windows PowerShell e realize login usando seu usuário e senha de rede:

$ docker login registry.stf.jus.br

Caso esteja usando o Git Bash e deseja rodar o comando por ele

$ winpty docker login registry.stf.jus.br

Configure seus hosts

Copie o endereço de IP e, no Windows, abra o arquivo

C:\Windows\System32\drivers\etc\hosts

E adicione as linhas abaixo:

127.0.0.1  docker discovery cassandra rabbit gateway documents oracle
127.0.0.1 modulos redis identidades elk onlyoffice elasticsearch
127.0.0.1 integracoes-gateway integracoes-documents integracoes-ui
127.0.0.1 integracoes-modulos integracoes-identidades
127.0.0.1 integracoes-configserver integracoes-discovery

No Windows 7, é necessário alguns passos para conseguir editar o hosts.

  1. Clique com o botão direito do mouse no arquivo hosts/propriedades
  2. Na aba “Segurança”, clique em “Avançadas”
  3. Adicione o seu usuário para ter acesso às Permissões
  4. Clique em Aplicar/Ok
  5. Volte nas propriedades
  6. Clique em “Editar”, neste momento é necessário adicionar o seu usuário e permitir controle total
  7. Feito isso, clique em “Aplicar”/“Ok” e volte para a pasta e edite o documento Hosts

No Linux, isso pode ser feito adicionando uma entrada no arquivo /etc/hosts, como no exemplo abaixo

127.0.0.1  docker discovery cassandra rabbit gateway documents oracle
127.0.0.1 modulos redis identidades elk onlyoffice elasticsearch
127.0.0.1 integracoes-gateway integracoes-documents integracoes-ui
127.0.0.1 integracoes-modulos integracoes-identidades
127.0.0.1 integracoes-configserver integracoes-discovery

Você poderá confirmar se esse relacionamento está funcional executando o comando ping em um terminal contra o alias criado.

$ ping docker

Disparando docker [127.0.0.1] com 32 bytes de dados:
Resposta de 127.0.0.1: bytes=32 tempo<1ms TTL=128
Resposta de 127.0.0.1: bytes=32 tempo<1ms TTL=128
Resposta de 127.0.0.1: bytes=32 tempo<1ms TTL=128
Resposta de 127.0.0.1: bytes=32 tempo<1ms TTL=128

Configure as tecnologias e módulos que serão utilizadas

Para a execução do repositório, é necessária a instalação do NodeJS, assim como do NPM. Para isso, recomendamos a utilização do NVM, que é um gerenciador de versões do NodeJS, com ele o processo de instalação é facilitado e permite transitar entre versões rapidamente. Após a instalação do NVM, execute o comando abaixo em um terminal para verificar se ela foi bem sucedida:

$ nvm v

Feito isso, vamos instalar o NodeJS 8.9.4 LTS, que é a versão utilizada esse repositório. Para isso, em um terminal execute o seguinte comando:

$ nvm install 8.9.4

Com isso o NVM instalará a versão desejada do NodeJS juntamente com a versão correspondente do NPM. Siga a instrução da pós-instalação para utilizar a versão instalada:

$ nvm use 8.9.4

Depois disso, podemos conferir se o node e o npm estão instalados corretamente, executando o seguinte comando:

node -v
npm -v

Instale os seguintes pacotes (yarn e gulp):

$ npm install -g yarn
$ npm install -g gulp

Configure o Eclipse para começar a codificar

Usamos Spring Tool Suite como IDE. Certifique-se que você tem a última versão. Você também precisará instalar plugin Typescript.java.

Instalando o reconhecimento da sintaxe do Typescript

Apesar de recomendarmos o Visual Studio Code para codificar o front-end, também há a opção de instalar o seguinte plugin para o Eclipse, caso prefira utilizar apenas o Eclipse. (Observação: esse plugin ainda não suporta validação de padrão de codificação em tempo de codificação)

Para instalar o reconhecimento da sintaxe do Typescript siga os passos abaixo:

  1. Abra o Eclipse> clique em Help > Install New Software… > ADD.
  2. Inclua em location site o link do typescript.java “http://oss.opensagres.fr/typescript.ide/1.3.0/". O nome pode ser Typescript.java Update site.
  3. Marque todas as opções e clique em Next, Next, Finish.

Alterando a codificação padrão do Eclipse

O Eclipse, por padrão, cria projetos com codificação ISO-8859-1 para seus arquivos. O STF Digital utiliza, por questões de padronização, a codificação UTF-8. Por isso, é necessário alterar essas codificação no Eclipse. Para isso, execute os passos a seguir:

  1. Abra o Eclipse,
  2. Clique em Window/Preferences
  3. Clique em General/Workspace
  4. Selecione o Text file encoding: Other
  5. Selecione UTF-8
  6. Clique Apply and Close

Ativando a sincronização do Eclipse com arquivos alterados externamente

Como utilizamos o Gulp para construção de front-end e o Eclipse não monitora por padrão arquivos alterados externamente, é necessário ativar essa opção no Eclipse para que o código front-end servido pelo back-end esteja sempre atualizado. Para ativar essa opção no Eclipse, execute os passos a seguir:

  1. Abra o Eclipse,
  2. Clique em Window/Preferences
  3. Clique em General/Workspace
  4. Selecione “Refresh using native hooks or polling”
  5. Clique em Apply and Close

Instale o Visual Studio Code e plugins

Usamos o Visual Studio Code como IDE para front-end. Certifique-se que você tem a última versão. Você também precisará instalar os seguintes plugins:

  1. TSLint, que é utilizado para verificar se o código está de acordo com o padrão de codificação de front-end em tempo de codificação

Desenvolvendo para um contexto específico

Quando uma equipe está desenvolvendo em apenas um contexto, eles não precisam ficar construindo esses contextos localmente. Como as imagens docker dos outros contextos já são construídas na integração contínua e os desenvolvedores normalmente não precisam alterar nada nessas imagens, eles podem baixá-las diretamente de um registro docker. Nesta seção estão os procedimentos para utilizar essa abordagem de desenvolvimento.

Baixe o repositório do contexto

Abra o Git Bash e na sua pasta de preferência (ex: C:\Users\Seu_Usuário\dev) clone o repositório com os comandos abaixo:

$ git clone git@gitlab.com:supremotribunalfederal/stfdigital/autosprocessuais/registro.git
$ cd registro

Configurando o repositório dos aterfatos corporativo

Primeiro entre no ~/.npmrc e apague as duas linhas a seguir:

$ @integracoes:registry=https://artifactory.stf.jus.br/artifactory/api/npm/npm-stfdigital/

//artifactory.stf.jus.br/artifactory/api/npm/npm-stfdigital/:_authToken=<seu-token>

O registro NPM (Node Package Manager) corporativo do STF Digital tem o objetivo de armazenar pacotes escritos na linguagem de programação JavaScript para compartilhamento entre os projetos do STF Digital. Esse registro fica hospedado no JFrog Artifactory localizado em https://artifactory.stf.jus.br/.

Para utilizar esse registro corporativo em seu ambiente local de desenvolvimento é necessário configurar os escopos de projetos do STF Digital para serem buscados no mesmo. Além disso, é necessário autenticar-se no registro corporativo. Isso pode ser feito pelos comandos descritos a seguir.

Abrir um Prompt de Comando do Windows.

  1. Executar

    $ npm config set @integracoes:registry https://artifactory.stf.jus.br/artifactory/api/npm/npm-stfdigital/
  2. Executar

    $ npm login --registry=https://artifactory.stf.jus.br/artifactory/api/npm/npm-stfdigital/
$ Username: <Digite seu usuário de rede do STF>

$ Password: <Digite sua senha de rede do STF>

$ Email: <Digite seu e-mail do STF>

Esses comandos vão atualizar o arquivo ~/.npmrc com a configuração para os pacotes do escopo @integracoes serem buscados no registro corporativo, além de incluir as credenciais de usuário para acessar o registro NPM corporativo localizado em https://artifactory.stf.jus.br/artifactory/api/npm/npm-stfdigital/.

A partir de agora os comandos npm e yarn vão utilizar o registro NPM corporativo para buscar os pacotes corporativos do STF Digital.

Faça download das dependências do contexto

Como já foi dito anteriormente, utilizaremos o NPM como gerenciador de pacotes. Mas antes de instalá-los, o usuário deve ter acesso a todos os artefatos que são utilizados. Esse contexto, especificamente, possui uma dependência transitiva com um repositório de artefatos licensiado. Por isso, é necessário autenticar-se nele para depois baixar os artefatos conforme configuração do item anterior.

Feito isso, no terminal utilize o NPM para instalar os pacotes necessários:

$ npm install

Atualize as imagens dos outros contextos a partir do Docker Hub/Registro Corporativo

Para desenvolver para um contexto específico, é recomendável manter sempre as imagens locais dos outros contextos sempre atualizadas. Para atualizá-las, basta executar o comando logo abaixo. Execute esse comando com frequência diária pelo menos ou quando for notificado (via Slack, por exemplo) de que uma imagem foi atualizada.

$ docker-compose pull

Depois de executar o comando acima, é preciso sempre executar o comando da próxima seção para que os serviços em execução estejam sempre atualizados.

Execute os containers docker dos outros contextos

$ docker-compose up -d

A medida que os serviços forem iniciados, eles serão registrados automaticamente no serviço de discovery. Acesse http://integracoes-discovery:8500 para acompanhar o registro dos serviços. Quando todos estiverem registrados, você deverá ver a tabela como no exemplo abaixo:

Discovery Instances

Importe o projeto no Eclipse

  1. Clique com o botão direito na view Package Explorer
  2. Clique em Import
  3. Clique em Maven/Existing Maven Projects
  4. Clique em Next
  5. Clique em Browse
  6. Selecione o diretório do projeto (ex: registro)
  7. Clique em Finish. É normal demorar na primeira execução

Confira versão do JDK do projeto

Para o tratamento correto do código do projeto, é necessário que a versão do JDK que o projeto foi desenvolvido seja a mesma que a IDE está utilizando. Para checar isso:

  1. Clique em Project/Properties
  2. Clique em Java Compiler
  3. Se a versão do JDK, descrita em Compiler compliance level não for 12, você deverá alterá-la para 12.
  4. Clique em Apply and Close

  5. Clique em Window/Preferences

  6. Clique em Java/Compiler.
  7. Confira se a versão do JDK também consta como 12, se não, você deverá alterá-la para 12.
  8. Clique em Apply
  9. Clique em Java/Installed JREs
    A versão que deve estar selecionada é a versão do JDK que foi instalada no passo anterior dessa documentação. Se não for o caso:
  10. Clique em Add
  11. Selecione Standard VM e clique Next
  12. Ao lado do campo JRE home, clique no botão Directory e navegue e selecione a pasta onde foi instalado o JDK (ex: C:\Program Files\Java\jdk-12.0.2)
  13. Clique em Finish e na tela Java/Installed JREs selecione a versão do JDK que foi adicionada.
  14. Clique em Apply and Close

Baixe os artefatos do repositório remoto para o repositório local utilizando Maven

  1. Acesse http://build/artifactory (ou http://build.stf.jus.br/artifactory se estiver acessando pelo VPN)
  2. Realize login com seu usuário e senha de rede
  3. Clique no seu usuário no canto superior direito da tela
  4. Preencha o campo Current Password com a sua senha de rede e clique em Unlock
  5. Copie o trecho de código que irá aparecer
  6. Vá em C:\Users\username\”.m2”
  7. Crie um arquivo xml chamado “settings.xml” com o seguinte conteúdo, alterando o usuário (username) e senha (password) e caso esteja acessando pelo VPN substituir http://build/artifactory/repo por http://build.stf.jus.br/artifactory/repo:
<?xml version="1.0" encoding="UTF-8"?>
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0
http://maven.apache.org/xsd/settings-1.0.0.xsd">

<mirrors>
<mirror>
<id>repo-unificado</id>
<name>repo-unificado</name>
<url>http://build/artifactory/repo/</url>
<mirrorOf>central</mirrorOf>
</mirror>
</mirrors>
<profiles>
<profile>
<id>default-repository</id>
<activation>
<activeByDefault>true</activeByDefault>
</activation>
<repositories>
<repository>
<id>repo-unificado</id>
<name>Repositorio CSOL unificado</name>
<url>http://build/artifactory/repo/</url>
<snapshots>
<enabled>true</enabled>
</snapshots>
<releases>
<enabled>true</enabled>
</releases>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>repo-unificado</id>
<name>Repositorio CSOL unificado</name>
<url>http://build/artifactory/repo/</url>
</pluginRepository>
</pluginRepositories>
</profile>
</profiles>
<servers>
<server>
<id>repo-unificado</id>
<username>seu_usuario</username>
<password>sua_senha</password>
</server>
</servers>
</settings>
  1. Abra o Spring Tool Suite
  2. No Package Explorer, clique com o botão direito do mouse na raiz do projeto (autosprocessuais-registro, por exemplo)
  3. Clique em Maven/Update Project
  4. Marque a opção “Force Update of Snapshots/Releases”
  5. Selecione o projeto e clique em OK

Configure o profile da aplicação

  1. Abra a view Boot Dashboard
  2. Clique com o botão direito no projeto do contexto (local/autoprocessuais-registro, por exemplo)
  3. Clique em Open Config
  4. Preencha o campo Profile com development
  5. Clique em Apply, depois em Close

Execute a aplicação back-end pelo Eclipse

  1. Abra a view Boot Dashboard
  2. Clique com o botão esquerdo no projeto do contexto (local/autoprocessuais-registro, por exemplo)
  3. Clique em (Re)start

Instale as dependências de front-end do projeto

Execute o seguinte comando a partir do diretório do projeto para instalar as dependências de front-end:

$ npm install

Execute a construção e watch do código do front-end

  1. Abra um terminal Git Bash
  2. Acesse a raiz da aplicação (por exemplo, C:\Users\Seu_Usuario\dev\STF\registro)
  3. Execute um dos seguintes comandos:
    Apenas monitora e constrói os recursos de frontend
    $ gulp watch

Monitora os recursos de frontend e roda um browsersync, recarregando a página toda vez que uma alteração for feita.

$ gulp serve:dev

Não se assuste com a quantidade de erros. São pendências técnicas mas não vão prejudicar a execução do projeto

Acesse a aplicação pelo browser

Acesse a aplicação no browser pelo endereço https://docker:8443/. Caso tenha iniciado a construção de front-end pelo comando gulp serve:dev, poderá acessar pelo endereço http://localhost:3000, para ter o browsersync sincronizando os recursos de front-end.

  1. Para fazer o login, use o usuário registrador por exemplo, com uma senha qualquer (não nula).