Angular 2 – Heroku deploy

Curso básico gratuito de Angular 2 | kazale.comO objetivo dessa aula é demonstrar o uso do Heroku para realizar o deploy de uma aplicação Angular 2.

 

Digite seu email para se inscrever em nossa newsletter e receber atualizações sobre novos conteúdos.

Ao término dessa aula você aprenderá como efetuar o deploy de um sistema Angular 2 no Heroku.

1. Introdução

Colocar uma aplicação em produção é uma etapa obrigatória no desenvolvimento de um sistema.

Com o crescimento de soluções voltadas para hospedagem na nuvem, nada melhor do que estar preparado para saber como realizar um deploy em um servidor na nuvem.

No caso do Angular 2, após a geração da versão final para produção, o que temos será basicamente um site estático, e sua configuração dependerá basicamente da configuração de um servidor web HTTP para execução do código fonte.

Embora qualquer web server popular pode ser usado para hospedagem de uma aplicação Angular 2, aqui usamos o próprio NodeJS em conjunto com o excelente framework express, que permite disponibilizar um código HTML na web.

Uma das vantagens em utilizar o express, é que poderemos visualizar o código a ser colocado em produção localmente, integrado com o código do projeto.

Por fim, utilizaremos o Heroku, que é uma das melhores hospedagens na nuvem para iniciar um projeto, sendo que ele possui uma versão gratuita que para sua utilização basta realizar um cadastro sem complicações.

2. Heroku

Heroku é um serviço popular de hospedagem na nuvem.

Ele é gratuito para começar, e seu cadastro é bastante simples.

Uma hospedagem na nuvem significa que você terá a sua disposição máquinas virtuais executando um determinado sistema operacional, onde você terá acesso para instalar servidores e sistemas a seu gosto.

A hospedagem na nuvem possui diversas vantagens quando comparada com as hospedagens tradicionais, sendo a principal dela a escalabilidade, que permite incrementar os recursos necessários para execução de seu sistema assim que necessário.

3. Instalando as dependências para o deploy

Para integrar um projeto com o Heroku, algumas configurações e instalação de dependências se fazem necessário, então vamos instalar as dependências antes de continuarmos:

Instale o NodeJS localmente, para isso acesse http://nodejs.org.

Após a instalação execute os comando a seguir no terminal para certificar que ele foi instalado corretamente:

Assim que instalar o NodeJS, instale o Git também, necessário porque o Heroku utiliza seus comando para manter o código sincronizado no servidor.

Acesse a url https://git-scm.com e baixe a última versão disponível. Teste a instalação com o seguinte comando no terminal:

Por último, vamos instalar o cliente do Heroku, para isso acesse https://devcenter.heroku.com/articles/heroku-cli, baixe o executável referente ao seu sistema operacional e proceda com a instalação.

Teste a instalação com o seguinte comando no terminal:

Com o ambiente local configurado, crie uma conta gratuita no Heroku, para isso acesse https://www.heroku.com, clique no botão “Sign up for free”, e preencha seus dados.

Você receberá um email de confirmação para ativar a sua conta.

4. Criando um servidor local com o “express”

No código de sua aplicação, vamos instalar o express, e configurá-lo para disponibilizar o diretório contendo o código fonte do projeto.

No caso do template Angular 2 com Webpack aqui da Kazale por exemplo, será o diretório “dist”.

Para instalar o express, digite no terminal na raiz do projeto:

Uma vez instalado, devemos criar um arquivo Javascript na raiz da aplicação, que chamaremos de ‘index.js’, e tal arquivo conterá o código para criar o servidor web, conforme código a seguir:

Pronto, agora para executar o servidor criado, basta digitar o seguinte comando no terminal na raiz do sistema:

Por padrão ele é configurado para executar na porta 5000, então o código poderá ser visualizado acessando http://localhost:5000.

5. Configurando o Heroku na aplicação

O Heroku ao receber o código fonte no servidor, executará o ‘npm install’ em modo de produção, fazendo com que ele baixe apenas as dependências contidas em ‘dependencies’ no ‘package.json’.

Uma vez que precisaremos executar o Webpack, ou mesmo outro gerenciador de build, precisamos mover os pacotes contidos em ‘devDependencies’ para ‘dependencies’. Então atualize seu arquivo ‘package.json’.

