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 git@github.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
