Utilizando Travis CI para fazer Continuous Deployment de suas aplicações no GitHub Pages

Há um tempo venho usando o GitHub Pages para fazer a hospedagem dos meus projetos, mas quando comecei a utilizar os frameworks e libs como Angular, Vue e React, o momento do deploy no GitHub Pages começou a se tornar uma atividade um tanto quanto dolorosa.

Depois de vasculhar alguns modos de tornar o deploy de uma app construída com esses frameworks uma atividade mais automatizada, encontrei uma maneira legal e bastante funcional, então, a ideia desse artigo é mostrar uma maneira simples para você começar a brincar com Continuous Integration nos seus projetos pessoais.

Há diversos conteúdos pela internet que mostram como resolver esse problema, eu criei esse artigo com base no do Tomas Trajan, caso queiram ler clique aqui

Pré Requisitos

• Node instalado
• Git Instalado
• Conta no GitHub
• Conta no Travis (você pode usar a mesma conta do GitHub)

Para este tutorial, irei usar o create react app apenas para facilitar a criação do app, mas o foco é mostrar como configurar o travis e fazer o deploy no github pages, você pode utilizar essa mesma técnica para fazer deploy de qualquer outro projeto client-side.

Criei um repositório para mostrar o passo a passo até o deploy da nossa aplicação Leocardoso94/deploy-to-github-pages

Configurando o Travis CI para o nosso projeto

O Travis CI é um serviço web de Integração Contínua na nuvem integrado com o GitHub. Ele é gratuito para repositórios públicos(travis-ci.org) e pago para repositórios privados(travis-ci.com).

Primeiro de tudo precisamos habilitar o Travis para o nosso repositório

A seguir devemos adicionar duas variáveis de ambiente nas configurações do nosso projeto, GH_TOKEN e GH_REF que serão utilizadas para fazer o deploy da nossa aplicação

GH_REF e GH_TOKEN

O valor do GH_REF é basicamente github.com/<username>/<repository>, por exemplo github.com/Leocardoso94/deploy-to-github-pages.

Por outro lado, GH_TOKEN é gerado na sua conta do GitHub https://github.com/settings/tokens

Podemos gerar apenas um único token e reutilizá-lo para todos os projetos que utilizem o Travis CI ou podemos escolher gerar um novo token sempre que estamos adicionando um novo projeto. Esta pode ser uma solução melhor, porque é impossível visualizar o token quando você deixa a página, então você deve armazená-lo em outro lugar no caso de querer reutilizá-lo no futuro.

Criando um token

No gif abaixo mostro como é simples criar um token de acesso, lembre-se de selecionar a opção de repo ao gerar o token, depois disso copie o código gerado e coloque nas variavéis de ambiente do Travis CI.

Inciando o projeto

Primeiro vamos criar nossa app, para isso necessitamos instalar o create-react-app globalmente.

npm install -g create-react-app
create-react-app deploy-to-github-pages

Após isso, precisamos criar dois arquivos e adicioná-los na raiz do nosso projeto

.travis.yml

Nesse arquivo você instrui o Travis CI ao que ele deve fazer com seu projeto e, você pode utilizar configurar dos mais diversos modos possíveis dependendo do seus caso de uso e da linguagem que você for utilizar. Para mais informações leia a documentação do Travis Ci.

Para o nosso projeto a configuração será essa:

arquivo .travis.yml

deploy.sh

Precisamos criar também o script que irá realizar o deploy no GitHub Pages, ele é basicamente um Shell script que realiza o build do nosso projeto e, após o build ser finalizado ele faz o push dos arquivos gerados para a branch gh-pages.

Scriptpara fazer o deploy no gh-pages

Por padrão, o aplicativo Create React App produz uma compilação, supondo que sua aplicação esteja hospedada na raiz do servidor.
Para substituir isso, temos que especificar a página inicial no package.json, por exemplo:

"homepage": "  https://<usuario-do-github>.github.io/<nome-do-repositorio>",

Agora, apenas precisamos subir as alterações para o nosso repositório no github para que nosso build comece!

Pronto!

Agora sua aplicação irá fazer o deploy a cada push na branch master. A partir daí você pode adicionar outros steps como testes ou lints na configuração do Travis para assegurar que suas alterações só sejam publicadas caso passem nos seus testes.

Tenho um projeto no GitHub chamado Free-Courses que utiliza essa mesma ideia, e funciona muito bem, pois a cada curso que é adicionado o processo já é iniciado e, caso passe por todas as validações as, alterações são publicadas em produção.

Qualquer dúvida, dica e/ou feeedback podem entrar em contato.

Github: https://github.com/leocardoso94
Linkedin: https://www.linkedin.com/in/leocardoso94/
Twitter: https://twitter.com/Leocardoso94_