Deploy Angular utilizando cPanel (rápido e fácil)

Como fazer o deploy de sua aplicação angular utilizando cPanel de modo rápido e fácil

A primeira vez que tive que realizar um deploy de uma aplicação angular utilizando cPanel — painel de gerenciamento mais utilizado por serviços de hospedagem de sites — encontrei vários vídeos desatualizados e postagens com informações incompletas, por isso, resolvi compartilhar essa informação com vocês.

Angular é um framework para a criação de SPA´s (Single Page Aplications), ou seja, uma aplicação web que roda em uma única página e a engine do framework toma conta de toda sua dinamização. Resumindo, ao criar um servidor para hospedar uma aplicação angular, ele terá uma única rota que devolve a página index. Esse arquivo “index.html” é gerado no modo de produção do angular, ele ficará dentro da pasta ‘dist/nomeDoSeuProjeto’ criado ao rodarmos o comando ‘ng build — aot’. Essa única página contém os scripts e estilizações necessárias para devolver todas as páginas que você desenvolveu na sua aplicação no modo desenvolvedor.

Exemplo do arquivo server para devolver o app

Ai que a coisa parece que irá complicar, por que, por padrão dentro do gerenciamento de arquivos do seu site (no cPanel) cada pasta equivale a uma rota da sua aplicação e nossa aplicação só possui uma rota, lembra? Agora você deve estar se perguntando, qual o problema disso?

Digamos que sua aplicação tenha duas rotas, configuradas no seu ‘app.routing.module’ no desenvolvimento da sua aplicação

Arquivo de configuração das rotas

Ao fazer o deploy da pasta ‘dist’ na raiz da aplicação no cPanel, aparentemente tudo deveria funcionar, pois o angular deveria cuidar das requisições e devolver o componente correspondente, porém, não é isso que ocorre. As requisições chegam no servidor do serviço de hospedagem do seu site e ele busca na raiz do seu projeto uma pasta corresponde a rota da requisição. Exemplo: ‘meusite.com/contato’ -> busca pela pasta ‘contato’

Como essas pastas não vão existir já que sua aplicação consiste apenas na página index.html e suas dependências, será devolvido o tão temido 404 not found

Not found

Depois de explicado o problema, vamos para a solução. Primeiramente dentro do arquivo ‘app.module’ da sua aplicação você deverá adicionar a importação

import { CommonModule, HashLocationStrategy, LocationStrategy } from ‘@angular/common’;

Agora fará a seguinte configuração: adicionar o CommonModule nas importações do projeto e configurar os providers

Isso garantirá que as requisições de rota passarão pelo angular e ele devolverá o componente correspondente, sem ir para o servidor do serviço de hospedagem

Configurações do app.module

Após feito isso, você executa o comando ng build — aot na raiz do seu projeto no terminal de comando. A pasta dist será criada, dentro dela terá uma pasta com o nome do seu projeto, deixa-a compacta (zip) e faça seu upload no gerenciador de arquivos do cPanel clicando em ‘carregar’

Ao entrar no cPanel, clique em Gerenciador de arquivos Dentro do gerenciador de arquivos, no topo esquerdo terá a opção carregar, que abrirá essa página

Terminado o upload, volte para a raiz do projeto que deve conter agora o arquivo ‘nomedoseuprojeto.zip’, com o botão direito do mouse clique em ‘extrair’. Feito isso, mova todos os arquivos que estão dentro da pasta que foi extraída para a raiz da aplicação (mantenha a estrutura de diretórios igual, só tire eles de dentro dessa pasta mãe). O resultado será algo similar a isso:

Estrutura dos arquivos na raiz da aplicação

Pronto!! rapidamente seu site estará no ar e com todas as rotas funcionando, espero ter ajudado 🙂