JSagon NodeJS Framework

Construa aplicações eficientes e escaláveis de maneira simples e rápida.

Deploy Heroku

Introdução

No final deste artigo você será capaz de publicar sua aplicação no Heroku, além de entender conceitos importantes e ferramentas.

Adaptações e modificações necessárias

Para que a aplicação funcione corretamente no Heroku, precisaremos fazer algumas modificações em nosso código. As modificações serão bem poucas, porém de extrema importância, e são requeridas para um funcionamento adequado na plataforma em questão.

Primeiramente, em nosso arquivo dev/src/server.js faremos com que a aplicação verifique se existe alguma Porta informada entre as variáveis de ambiente do NodeJS.

Faremos a seguinte modificação no código de inicialização.

    import { JSagon } from '@jsagon/core'
    import configApp from './config/app.config'
    
    JSagon.create(configApp).listen(process.env.PORT || 3000, () => {
      console.log('Server online!')
    })

O process.env contém as variáveis de ambiente injetadas em tempo de execução, normalmente na inicialização do NodeJS. No caso em questão, quando o Heroku inicializar a aplicação Node, ele passará uma porta específica no qual a aplicação deverá se conectar.

Todos os arquivos da pasta dev, no qual de fato é realizado as implementações, faz parte da área do ambiente de desenvolvimento. Quando mandamos o projeto para o Heroku, queremos que a versão final e transcompilada do projeto seja enviada. Para isso precisaremos rodar o seguinte comando:

npm run build
Finalizado a execução do comando anterior, uma pasta de distribuição (dist) terá sido gerada.

Git - Controle de Versão

Como pré-requisito para utilização do Heroku, precisaremos antes instalar o Git. Git é um sistema de controle de versão gratuito muito eficiente, e bastante utilizado.

Para realizar o download, basta acessar o link e baixar de acordo com o seu sistema operacional. https://git-scm.com/downloads.

Após a instalação, rode o comando a seguir no terminal de sua preferência para conferir se a ferramenta foi instalada corretamente.

git --version

Se o terminal executar e mostrar a versão instalada do git, significa que podemos prosseguir.

Abra o terminal na pasta do projeto. E execute o seguinte comando.

git init

Desta forma, estaremos inicializando o git e criando as configurações de repositório para o nosso projeto. Um repositório git basicamente contém uma coleção de arquivos de diferentes versões do projeto.

Antes de versionarmos de fato o projeto em si, precisaremos modificar o arquivo na raiz de nosso projeto chamado ".gitignore". Este arquivo é utilizado para definir pastas e arquivos que não gostaríamos de versionar, arquivos que serão ignorados, como por exemplo a pasta node_modules, visto que o nosso arquivo package.json já contém toda as informações de dependências e configurações da aplicação. Porém, atualmente a pasta dist também se encontra em nosso arquivo, precisaremos tirar o seu nome do arquivo para podermos enviar para o Heroku.

Desta forma, o arquivo .gitignore ficará da seguinte maneira:

node_modules

Pronto, agora podemos iniciar o versionamento em si.

Para fins de aprendizado e controle, rode o comando em seu terminal:

git status

Este comando é responsável por mostrar o status de versionamento do projeto. Os nomes em vermelho sinaliza que os novos arquivos, ou aqueles que foram modificados, ainda não foram adicionados ao estágio de confirmação.

Atenção: Certifique-se de que a pasta node_modules não está listada.

Para adicionarmos os arquivos pendentes, em vermelho, no diretório ativo. No terminal e na raiz do projeto, execute o seguinte comando.

git add .

Este comando adicionará todos os arquivos pendentes, no diretório ativo, para efetivar as modificações e novos arquivos adicionados, para controle de versão.

Rode novamente o comando git status. Os nomes de cor verde sinaliza que os arquivos estão confirmados para versionamento. Nesse estágio, as modificações e controle de versão não foram efetivamente realizados.

Agora, registraremos as mudanças de fato criando uma versão para elas. Rode o seguinte comando:

