Realizando Deploy de aplicação Next.js para DigitalOcean com Domínio Personalizado e Certificado SSL

Neste artigo iremos aprender a realizar o deploy de uma aplicação Next.js usando TypeScript na DigitalOcean definindo domínio personalizado e certificado SSL por meio da seguradora Let’s Encrypt.

O projeto será adaptado a partir da abertura de Star Wars em HTML5 e CSS3, que nós ensinamos a criar neste artigo: Recriando a abertura de Star Wars com CSS3 e Sass. Este artigo será dividido entre os seguintes tópicos:

1. Adaptando Projeto para Next.js
2. Criando Droplet na DigitalOcean
3. Realizando Deploy no Servidor
4. Definindo Proxy com Nginx
5. Adicionando Domínio Personalizado
6. Configurando Certificado SSL

Adaptando Projeto para Next.js

Para criar o nosso projeto usando Next.js, iremos utilizar o recurso do npx.

npx create-nuxt-app star-wars-next

Após ter o projeto criado, iremos iniciá-lo. Para isso, vamos acessar o projeto e então executar o script npm para subir nosso servidor de desenvolvimento:

cd star-wars-next
npm run dev

Com estes comandos executados, iremos ver a tela abaixo, informando que o servidor foi iniciado:

Adicionando TypeScript ao projeto

Nosso projeto possuirá TypeScript em sua estrutura. A primeira coisa que precisamos fazer é criar um arquivo tsconfig.json, usado pelo TypeScript para definir suas configurações.

Após isso, é necessário adicionar o TypeScript ao nosso projeto por meio do npm, além de também adicionar os tipos necessários para o React, usado pelo Next.js, e também do Node.js:

npm install -D typescript @types/react @types/node

Após isso, podemos iniciar novamente o servidor de desenvolvimento:

npm run dev

Com este comando o arquivo tsconfig.json será automaticamente preenchido com suas configurações padrão:

Com isso o TypeScript estará completamente adicionado e configurado em nosso projeto.

Adicionando Sass

Uma parte essencial de nosso projeto é o uso do Sass, responsável por nos ajudar a desenvolver códigos CSS com mais facilidade e com recursos avançados. Esse recurso será adicionado como uma dependência de desenvolvimento:

npm install -D sass

Após instalar o Sass, precisamos adicionar algumas configurações para que essa dependência funcione corretamente.

Para isso, vamos precisar editar o arquivo next.config.js e adicionar as seguintes configurações:

const path = require('path');

module.exports = {
    sassOptions: {
        includePath: [path.join(__dirname, 'styles')]
    }
}

Adaptando Projeto para o Next.js

Para adaptar nosso projeto já criado com HTML5, CSS3 e Sass, vamos precisar editar o arquivo index.tsx do diretório pages e também o arquivo Home.module.scss:

Além do arquivo .tsx, precisamos também editar o arquivo .scss:

Com isso veremos o nosso projeto já funcionando usando Next.js.

Criando Droplet na DigitalOcean

É necessário possuir uma conta criada na DigitalOcean para poder criar um novo projeto, ou Droplet (gota), neste provedor de servidores em nuvem.

Após criar um novo projeto, vamos clicar em “Create > Droplets”:

Na página de criação, vamos selecionar primeiramente a imagem de nosso sistema operacional. Iremos escolher o Ubuntu 20.04:

A seguir vamos selecionar o plano de nosso projeto. Iremos escolher o plano mais básico:

Também iremos escolher a região em que nosso servidor estará localizado:

A seguir precisamos selecionar a maneira de autenticação ao acessar o nosso servidor. Iremos selecionar chaves SSH. Para isso, precisaremos criar uma nova chave SSH.

Criando Chave SSH

Para criar uma chave SSH iremos usar o programa PuttyGen. Podemos realizar seu download usando o link a seguir: https://www.putty.org/.

Após ter o programa baixado, iremos abri-lo e clicar no botão “Generate”:

Em seguida é necessário passar nosso mouse por uma área em branco de maneira randômica. Esse padrão será utilizado para criar uma chave SSH única:

Após alguns segundos, será exibida a seguinte janela:

Note que há dois campos voltados para adicionar uma senha para a nossa chave SSH. Isso é interessante para aumentar ainda mais a segurança no uso das chaves. Por isso, se desejar adicionar essa senha, seria algo muito bom.

