Gerando Aplicações Angular FullStack – Parte 4

Fazendo Deploy no Heroku

Fala galera! Chegamos a ultima parte dessa série de tutoriais. Começamos gerando uma aplicação com Angular, Express e Mongoose, em seguida criamos um CRUD de artigos, na terceira parte criamos um banco de dados MongoDB remoto para que seja consumido pelo Heroku. Nesse tutorial, vamos fazer o deploy da nossa aplicação para o Heroku onde será mostrada uma maneira bem simples de como fazer isso.

Usaremos como base o projeto que viemos trabalhando nas partes anteriores. Caso não tenha acompanhado todos os tutoriais, uma opção é fazer o fork do projeto, que está disponível no repositório do Github (lembre-se de adicionar o arquivo .env na raiz do projeto, conforme especificado no repositório).

 

Links Rápidos:

• Gerando Aplicações Angular FullStack – Parte 1 – Gerando o App
• Gerando Aplicações Angular FullStack – Parte 2 – Criando um CRUD
• Gerando Aplicações Angular FullStack – Parte 3 – Conectando com MongoDB Remoto
• Gerando Aplicações Angular FullStack – Parte 4 – Fazendo Deploy no Heroku

 

Repositório no Github

Se você optou pela opção do fork, pode pular para a próxima parte. Nessa etapa, é necessário que você tenha uma conta no Github.

No Github, crie um novo repositório, defina um nome de sua preferência e confirme.

Na página do repositório, existem comandos para subir o projeto no Github. Com base na imagem abaixo, insira os seguintes comandos no terminal (no diretório do projeto):

 git init
 git add .
 git commit -m "Primeiro Commit"
 git remote add origin gi*@****ub.com:[USUÁRIO]/[REPOSITÓRIO].git
 git push -u origin master

 

Criando um Novo App

Para os próximos passos, crie uma conta no Heroku.

No Dashboard do Heroku, no canto superior direito, vá em “New” e selecione “Create new app”.

 

Em seguida, defina um nome (único) pro app. Esse nome será parte da URL, por exemplo, no meu caso, será https://tutorial-meuapp.herokuapp.com. 

 

Na aba “Deploy”, em “Deployment method”, existem diversos métodos para subir nossa aplicação. Nesse tutorial, iremos usar o método “Github”. Esse método consiste na integração de um repositório do Github ao Heroku. Com o uso dos pacotes obtidos pelo repositório, a aplicação é buildada de disponibilizada como um app do Heroku.

 

 

Integrando com o Github

Selecione o método “Github”, em “Deployment method”, e busque pelo nome do repositório do projeto.

Após encontrar o projeto, clique em “Connect”.

 

Clique no botão “Enable Automatic Deploys” para habilitar deploy automatico. Isso facilita a publicação para o Heroku, fazendo com que toda vez que atualizarmos a branch master, automaticamente o deploy é realizado. Pra finalizar, clique em “Deploy Branch” para subir a aplicação para o Heroku.

 

Assim que o deploy for concluído, o botão “Open app” abre sua aplicação em uma nova aba. Vamos testar?

Ops! Ocorreu um erro! Isso ocorreu especificamente devido o arquivo .env não subiu para o Heroku com as configurações de ambiente. Tal configuração deve ser realizada no próprio painel do aplicativo no Heroku.

 

Configurando Variáveis Ambiente

Vá em “Settings” e clique em “Reveal Config Vars”.

 

Crie uma variável chamada “MONGO_DB_URI” e insira a URL de conexão (Parte 3) como seu valor, por fim salve a configuração. Ainda não teste, estamos quase lá.

 

Modificando a rota da API

Durante todo nossos testes nas etapas anteriores utilizandos a rota “http://localhost:8080/api/artigos/” no arquivo de serviços localizado no cliente em “client/app/services/app.service.ts”. Agora como nossa aplicação está no Heroku temos que mudar essa rota.

Modifique a URL da API para o endereço do aplicativo do Heroku. Esse endereço pode ser obtido clicando em “Open App” no canto superior direito da tela.

OBS.: Não esqueça de adicionar um “/api/artigos/” no final do endereço. Pois é a URI do nosso endpoint.

 

Execute os comando no terminal, dentro da pasta do projeto:

git add .
git commit -m "Atualizacoes"
git push -u origin master

 

Se você deixou o deploy automático ativado, basta esperar, caso contrário o deploy deve ser feito manualmente.

Vamos testar? Tudo deverá estar funcionando agora.

Segue o link do resultado: https://tutorial-meuapp.herokuapp.com/

 

Conclusão

Essa série de tutoriais chegou ao fim. Caso tenha chegado até aqui com sucesso, compartilhe nos comentários o link da sua aplicação, e caso não teve sucesso comente, vamos tentar te ajudar.

Até a próxima!

 

Links Rápidos:

• Gerando Aplicações Angular FullStack – Parte 1 – Gerando o App
• Gerando Aplicações Angular FullStack – Parte 2 – Criando um CRUD
• Gerando Aplicações Angular FullStack – Parte 3 – Conectando com MongoDB Remoto
• Gerando Aplicações Angular FullStack – Parte 4 – Fazendo Deploy no Heroku