Configurando o Angular Universal na Digitalocean

Image for post
Image for post

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
Image for post
Image for post

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 ..

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

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 certbot python-certbot-nginx -y
#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ê.

Image for post
Image for post

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

Written by

Design consultant (UI/UX)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store