Publicando suas aplicações com o Heroku

PorLeonardo Trindade

Publicando suas aplicações com o Heroku

Olá, tudo bem?
Você sabia que é possível hospedar suas aplicações na nuvem, a fim de testá-las gratuitamente de maneira simples e prática? Vamos falar de algo um pouco mais completo que o GitHub Pages. Este PET-Redação, assim, traz aos holofotes a plataforma Heroku!

O que é o Heroku?

O Heroku é uma plataforma na nuvem, que utilizando-se do conceito PaaS (Plataform as a service) permite que você faça deploy de suas aplicações de maneira rápida e prática para a nuvem.
O objetivo da plataforma é auxiliar desenvolvedores a manterem o foco diretamente na produção de suas aplicações. Com ela, é possível colocar online, realizar testes e tornar públicas as suas aplicações enquanto elas ainda encontram-se em estágio de desenvolvimento. Sendo, desta forma, uma ótima ferramenta tanto para testes fechados como também para abertos, além de proporcionar a exibição de protótipos funcionais para os seus clientes.
Em relação a desenvolvimento, o Heroku se destaca pela sua facilidade e suporte variado para hospedar as suas aplicações na internet. A plataforma possui suporte para diversas linguagens de programação como Node.JS, Ruby, Java, PHP, Python e Go.
Através do Heroku, com poucas linhas de código e pequenas configurações, você consegue hospedar e tornar online o seu projeto.
Agora que você já sabe o que é o Heroku e para que serve, nós iremos realizar um guia prático para você dar o seu primeiro “Hello World!” na plataforma. Para isso, utilizaremos o Node.JS juntamente do framework Express.

First deploy: Hello World!

Bom, para prosseguir neste guia, algumas coisas são necessárias:

1º – Tenha instalado e configurado o Git em sua máquina.
Para o seu funcionamento, o Heroku utiliza o Git, que é um sistema de controle de versões distribuídas. A seguir temos links de onde é possível fazer download e realizar a configuração do local do seu Git.

Instalação: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
Configuração: https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup

 

2º – Registre-se no site do GitHub:

https://github.com/

 

3º – Certifique-se de ter em sua máquina o npm e o Node.JS instalados.
O npm é distribuído juntamente com o Node.JS, logo, você só precisa fazer o download e instalação do Node em sua máquina.

https://nodejs.org/en/

 

4º – Registre-se no site do Heroku:

https://www.heroku.com/

 

5º – Faça download e instale o Heroku Command Line Interface (CLI).

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

A instalação do Heroku CLI é um processo simples. Para verificar se a instalação deu certo, abra o Prompt de Comando do seu computador e insira o seguinte comando:

heroku –help

Caso a instalação tenha ocorrido conforme o esperado, será retornada uma lista completa com todos os comandos do Heroku.

 

Configurando o Heroku

Agora que você já atendeu todos os pré-requisitos, vamos vincular a sua máquina aos servidores da Heroku. Para isso, acesse o prompt de comando e insira o seguinte comando:

heroku login

Ao inserir heroku login, você será redirecionado ao site do Heroku para autenticar a sua conexão.

Agora, efetuado o login, vamos começar o seu primeiro projeto. Para isso, crie uma pasta destinada ao seu projeto.
Após criar o diretório do seu projeto, acesse-a utilizando o Git Bash e insira o seguinte comando:

npm init

O comando npm init irá criar um arquivo package.json que contém informações básicas, entretanto, fundamentais de módulos Node.JS a serem utilizados no seu projeto. Aliás, é ali onde toda a mágica do Heroku acontece.
Para hospedar o seu app no Heroku, é necessário que você edite este arquivo, acrescentando um comando de execução para que o Heroku compreenda que a sua aplicação está utilizando Node.JS e a disponibilize online.
Para isso, abra o arquivo package.json com um editor de texto e acrescente dentro de scripts o seguinte comando:

“start”:”node app.js”,

Com isso, você estará declarando ao Heroku que o main da sua aplicação será o arquivo app.js do seu projeto.