Com a chave criada, precisamos salvá-la em um arquivo. Há dois arquivos que serão criados: 1) a chave pública, que será adicionada à DigitalOcean e 2) a chave privada, que será utilizada para confirmar que a chave específica se refere à nossa máquina pessoal.

Iremos clicar nas opções “Save public key” e “Save private key”:

Podemos identificar nossas chaves com o nome que desejarmos:

Não feche a janela do PuttyGen ainda, pois iremos utilizá-la ainda.

Vamos voltar no site da DigitalOcean e clicar na opção de adicionar uma nova chave SSH:

Será necessário voltar mais uma vez à tela do PuttyGen e iremos agora copiar a chave que está no campo “Key”. Basta selecioná-la, pressionar o botão direito do mouse e clicar em “Copiar”:

Nós iremos colar seu conteúdo na DigitalOcean, definir um nome para nossa chave e então clicar em “Add SSH Key”:

Em seguida podemos selecionar apenas um droplet na seção de finalização e dar um nome para o nosso servidor. Em nosso caso, iremos definir o nome como “STARSERVER”:

Por fim podemos clicar em “Create Droplet” para criar de fato nosso servidor:

Com isso a criação de nosso servidor na DigitalOcean estará finalizada ?.

Realizando Deploy no Servidor

O próximo passo de nosso artigo será acessar nosso servidor remoto para realizar o deploy de nossa aplicação na nuvem. Para isso, iremos usar novamente o Putty.

A primeira coisa que precisamos saber é o IP do nosso servidor. Podemos descobrir isso no painel administrativo da DigitalOcean. O IP do servidor é mostrado ao lado do seu nome:

Ao acessar o programa do Putty, podemos adicionar o IP de nosso servidor, a porta que será utilizada para nos conectar ao servidor, em nosso caso será a porta 22, o tipo de conexão, que por padrão é SSH, e o nome do servidor, para que possamos acessá-lo com mais facilidade em futuras sessões. Podemos definir como “STARSERVER”:

A próxima configuração que precisamos fazer é relacionada à autenticação. No menu esquerdo do Putty iremos clicar em “Connection > SSH > Auth”:

Iremos clicar no botão “Browse...” para que possamos selecionar o arquivo que possui nossa chave SSH privada:

Ao clicar nessa opção será aberta uma janela do Windows Explorer. Selecione sua chave privada e clique em “Abrir”. Ela estará com a extensão “.ppk”:

É importante manter esses arquivos em um local seguro em seu computador. Se precisar acessar o servidor de outro local, será necessário fazer uma cópia dos arquivos das chaves SSH, ou então gerar uma nova chave neste outro local.

Podemos voltar para a aba “Session”, clicar em “Save” para que essa sessão fique salva em nosso programa e então clicar em “Open”, para de fato acessar nosso servidor:

Na primeira vez que acessarmos o servidor, iremos nos deparar com a seguinte mensagem. Basta clicar em “Sim”:

A primeira credencial solicitada será o login. Podemos informar “root”, que é o login padrão da DigitalOcean:

Em seguida será solicitada a senha de nossa chave SSH. Se a tivermos definido, basta informá-la neste momento:

Com isso estaremos logados em nosso servidor remoto. Estamos prontos para clonar nosso projeto.

Para isso iremos utilizar o Git, que é amplamente usado para o controle de versões de vários projetos. Os servidores Ubuntu da DigitalOcean por padrão já possuem Git instalado.

Vamos acessar o diretório var:

cd /var

Iremos realizar o clone de nosso projeto neste diretório:

git clone https://github.com/hcodebr/star-wars-next.git

Como estamos executando um projeto em Node, poderíamos escolher qualquer outro diretório, mas preferimos o diretório var.

Instalando o Node

Precisamos agora instalar o Node.js em nosso servidor. Para isso, iremos primeiramente atualizar nosso conjunto de ferramentas apt:

sudo apt update

Em seguida iremos realizar o download setup do Node diretamente do domínio nodesource. Iremos utilizar o seguinte comando para isso:

curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh

Note que selecionamos o setup_14.x. Isso fará com que a versão 14 do Node seja baixada. Mas poderíamos escolher outra versão se desejássemos.

Após o download finalizado, vamos verificar se o arquivo nodesource_setup.sh foi baixado corretamente. Podemos utilizar o seguinte comando para isso:

