O objetivo dessa aula é demonstrar o uso do Heroku para realizar o deploy de uma aplicação Angular 2.
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:
1 2 | node -v npm -v |
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:
1 | git --version |
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:
1 | heroku --version |
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:
1 | npm install express --save |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | /** * Arquivo para criação de um servidor local * utilizado para executar o código de produção. * * @author Márcio Casale de Souza <contato@kazale.com> * @since 0.0.6 */ 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')); }); |
Pronto, agora para executar o servidor criado, basta digitar o seguinte comando no terminal na raiz do sistema:
1 | node index.js |
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’:
1 | web: node index.js |
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’:
1 2 3 4 5 6 | ... "scripts": { ... "heroku-postbuild": "npm run build" }, ... |
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:
1 2 3 4 5 | heroku login heroku create git push heroku master heroku ps:scale web=1 heroku open |
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:
1 | heroku logs --tail |
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:
1 | heroku run bash |
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:
1 2 3 4 | git add . git commit -m "descricao" git push heroku master heroku open |
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.
Boa Noite professor !
Ta ficando muito bom o projeto parabéns, tenho uma dúvida : por que não usar o http://materializecss.com/ é uma questão de gosto ou o senhor optou por eles “angular material” por ser do pessoal do Angular ? Obrigado !
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.