Configurando o Angular Universal na Digitalocean

Eu sei, sou Designer, mas tenho uma pequena paixão por código e adoro poder trabalhar nos meus projetos com muita liberdade. Eu acredito que conhecer outras áreas não fazem mal algum e sempre adiciona algo a mais nos seus projetos. Eu sempre desenvolvi os meus projetos Web em WordPress, mas apareceu um amigo que me falou sobre o Angular e as suas vantagens. Eu fiquei encantado e a paixão logo surgiu, mas tive um pequeno problema na hora de colocar todo o projeto no ar e o amor quase acabou.

Uma das minhas grandes dificuldades foi colocar o famoso SEO para funcionar. Acostumado com o WordPress e o PHP que basta colocar o código ou ativar um destes famosos plugins que o seu SEO já estava pronto. O meu romance com o Angular estava quase por terminar até que descobri o modo SSR ou Angular Universal que faz o servidor renderizar o seu projeto. Isso fazia com que os bots utilizados pelo Google, Bing etc pudessem ler o seu site, tags e tudo mais. Finalmente vou poder adicionar o SEO ao meu projeto, problema resolvido. Agora é só publicar o projeto e pronto, mas não foi isso que aconteceu, mas eu encontrei a solução.

O que eu vou propor para você é algo básico mas já vai lhe ajudar o caminho que precisa trilhar para chegar ao destino. Para fazer isso você precisa basicamente ter algum conhecimento em SSH, Linux (terminal) e Digitalocean, na verdade pode utilizar qualquer serviço como AWS, Google Cloud que o tutorial vai funcionar.

Requerimentos do servidor

Para darmos início vamos começar com o básico. Você precisa de uma máquina virtual (VPS) com no mínimo 1 CPU e 2 GB de RAM, menos que isso faz com que o Linux termine o processo e você não vai conseguir avançar. Sempre é importante iniciarmos com nosso SO atualizado, para isso rode os comandos abaixo.

#step 1
sudo apt update
#step 2
sudo apt upgrade -y

Instalando o Nginx e o Node.js

O nginx é um servidor leve de HTTP e muito mais. Comparado com o Apache ele consome menos memória e em alguns pontos é mais eficiente, mas não se preocupe, eles podem trabalhar juntos no mesmo servidor. Para isso requer configurações adicionais que não vou abordar neste tópico.

O Node, bom este você já conhece e dispensa apresentações, mas para quem é novo ele é nosso interpretador assíncrono Javascript.

#step 3
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
#step 4
sudo apt-get install -y nodejs nginx build-essential

Configurando o Nginx

Logo após termos tudo instalado e atualizado, vamos iniciar as configurações. Para isso, vamos precisar editar o arquivo /etc/nginx/sites-available/default. Alguns gostam de separar os sites disponíveis em arquivos diferentes ou adicionar no arquivo default, fica a sua escolha. O que importa é que o seu Nginx precisa receber o seguinte código abaixo. Dois detalhes importantes aqui. No local onde diz yourdomain.com adicione o seu domínio ou subdomínio e no local proxy_pass confira se está correto a porta de renderização do Angular.

server {
   listen 80;
   server_name beta.guim.it;
   location / {
     proxy_pass http://localhost:4000;
     proxy_http_version 1.1; 
     proxy_set_header Upgrade $http_upgrade;
     proxy_set_header Connection 'upgrade';
     proxy_set_header Host $host;
     proxy_cache_bypass $http_upgrade;
   }
}

Configurações feitas, vamos testar para conferir se está tudo certo. Para isso execute os comandos abaixo:

# To verify nginx configuration
sudo nginx -t
# Restart nginx
sudo service nginx restart

Adicionando o seu projeto

Para este tutorial eu vou criar um projeto angular do zero dentro do servidor, você pode fazer o mesmo ou adicionar o seu. O processo é o mesmo que você realiza quando começa em localhost ou faz um clone de um repositório já existente. Lembre-se vamos utilizar o git caso o mesmo não esteja instalado em seu servidor, é importante já ativá-lo e configurá-lo. Para isso siga as instruções abaixo caso ja tenha feito, vá para as próximas instruções.

#Step 1
sudo apt install git
#Step 2
git config --global user.name "Your Name"
#Step 3
git config --global user.email "youremail@yourdomain.com"

Normalmente nós deixamos nossas aplicações web rodando na pasta /var/www. Portanto precisamos chegar até lá para daí criar nosso projeto.

cd /var/www

Como vamos iniciar um projeto novo, eu preciso primeiro instalar o Angular para isso.

npm install -g @angular/cli

Iniciando o Angular

#Step 1
ng new frontend
# Step2
cd frontend

Pronto, nosso projeto Angular já está em nosso servidor pronto para fazermos os primeiros testes.

Adicionado o Angular Universal

Para saber mais sobre o Angular Universal, vou deixar o link da documentação aqui. Para adicioná-lo a este projeto segue o comando.

ng add @nguniversal/express-engine

Feito tudo isso, vamos fazer nosso primeiro teste. Você pode simplesmente rodar o comando abaixo e testar tudo em http://IP:4000. Se o seu projeto aparecer, pronto, podemos partir para a segunda etapa.

npm run build:ssr && npm run serve:ssr

Instalando o PM2

Para quem ainda não conhece o PM2 é gerenciador de processos para Nodejs. É fácil e simples de configurar e a documentação você encontra aqui. Para instalar ele execute o seguinte comando abaixo.

npm install -g pm2

Para ativar o PM2 você precisa ficar atento ao seguinte detalhe. No comando abaixo na tag <frontend> Adicione o nome do seu projeto, caso tenha é só digitar no terminal cd dist/ && ls. Caso faça isso, lembre de se voltar a raiz de seu projeto com um cd ..

pm2 start dist/<frontend>/server/main.js --name="My Awesome App"

Feito tudo isso se entrar no seu domínio adicionado anteriormente, no meu caso lon.temporary.guilhermemenezes.com e veraz o seu projeto já ativo e funcionando.

Para finalizar as configurações do PM2, caso você precise reiniciar o servidor por algum motivo, o mesmo volte a funcionar automaticamente digite o comando abaixo. Caso não queira esta função, pode ignorar este comando.

pm2 save && pm2 startup

HTTP em pleno 2020?

2020 chegou e já se foi o tempo em que criarmos projetos na porta 80. Hoje em dia precisamos de mais segurança e por isso adotamos quase que como padrão o https. Não é estranho hoje em dia entrar em um site que não apresente esta segurança? Pois bem, caso não tenha dinheiro para comprar um certificado e instalar em seu projeto nós temos uma solução muito boa e simples o Let’s Encrypt. Para instalar o mesmo é muito fácil e simples através do Certbot.

Como nosso servidor é Linux e estamos a utilizar o Nginx, basta seguir os comandos abaixo, caso seja outro SO, basta acessar o site do CertBot que irá apresentar as configurações para você.

#Install Certbot
sudo apt-get install python3-certbot-nginx
#install your certificate
sudo certbot --nginx
#Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
2

Eu sempre recomendo a opção de redirecionamento, assim é mais seguro. Lembre de renovar ele quando estiver prestes a expirar. O CertBot é fantástico e vai fazer quase tudo para você.

Chegamos ao fim espero que tenhas conseguido. Qualquer dúvida, responda aí nos comentários. Estamos aqui para ajudar.