sudo nano nodesource_setup.sh

Se algum conteúdo for apresentado para esse arquivo, sabemos que ele foi corretamente baixado. Podemos então executá-lo, através deste outro comando:

sudo bash nodesource_setup.sh

Após isso, podemos usar o apt para instalar o Node:

sudo apt install nodejs -y

Após a instalação, podemos conferir a versão do Node instalada em nosso servidor com o comando node --version:

Instalando as dependências

Em seguida podemos instalar as dependências de nosso projeto. Vamos acessar o diretório de nosso projeto:

cd /var/star-wars-next

Para instalar essas dependências podemos utilizar o comando npm install.

O próximo passo é preparar os nossos arquivos para a produção. Para isso podemos utilizar o comando npm run build.

Por fim, podemos iniciar o nosso projeto de fato, usando o comando npm start.

Agora, se acessarmos a URL http://167.71.110.237 na porta 3000, que é a usada pelo Next.js, já será possível ver nosso projeto funcionando ?:

Isso é excelente. Contudo, se encerrarmos a nossa sessão do Putty, nosso Terminal que está rodando o projeto será eliminado. É necessário definir que o projeto continue funcionando 24 horas por dia, sem precisarmos ficar acessando nosso servidor toda vez. Para nos ajudar com essa questão, podemos utilizar um gerenciador de sistemas chamado pm2.

Instalando e Configurando o pm2

Para instalar o pm2 podemos usar o seguinte comando:

npm install pm2 -g

Dessa forma o pm2 estará instalado de maneira global em nosso servidor.

Para iniciá-lo é necessário dar um nome para nossa aplicação. Em nosso caso daremos o nome “next” para nosso projeto. Usaremos o seguinte comando:

 pm2 start npm --name next -- start

Após a inicialização de nosso projeto, veremos a seguinte tabela:

Ela mostra quantos projetos estão online e algumas estatísticas bem interessantes, como quanta memória já foi utilizada por ele.

Para salvar essa configuração, podemos utilizar o comando pm2 save.

Assim, mesmo que fechemos a janela de acesso ao servidor, nosso projeto continuará on-line ?.

Proxy com Nginx

Nosso projeto já está funcionando, mas precisamos explicitamente informar que queremos acessar a porta 3000 do servidor. Contudo, isso não é interessante para a maioria dos usuários. Desejamos apenas informar o IP do servidor e já ser redirecionados para o nosso projeto.

A porta padrão para acessar servidores Web é a 80. Assim, será necessário criar um proxy, que será um servidor intermediário responsável por direcionar nossos usuários para a porta real de nosso projeto, ou seja, a porta 3000.

É necessário que utilizemos um servidor HTTP para isso. Ele estará escutando por padrão a porta 80. Iremos utilizar em nosso caso o Nginx. Vamos instalá-lo usando o comando abaixo:

sudo apt install nginx -y

Após sua instalação, vamos acessar o diretório que contém os sites cadastrados neste servidor:

cd /etc/nginx/sites-available

Vamos acessar as configurações do servidor padrão:

sudo nano default

Neste arquivo iremos encontrar a diretiva location. Iremos definir sua estrutura da seguinte forma:

location / {
    proxy_pass http://localhost:3000;
    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;
}

Com esse código estamos definindo que o Nginx irá receber requisições na porta 80, mas irá direcioná-las para o localhost:3000, ou seja, para nosso projeto.

Após realizar essas configurações, podemos reiniciar o nosso servidor Nginx:

sudo service nginx restart

Com isso, nosso projeto já estará funcionando por meio da porta 80, sem precisarmos informar o :3000.

Adicionando Domínio Personalizado

Nosso servidor está ficando cada vez melhor. Contudo, há alguns recursos que podemos melhorar ainda mais. Por exemplo, ainda não temos um domínio personalizado (DNS) para nosso projeto. É a próxima questão que iremos configurar.

Para configurar um servidor DNS, precisamos primeiro de um domínio registrado em nosso nome. O site registro.br é muito usado para o registro de domínios “.br“ com um preço anual de R$ 40.

Nós iremos usar o domínio myapp.dev.br em nosso projeto. Para realizar sua configuração podemos retornar ao nosso servidor e realizar uma cópia do arquivo padrão do Nginx. Por convenção iremos nomear este novo arquivo com o nome de nosso servidor seguido do sufixo “.conf”:

sudo cp default myapp.dev.br.conf

Iremos acessar esse novo arquivo e procuraremos pela diretiva server_name. Iremos definir o nome de nosso servidor como seu conteúdo:

server_name myapp.dev.br www.myapp.dev.br;

Note que definimos o nome de nosso servidor tanto sem como com o prefixo “www”.

Com essa configuração nosso domínio já está disponível em nosso servidor, mas ainda não está habilitado. Para que isso ocorra precisamos fazer uma cópia desse arquivo para o diretório sites-enabled. Para evitar um arquivo duplicado, podemos criar um link do arquivo que está no diretório sites-available para o diretório sites-enabled. Um link no Linux é como um atalho que conhecemos no Windows. Para criá-lo, iremos utilizar o seguinte comando:

sudo ln -s myapp.dev.br.conf /etc/nginx/sites-enabled/

Essa é a configuração necessária em nosso servidor. O que precisamos agora é adicionar o domínio registrado na DigitalOcean. Para isso iremos voltar ao painel de nosso servidor, clicar nos três-pontos que mostram mais opções e então selecionar “Add a domain”:

Na página seguinte iremos informar o nosso domínio e selecionar o projeto a que ele será direcionado. Após isso podemos clicar em “Add Domain”:

Na página seguinte, vamos adicionar novos registros para nosso domínio. Vamos adicionar um registro do tipo “A”, definindo o hostname como “@” e selecionando nosso projeto “STAR-SERVER” como o redirecionamento. Daí podemos clicar em “Create Record”:

Iremos repetir o mesmo processo, mas informando “www” como o hostname:

Essas novas configurações apresentarão uma série de novos registros DNS. Mas iremos nos atentar a três específicas:

Iremos copiar esses três registros DNS e adicioná-los ao nosso domínio no site registro.br. Iremos clicar em editar nosso domínio e na área DNS iremos adicionar tais registros:

Dessa forma, ao acessar http://myapp.dev.br, iremos ver nosso projeto já funcionando com um domínio personalizado ???.

Configurando Certificado SSL

Após adicionar um domínio personalizado ao nosso projeto, o que precisamos fazer agora é definir um certificado SSL para que nosso servidor seja encarado como seguro.

Iremos utilizar o projeto Let’s Encrypt, que fornece certificados SSL gratuitos, que precisam ser renovados a cada três meses. O site desse projeto nos sugere utilizar o software Certbot.

Iremos instalá-lo em nosso servidor com o seguinte comando:

sudo apt install certbot python3-certbot-nginx -y

Note que também instalamos um pacote chamado python3-certbot-nginx. Ele é o plugin que realiza a configuração de certificados SSL em servidores Nginx.

Para criar nosso certificado, podemos realizar a chamada do certbot em conjunto com algumas flags:

sudo certbot --nginx -d myapp.dev.br -d www.myapp.dev.br

A primeira coisa que precisamos informar é o e-mail associado com o nosso servidor. Podemos informar um e-mail pessoal ou de nossa empresa:

Em seguida precisamos confirmar que aceitamos os termos de serviço do Certbot. Podemos pressionar “A” para aceitar e “C” para cancelar o processo:

A próxima pergunta nos questiona se permitimos que nosso e-mail seja compartilhado com os parceiros do Let’s Encrypt. Podemos responder “Y” para sim e “N” para não:

Por meio da última questão podemos definir se queremos realizar o redirecionamento de URLs com HTTP para HTTPS. Podemos digitar “2“ para esse redirecionamento ocorrer:

Após isso nosso certificado será criado e uma mensagem de sucesso será retornada:

Agora, se acessarmos nosso projeto com HTTPS, veremos o ícone de cadeado na URL e também uma mensagem informando que nossa conexão é segura:

Nosso projeto em Next.js está adicionado por completo a nosso servidor na DigitalOcean ?.

Conclusão

Neste artigo aprendemos a realizar o deploy completo de um projeto em Next.js para a DigitalOcean.

Esperamos que esse conteúdo possa te ajudar a também realizar o deploy de suas aplicações para a nuvem, uma habilidade tão necessária para os programadores nos dias de hoje.

Não esqueça de compartilhar este artigo se você gostou do conteúdo. Até o próximo artigo. :)