Implantar o seu primeiro aplicativo Heroku

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

  • Implantar um aplicativo no Heroku com um botão do Heroku.
  • Continuar a explorar a Heroku com sua nova conta.

Como implantar um aplicativo na Heroku

Até agora você aprendeu o que você pode fazer com a plataforma Heroku. Falamos o tempo todo sobre como ela é fácil de usar, e agora você verá como isso é verdade. Depois desta unidade, você terá um aplicativo Web configurado e funcionando na plataforma Heroku! Não se preocupe, percorreremos cada etapa com você.

Inscrever-se em uma conta do Heroku

Para implantar um aplicativo na Heroku, você precisa de uma conta na plataforma. Inscrever-se é fácil e rápido (além de totalmente gratuito). Faça isso agora em signup.heroku.com. Ficaremos à sua espera aqui.

Implantar com um botão

Depois que você estiver logado na sua novíssima conta Heroku, você se encontrará no Heroku Dashboard. Diz, "Introdução ao Heroku". Se você não conhece bem o Heroku, selecione um dos ícones que representam sua linguagem de programação e siga o guia de introdução para criar um novo aplicativo.

Mas a Heroku oferece uma maneira até mais rápida de começar a usá-la com uma ferramenta chamada Botões. Com apenas um clique de botão, você pode implantar um aplicativo pré-configurado que tem tudo o que é necessário, inclusive códigos, configurações e complementos. Ao criar seu primeiro aplicativo Heroku com um botão, você verá como é fácil usar a plataforma. Também é possível obter um aplicativo Node.js funcional que você pode usar e modificar para aprender mais.

Instale seu primeiro aplicativo clicando neste botão:

Botão Criar novo aplicativo

  1. Insira um nome para seu novo aplicativo ou deixe que a Heroku escolha um.
  2. Selecione a região para criar seu tempo de execução: Estados Unidos ou Europa.
  3. Clique em Criar aplicativo para implantar o aplicativo. Depois de um ou dois minutos, seu aplicativo estará configurado e em funcionamento na Heroku!

A página Criar novo aplicativo que permite a você inserir um nome de aplicativo e selecionar uma região.

Clique em Visualizar para ver seu aplicativo na prática, em execução na Web.

Novo aplicativo como é executado no Heroku

Hello World! Parabéns, você acabou de implantar seu primeiro aplicativo na Heroku. Foi fácil ou não foi?

Linha de comando incluída

Embora alguns desenvolvedores amem poder usar a Heroku por meio do painel da Heroku, outros preferem trabalhar com a linha de comando. A Heroku fornece ferramentas completas para desenvolvedores nas duas opções.

As ferramentas de linha de comando da Heroku evoluíram dos comandos básicos que os desenvolvedores já usam. O principal exemplo é o comando Git mais básico: git push. Um desenvolvedor que use Git para o controle de versão de código pode digitar isso 50 vezes por dia para armazenar mudanças incrementais no código em um repositório. Com o Heroku, um desenvolvedor pode usar o mesmo comando do Git para implantar código no Heroku, simplesmente especificando um novo controle remoto de destino associado ao seu aplicativo: git push heroku main. Pronto.

As ferramentas da Heroku são uma coleção de afirmações de linha de comando e interfaces baseadas na Web que transformam o que é difícil e complexo em algo simples, mas elegante. Elas se baseiam no que os desenvolvedores já conhecem e amam, o que facilita e descomplica o uso da Heroku. Você pode clicar em Criar um novo aplicativo no Heroku Dashboard, mas é tão fácil com o comando CLI da Heroku heroku create. De qualquer forma, você fica pronto para a parte divertida: escrever um aplicativo personalizado na sua linguagem de código aberto favorita.

A missão da Heroku é aumentar a produção e fortalecer os desenvolvedores, expandindo o que eles podem fazer, e dar a eles suporte para criar novidades. A CLI Heroku tem dezenas de poderosos comandos Heroku. Todos eles começam com a palavra heroku.

Depois de instalar a CLI Heroku, abra um terminal e digite heroku help para investigar. Se prefere usar a linha de comando em vez do painel, a próxima seção é a melhor opção para você. Se não tem certeza, continue a ler e veja se você consegue acompanhar. Se não for mesmo a sua praia, não se preocupe! Vá para o Desafio se você já estiver pronto para a próxima unidade.

Experimente a interface de linha de comando

