Automatizando aplicações Node.js com Jenkins - ZeTheGreat/iotNodeJS GitHub Wiki

Automatizando aplicações Node.js com Jenkins

Este artigo irá abordar a integração entre uma aplicação node.js com react e o Jenkins utilizando docker.

Rodando a imagem do Jenkins

Nesse passo utilizaremos uma imagem Jenkins Blueocean, para baixa-la utilize o seguinte comando:

docker run \
  --name jenkins-node \
  --restart always \
  -u root \
  -p 8080:8080 \
  -v jenkins-data:/var/jenkins_home \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v "$HOME":/home \
  nexusteambr2/jenkins-server-nexus

Onde:

  • docker run: comando para tornar uma imagem em um container.
  • --name: atribuir um nome amigável ao container.
  • --restart always: container será reinicialiazado o inicializar o sistema.
  • -u root: faz login com o usuário root.
  • -p 9090:8080: mapeia a porta externa (máquina host) para a porta interna (container)
  • -v : mapeia volume de memória para o container, no caso está mapeando as rotas jenkins-data:/var/jenkins_home, /var/run/docker.sock:/var/run/docker.sock, "$HOME":/home
  • jenkins/blueocean: nome da imagem a ser levantada.

Muito provavelmente esta imagem não estará baixada, o docker ira baixá-la

Acessando o container Jenkins

Se você deseja acessar o docker pela linha de comando, é simples:

    docker exec -it jenkins-node bash

Configurando o Jenkins

Após levantar o container, o jenkins estará acessível através do link: http://localhost:8080

Inicalizando com senha de administrador

Ao acessar o link, será pedido uma senha de administrador que é printada no terminal, volte ao terminal e pegue a senha. Caso não consiga, digite o seguinte comando:

    docker exec <id> cat /var/jenkins_home/secrets/initialAdminPassword

onde deve ser trocado pelo ID do container.

Personalizando o Jenkins com plugins

Após ter entrado com a senha de administrador, você será direcionado para a tela de intalação de plugins

Clique em: Install suggested plugins.

Depois, será mostrado um progresso de instalação de plugins, aguarde.

Criando um usuário administrador

Quando os plugins terminarem de instalar, você será redirecionado para uma página de criação de usuário, preencha com suas credenciais e clique em Save and Finish.

Quando a página estiver pronta, clique em Start using Jenkins

Reiniciando o Jenkins

Para que possamos dar continuidade, é necessário reiniciar o Jenkins para isso, vá até o terminal que está rodando o container e dê um ctrl + C.

Após, rode o mesmo docker run da seção acima, assim que o processo terminar, acesse http://localhost:8080 e entre com sua conta.

Ao reiniciar, se a imagem tiver alguma atualizações, elas serão instaladas

Configurando o projeto

Para fins didáticos, será utilizado um projeto node + react simples, mas fique a vontade para testar com o que você se entir confortável.

Fork no projeto

Entre em sua conta do Github e dê um fork neste projeto: simple-node-js-react-npm-app.

Git clone no projeto

Após o fork, entre em seu repositório e clique no botão verde 'Clone or download', copie o link.

Em seu terminal, dirija-se à uma pasta de seu interesse, algo como:

    cd /home/user/projetos

Onde user deve ser trocado por seu usuário da máquina.

Digite o seguinete comando:

    git clone https://github.com/seu-user/simple-node-js-react-npm-app.git

onde seu-user deverá ser substituído por seu usuário do Github.

O comando acima irá clonar o projeto do Github em sua pasta local.

Criando um pipeline no Jenkins

Com o projeto clonado para um diretório local, volte ao Jenkins.

  • Clique em novo job, na parte superior esquerda da tela;
  • Nomeie sue novo job;
  • Escolha pipeline;
  • Clique em ok;
  • Clique na aba de pipeline;
  • Em Definition escolha Pipeline script from SCM;
  • Em SCM escolha Git
  • Em Git Repository coloque: https://github.com/seu-user/simple-node-js-react-npm-app.git (remoto) ou
    /home/projetos/simple-node-js-react-npm-app (local)

Criando o Jenkinsfile na raiz do projeto

Abra o projeto em seu editor favorito e na raiz, crie um arquivo chamado Jenkinsfile. Dentro deste arquivo coloque:

    pipeline {
        agent {
            docker {
                image 'node:6-alpine' 
                args '-p 3000:3000'
            }
        }
        environment {
            CI = 'true'
        }
        stages {
            stage('Build') { 
                steps {
                    sh 'npm install' 
                }
            }
            stage('Test') {
                steps {
                    sh './jenkins/scripts/test.sh'
                }
            }
            stage('Deliver') {
                steps {
                    sh './jenkins/scripts/deliver.sh'
                    input message: 'Finished using the web site? (Click "Proceed" to continue)'
                    sh './jenkins/scripts/kill.sh'
            }
            stage('Publish') {
                steps {
                   withCredentials([string(credentialsId: 'token-jenkins-server', variable: 'your-github-token')]) {
                        sh './jenkins/scripts/publish.sh' 
                } 
            }
        }

        }
    }
   
}