Precisaremos também criar o arquivo ‘Procfile’ na raiz do projeto. Esse arquivo contém instruções de como o Heroku executará a aplicação, que em nosso caso será subir o servidor express.

Por isso, adicione o seguinte código ao ‘Procfile’:

Por último, precisaremos informar como o Heroku fará para gerar o build da aplicação, que no caso do template de Angular 2 com Webpack aqui da Kazale, será executando o comando ‘npm run build’.

O Heroku possui um nome de script padrão que ao configurado no ‘package.json’, é capaz de executar um comando personalizado.

Esse script tem o nome de ‘heroku-postbuild’, e deverá ser configurado da seguinte forma no ‘package.json’:

Pronto, agora assim que o Heroku finalizar a instalação dos pacotes npm, ele gerará o build e executará o servidor.

6. Efetuando o deploy

Com nossa aplicação configurada para o deploy no Heroku, basta fazer o deploy.

Com o cliente do Heroku instalado, essa tarefa é bastante simples, no terminal, na raiz do projeto digite os seguintes comandos:

Se todo o processo foi executado sem erros, o navegador deverá ser exibido com a aplicação.

7. Visualizando logs

Um recurso útil para visualizar algum erro ou andamento da execução do servidor e aplicação, é visualizar os logs gerados pelo servidor.

No Heroku, os logs podem ser visualizado digitando o seguinte comando no terminal:

Para finalizar a visualização, pressione ‘Ctrl+C’.

8. Acessando console do servidor

Uma característica na hospedagem na nuvem é o acesso remoto ao servidor via linha de comando.

Para acessar o servidor remotamente no Heroku, digite no terminal:

Com acesso ao servidor é possível, visualizar arquivos, processos, ou seja, ter acesso a todas as configurações do servidor.

Para finalizar o acesso, digite ‘exit’.

9. Atualizando código no servidor

Se você já trabalhou com o Git terá bastante facilidade para realizar atualizações em seu projeto, pois é só seguir os passos do Git.

Imagine que você tenha feito uma alteração em seu código fonte, basta executar os seguintes comandos para colocar a alteração em produção no Heroku:

Repare o que aconteceu, os arquivos modificados foram adicionados ao repositório, e depois enviados para o Heroku através do comando ‘git push’.

10. Conclusão

Como você pode ver nessa aula, é bastante simples o deploy de uma aplicação Angular 2 no Heroku.

Talvez você sinta um pouco de dificuldade caso não tenha muita experiência com versionamento de código e Git, porém basta executar os passos conforme explicados que você compreenderá rapidamente os conceitos apresentados.

Também é importante que você aprenda e se acostume com soluções baseadas em nuvem, pois é a tendência ao futuro das hospedagens de aplicações.

4 comentários em “Angular 2 – Heroku deploy

    1. Obrigado Ribamar!

      Na verdade o Angular material é construído em cima do materialize css. A diferença é que enquanto o materialize css contém apenas estilos css e html, o Angular material busca criar componentes no padrão do Angular 2 para facilitar sua utilização e integração.

  1. Eu estou com este problema:

    “Web process failed to bind to $PORT within 60 seconds of launch”

    Pesquisei e parece que é algo com a porta, fiz de tudo mas nada dá jeito, meu arquivo index.js está:

    var path = require(‘path’);
    var express = require(‘express’);
    var app = express();

    app.set(‘port’, (process.env.PORT || 5000));

    app.use(express.static(path.join(__dirname, ‘dist’)));

    // redireciona todas as requições para o Angular 2
    app.all(‘*’, function(req, res) {
    res.status(200).sendFile(
    path.join(__dirname, ‘dist’, ‘index.html’));
    });

    app.listen(app.get(‘port’), function() {
    console.log(‘Node executando na porta ‘, app.get(‘port’));
    });

    Se alguem puder ajuda.

    1. Olá Rodrigo,

      parece que algum processo já está sendo executado nessa porta, ou talvez um firewall pode estar bloqueando ela.

      Tente na linha: app.set(‘port’, (process.env.PORT || 5000));

      Substituir o valor 5000 por outro, como por exemplo 8082.

      Att,
      Márcio.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

5 × 4 =