Agora que você instalou a CLI Heroku, abra uma janela de terminal e digite heroku login.

A CLI pede a você que insira suas credenciais da Heroku, começando com o endereço de email que serve como nome de usuário. Quando você está conectado, você sempre pode verificar qual usuário está conectado com o comando heroku auth:whoami.

Agora é possível ver alguns detalhes sobre seu aplicativo diretamente no terminal. Para ver uma lista de aplicativos que você pode acessar, digite heroku apps. Você verá uma saída que se parece com algo assim:

CLI: Apps List

Consegue ver o nome do aplicativo que você acabou de implantar usando o botão da Heroku? Vamos pedir à CLI para compartilhar informações sobre seu novo aplicativo. Neste exemplo, o aplicativo se chama shiny-new-heroku-app: heroku apps:info shiny-new-heroku-app.

Insira o comando heroku apps:info com o nome de seu aplicativo. Você verá um resultado mais ou menos assim:

CLI: App Info

Você verá muitas informações sobre seu aplicativo. É possível ver quantos dynos (contêineres) estão sendo executados (um dyno do tipo “Web”) e a URL pela qual você pode acessar seu aplicativo na Internet.

Vamos reduzir o aplicativo para não ser executado em dynos. Vamos usar a linha de comando para dimensioná-lo e depois poderemos verificá-lo no painel da Heroku e na Web. Insira o seguinte comando: heroku ps:scale web=0 -a <nome do seu aplicativo>.

A CLI da Heroku dá a você algum feedback, dizendo algo como: “Dimensionando dynos...concluído; em execução na Web a 0:Standard-1x”. Agora, quando você executar heroku apps:info com o nome do aplicativo, verá que o valor dos dynos estará em branco. Não existem dynos em execução. Se você não acredita, olhe no painel!

Dashboard: Resources Tab with no Dynos

Se o aplicativo não está executando dynos Web, o que você acha que acontecerá se tentar acessar o aplicativo usando a URL? Abra seu aplicativo na Web com o comando heroku open -a <nome do seu aplicativo>. Pausa dramática...

Application Error

Oh, não! Sem dynos Web em execução, seu aplicativo não está aparecendo na Web. Isso não é possível e, portanto, devemos dimensionar novamente para o uso de um dyno Web usando a CLI: heroku ps:scale web=1 -a <nome do seu aplicativo>. Cruze os dedos, conte até cinco e recarregue o navegador. Seu aplicativo está vivo e com saúde na Internet novamente. Ufa!

Agora que você implantou um aplicativo na Heroku e brincou com a sua configuração usando a CLI Heroku na linha de comando, é hora de enviar algumas atualizações a seu aplicativo para todo mundo ver.

Fazer uma alteração com a linha de comando

Antes de passar seu código para seu computador local, crie um diretório para colocá-lo. Depois de criá-lo, abra uma janela de terminal e mude para seu novo diretório.

É possível recuperar seu código da Heroku e trabalhar com ele localmente clonando o aplicativo:

git clone https://github.com/heroku/node-js-getting-started <your app’s name>
cd <your app’s name>
heroku git:remote -a <your app’s name> 

A clonagem cria um diretório com o nome do seu aplicativo e contendo a fonte e o histórico do repositório completo, além de adicionar um heroku git remote para facilitar as próximas atualizações.

Agora é hora de fazer uma pequena mudança no seu aplicativo e vê-la se propagando até o aplicativo em execução na Heroku.

Abra /views/pages/index.ejs em seu editor de texto favorito e substitua <h1>Introdução ao nó na Heroku</h1> por <h1>Meu nome é <seu nome> e estou começando com o nó na Heroku</h1>. Salve o arquivo, confirme-o para o git e implante a mudança na Heroku com a seguinte afirmação:

git commit -am "my first heroku push"
git push heroku main 

Você verá muito texto passando pelo seu terminal, mais ou menos assim:

Captura de tela de texto passando em uma janela de comando do terminal

Quando estiver concluído, você e sua família e amigos poderão abrir um navegador e ver as mudanças em execução na Heroku!

Continue a aprender de graça!
Inscreva-se em uma conta para continuar.
O que você ganha com isso?
  • Receba recomendações personalizadas para suas metas de carreira
  • Pratique suas habilidades com desafios práticos e testes
  • Monitore e compartilhe seu progresso com os empregadores
  • Conecte-se a orientação e oportunidades de carreira