Agora, vamos acrescentar o Express ao seu projeto. Para isso, utilizando a Git Bash no diretório do seu projeto, insira o seguinte comando:

npm install express

Após a instalação do express, você perceberá que o seu projeto contará com mais arquivos, e o seu arquivo package.json atualizará com o nome da nova dependência.

Criando e configurando app.js

Agora que você instalou já instalou o Express, crie um arquivo com o nome de app.js no diretório do seu projeto. Será nele que iremos configurar e construir a nossa aplicação.

Exemplo de app.js contendo Hello World.

Neste PET-Redação não irei explicar linha a linha do código, visto que estou utilizando o Node e estou apenas ensinando a utilizar a plataforma Heroku. Logo, não me atentarei a explicar os comandos relacionados ao Express. Na imagem acima, basicamente estamos criando as definições para um servidor local do Node.JS que retorna um “Hello World!” quando acessado.
Como o arquivo que você criou ainda não está hospedado no Heroku, você pode ligar o servidor local utilizando o comando “node app.js” no prompt de comando do seu computador e acessando no navegador através do endereço “http://localhost:3000/”.

O que você deve saber do app.js para hospedar a sua aplicação no Heroku

Quando você inicia um servidor local, não é necessário preocupar-se com endereços e porta para a sua aplicação. Entretanto, quando você envia a sua aplicação ao Heroku, é complicado você atribuir, por exemplo, a porta 3000 como default. Para evitar problemas de disponibilidade de porta com o Heroku, é necessário que você prepare o seu app.js. No código disponibilizado na imagem, isto não será um problema, entretanto, lembre-se de sempre configurar uma variável para receber a variável ambiente process.env.PORT, a fim de tornar dinâmico o processo de criação e execução do servidor. No código que eu disponibilizei, caso hospedado no Heroku, o servidor será iniciado na porta pré-definida pelo Heroku. Caso eu tente executar o servidor localmente, ele será iniciado na porta 3000.

Criando um repositório no GitHub

Bom, neste momento do guia já possuímos um servidor local que está funcional. Agora, vamos criar um repositório no GitHub para que possamos adicioná-lo posteriormente ao Heroku.

Exemplo de criação de repositório no GitHub

Após criar o repositório, basta atrelar ele ao que já temos localmente em nosso computador. Para isso, utilizando a Git Bash, insira:

git init
git remote add origin URL_DO_SEU_REPOSITORIO_NO_GITHUB
git add .
git commit -m “First commit: Heroku”
git push -u origin master

Hospedando o seu app no Heroku

Agora, vamos finalmente hospedar nosso app Heroku. Para isso, dentro da pasta do seu projeto, utilizando a Git Bash, insira o seguinte comando:

heroku create

Após inserir o comando no prompt, será exibido a você um link, que será o do seu app. Neste link ainda não constará nada do que nós criamos anteriormente e é justamente isso o que iremos resolver agora.
Para upar a nossa aplicação para o Heroku, utilize o seguinte comando:

git push heroku master

Pronto, a sua aplicação já está hospedada! Para acessar, acesse o URL da sua aplicação que surgiu no prompt de comando ou insira o comando “heroku open” dentro do diretório da sua aplicação.

Toda vez que houver necessidade de atualizar a sua aplicação, dê um novo commit e um novo push nos arquivos.

Bom, se você chegou até este trecho da leitura, podemos dizer que você já sabe ao menos o básico sobre o Heroku.
No mais, me disponibilizo a quem queira conversar e trocar umas ideias sobre o assunto deste PET-Redação. Obrigado pela leitura! 🙂

 

Feedback e publicações anteriores

Caso você tenha interesse em ler as edições anteriores do PET Redação ou conhecer um pouco mais sobre o trabalho desenvolvido pelo PET-SI não deixe de conferir nossa página. Antes de você partir gostaríamos também de pedir que você nos ajude, respondendo o formulário de avaliação abaixo. Esse formulário nos ajuda a moldar nossas atividades para melhor atender os nossos leitores.

 

Comentários não são aceitos para este Post!!!