git commit -m "Commit inicial"

O comando anterior efetiva a confirmação das modificações, assim registrando ela no controle de versão.

Voltaremos posteriormente com mais um comando, agora, daremos início ao Heroku.

Heroku

O Heroku é uma plataforma que funciona como serviço, fornecendo aos desenvolvedores um ambiente que possibilita facilmente disponibilizar uma aplicação, que vai desde aplicações apenas para testes até aplicações mais robustas.

Para a nossa aplicação, faremos o uso da versão gratuita, que atende facilmente as nossas implementações. Mas antes de qualquer coisa, é preciso baixar o cliente do Heroku para a sua máquina. O download pode ser feito no link a seguir, escolha de acordo com o seu sistema operacional. De preferência, utilize as opções principais, as primeiras.

https://devcenter.heroku.com/articles/heroku-cli#download-and-install.

Após realizada a instalação, para saber se tudo ocorreu corretamente, rode o comando a seguir:

heroku --version

Deverá ser apresentado a versão do Heroku instalado.

Agora precisaremos criar uma conta na plataforma. Acesse o link a seguir e preencha o formulário. https://signup.heroku.com.

Após a criação da conta, será enviado um link para o seu e-mail ao qual você deverá confirmar.

Seguindo todos os passos, você deverá ver uma tela similar a essa:

Clique no botão para prosseguir, e na próxima tela, aceite os termos de uso.

Sua tela inicial então será apresentada provavelmente como a seguir:

Agora voltemos para o projeto local. Abra o terminal na pasta do projeto, e execute o seguinte comando.

heroku login

Ao executar esse comando, será pedido que digite qualquer tecla para continuar, faça isso. Em seguida, o sistema abrirá o browser pedindo a sua autenticação. Entre com a conta que acabou de criar. Finalizado, volte para o terminal. Se o login ocorrer corretamente, você verá como a imagem a seguir.

Agora, criaremos a aplicação no Heroku com o comando heroku create e o nome da aplicação desejada como no exemplo a seguir. É importante que esse comando seja executado na pasta do projeto. Troque o nome do projeto para um de sua preferência. Esse nome deverá ser único para a aplicação, caso se escolha um nome já utilizado, será retornado um erro.

heroku create tutorial-node-projeto-website

OBS.: Depois da criação do tutorial, o nome do projeto foi alterado para jsagon-framework-example e a url foi alterada para https://jsagon-framework-example.herokuapp.com/

Duas urls serão apresentadas no resultado da execução do comando, a primeira url é o caminho do seu projeto a ser acessado no browser e compartilhado. O segundo, é a url de versionamento a ser utilizada via Git, pela qual mandaremos o projeto local para o Heroku.

Para conferir se o caminho já foi atribuído ao Git, rode o seguinte comando.

git remote -v

Este comando checa as urls remotas atribuídas ao projeto. Dois registros de urls deverão ser apresentados, igualmente ao caminho do git da criação do Heroku.

Agora, para subir o projeto para o Heroku. Rode o seguinte comando:

git push heroku master

O git push envia as modificações "comitadas" para a versão master, principal, do projeto no Heroku. O resultado será como na imagem a seguir:

Agora, no browser, acesse a url do projeto de acordo como você a criou e o Heroku informou. No caso deste tutorial, a url é https://jsagon-framework-example.herokuapp.com/.

OBS.: Depois da criação do tutorial, o nome do projeto foi alterado para jsagon-framework-example.

Atenção: Quando acessado pela primeira vez, o carregamento da aplicação irá demorar, mas isso é normal. É devido a plataforma estar instalando as dependências de produção e inicializando a aplicação.

Caso ocorra algum erro, verifique atentamente os passos anteriores. Se o erro persistir e estiver difícil de solucionar, entre em contato que será retornado assim que possível.

Bom, é isso. Parabéns pelo deploy!👏

Qualquer dúvida, entre em contato por um dos meios disponíveis.