Explicando o Jenkinsfile

Este arquivo é lido pelo Jenkins assim que você pede para o Jenkins rodá-lo.

Este arquivo basicamente:

  • Cria um pipeline;
  • Cria um agente;

Este agente terá o trabalho de criar um docker container Node para executar nossa aplicação e deixá-lo disponível na porta 3000.

  • Diz que o ambiente é de CI.

Avisa ao Jenkins que nosso ambiente de desenvolvimento será de Integração Contínua.

  • cria estágios

Estágios possuem passos, que devem ser seguidos para que aquele estágio corra como esperado.

No primeiro estágio Build está destinado à construção da aplicação, ou seja, instalar todas as dependências necessárias, o passo a ser seguido é o npm install.

No segundo estágio Test é destinado á testes da aplicação, os comandos a serem seguidos estão dentro de ./jenkins/scripts/test.sh';

No terceiro estágio Deliver é onde sua aplicação é iniciada para avaliação do administrador, você poderá acessá-la pelo http://localhost:3000 quando este passo estiver em modo de espera. Modo este que aguarda a entrada do administrador para que o pipeline seja concluído.

No quarto estágio,Publish, é quando enviaremos para o Github passando da branch de desenvolvimento para a branch de produção.

Para entender mais sobre este passo, leia: Criando uma Imagem Docker com Variáveis de Ambiente

Este estágio, aciona um arquivo que, roda os arquivos com comandos git.

Salvando o Jenkinsfile

Ao terminar a edição do arquivo salve e commite no repositório git, para isso:

git add .
git commit -m "Adicionado Jenkinsfile"

Se você estiver utilizando um repositório remoto no Github, adicione este passo:

git push

Jenkins funcionando

Após ter feito o commit, volte ao Jenkins e em This job has not been run clique em Run.

Você poderá acompanhar o processo ao clicar em Open em um popup que aparece rapidamente no canto inferior direito da tela.

O Jenkins irá rodar os três estágios um atrás do outro, validando-os. No último estágio é possível acessar a aplicação para análise, basta verificar o log. O Jenkins só ira parar de rodar quando você clicar em Proceed na UI que aparece logo abaixo do log de execução.

Adaptado de: Build a Node.js and React app with npm

Integração da aplicação do Jenkins com o Github

Crie um repositório no Github, se caso você já tiver um pode pular os passos do "Repositório" Se você já tem algum arquivo pronto para colocar no repositório, deixe a opção de "criar uma README.md" desabilitada.

Se for criar um repositório do zero, deixe a opção de "criar uma README.me" habitada.

Repositório

Ter configurado a máquina para acessar

git config --global user.email <EMAIL>
git config --global user.name <NOME>

Criando um repositório sem ter nenhuma aplicação prévia

Crie o repositório com o "README.md" e no cmd digite:

git pull <LINK_DO_REPOSITÓRIO>

Após feito isso, gerando os arquivos, para enviar basta digitar:

git add .
git commit -m "<COMENTÁRIO>"
git remote add <NOME_DO_REPOSITÓRIO> <LINK_DO_REPOSITÓRIO>
git push --set-upstream <NOME_DO_REPOSITÓRIO> master

Criando um repositório tendo arquivos prontos

Crie o repositório sem o "README.md" e no cmd digite:

git add .
git commit -m "<COMENTÁRIO>"
git remote add <NOME_DO_REPOSITÓRIO> <LINK_DO_REPOSITÓRIO>
git push --set-upstream <NOME_DO_REPOSITÓRIO> master

Configurando o GitHub para Webhook

Abra o repositório que deseja automatizar, vá em configurações.

Selecione "webhook".

Adicionar "webhook".

Nesta próxima janela, no "Payload URL", digite o local onde seu "Jenkins" está instalado e acrescente "'/github-webhook/'", por exemplo:

http://meu_servidor_jenkins.com.br:2030/github-webhook/

Selecione em "Content type", a opção "application/json".

Após isso, selecione "Let me select individual events"

e marque as opções: "pull requests" e "pushes", e depois salve as configurações.

Configurando o Jenkins para webhook

Abrindo o Jenkins abra um "new job" ou "new item" (como no caso apresentado).

selecione "pipeline".

Na proxima tela, clique em Build triggers, marque o "GitHub hook trigger GITScm polling".

Após isso abra o "Pipeline" na parte superior e na "Definition", selecione *"Pipeline script from "SCM", em "SCM", selecione "Git", e após isso, coloque a URL do repositório, no lugar requisitado e nas credenciais selecione o perfil conectado, após salvar, está pronto a configuração.

Em "Repository URL" coloque a URL do seu repositório.

Para saber qual é, vá no GITHUB e selecione a aba "Code", em seguida selecione o botão "Clone and Download", para então selecionar a opção "Use HTTPS". Selecione então a ícone de copiar ou copie o texto da URL fornecido, como por exemplo:

https://github.com/seu_repositorio_git/nome_do_seu_projeto.git

Em "Credentials", selecione "Add Jenkins" e entre com o seu login e senha do GitHub.

⚠️ **GitHub.com Fallback** ⚠️