Entrega e integração contínua de aplicações Vue

E, depois que tudo esteja bem alinhado entre os times (devops é sobre colaboração!), podemos configurar a pipeline em si.

Nesse exemplo, nós vamos utilizar o Github Pages. Mas vale ressaltar que existem ferramentas de todo o tipo que cobrem a grande maioria dos cenários (Circle CI, Gitlab, Azure Pipelines, etc). O mais importante aqui é entender os conceitos.

Utilizando uma aplicação recém criada, precisamos customizar o caminho para a pasta pública. Isso se faz necessário para que a aplicação funcione corretamente no Github Pages e é muito simples de ser feita:

Criamos um arquivo chamado vue.config.js na raiz do projeto, com o seguinte conteúdo:

Assim, quando gerarmos os builds, a importação dos scripts será algo parecido com:

Com o projeto pronto e configurado, vamos criar um arquivo chamado deploy.yml dentro de .github/workflows, desse jeito:

Confira o arquivo na íntegra nesse gist

Passo a passo, vamos entender o que essas configurações estão fazendo. Primeiro, definimos o nome da ação (Github Action) que será executada.

Depois, configuramos o evento que vai servir de gatilho para a ação. No nosso caso, quando fizemos PUSH para a branch develop. Um outro exemplo de gatilho é o pull_request

A seguir, configuramos as tarefas(jobs) do deploy. Um dos passos, por exemplo, pode ser a execução dos testes de unidade.

Também informamos qual container será utilizado:

E então vamos para os passos da publicação. Nos dois primeiros passos estamos utilizando Github Actions do marketplace, para facilitar o nosso fluxo de deploy saiba mais aqu.

Com o ambiente preparado, seguimos com a instalação das dependências e a geração dos arquivos compilados da nossa aplicação:

E, por fim, configuramos uma ação (também do marketplace) para enviar os arquivos de build para nossa branch master:

Agora, ao fazermos git push para a branch de develop, podemos acompanhar a nossa recém criada pipeline:

No fim, um último ajuste para configurar a Github Page:

Assim que salvarmos, apontando para a raiz da nossa branch master (configuramos isso no nosso último passo do build), teremos acesso ao link e finalmente temos a aplicação rodando:

O endereço da página é https://[seu-nome-de-usuario].github.io/[nome-do-projeto]/

Agora, imagine todas as técnicas combinadas:

Integração contínua, testes automatizados (de unidade, de integração, etc…) e deploy contínuo?
Podemos fazer pequenos deploys a qualquer momento, configurando, por exemplo, que caso algum dos testes falhe, a publicação será interrompida.

Agora, podemos ter todo o ciclo funcionando.

Gostou do conteúdo e quer saber mais? Então eu te recomendo esses dois cursos com o instrutor Nico Steppat de Integração Contínua e Entrega Contínua que explora maravilhosamente bem esses conceitos. E, falando específicamente de Vue, temos o curso Vue.js: Testes unitários automatizados com Jest e o artigo Desmistificando testes de unidade no Vue sobre testes de unidade.

Vida longa e próspera!