Exemplo de deploy com aplicativo Next.js

Antes de começar

As orientações contidas neste tutorial exigem o painel Integrator Node.js. Caso seu plano não possua suporte ao Node.js, converse com o nosso comercial sobre planos disponíveis.

Sobre o tutorial

O exemplo disponibilizado realiza o deploy de um projeto em Next.js 100% funcional em nossos servidores, no intuito de auxiliar os desenvolvedores em seus deploy, onde garantimos o funcionamento total com este exemplo de base.

Saiba que o uso do next.js em nossos testes exigiu versões do node a partir do 18.x. Utilizar versões inferiores pode gerar erros. Portanto, ao configurar no painel, selecione o minimo 18.x recomendado.

Para baixar o exemplo completo, Clique Aqui.

Subindo o aplicativo e registrando no Integrator Node.js

1. Para o deploy através do painel, use a aba Deploy e selecione o arquivo compactado .zip.

2. Em seguida, com upload feito corretamente e com sucesso, basta clicar para configurar o aplicativo no domínio/subdomínio

3. O registro do aplicativo ocorre quando ele já foi levado ao servidor, no diretório do seu usuário. O aplicativo precisa ser registrado para que ele se torne funcional no servidor, tanto no acesso através da porta definida, como também pelo domínio.

Figura: Registrando o aplicativo pelo painel

• O nome do aplicativo - Ele será identificado nas configurações do usuário;
  
• Dominio para Deploy - Selecione o domínio/subdomínio onde irá acessar o aplicativo;
  
• A URL do Aplicação - A raiz do domínio é para manter barra / apenas. Se colocar /outronome, o aplicativo só será visível quando acessar essa URI;
  
• Nodejs do Aplicativo - A versão do Node.js que vai operar em seu aplicativo;
  
• Memoria do Aplicativo - A memória que será definida no aplicativo;
  
• Index do Aplicativo - O arquivo inicial do aplicativo, neste caso server.js;
  
• Caminho do aplicativo - O caminho onde se encontra o aplicativo. Se subir pelo painel, o deploy fica no diretorio applications/ do seu usuário. O nome precisa ter o diretório onde se obtém ao descompactar o aplicativo, por exemplo;
  
• Porta do Aplicativo - A porta que será executado o aplicativo Node.js através do PM2;
  
• Modo de execução - O modo de execução do aplicativo. Pode ser Desenvolvimento ou Produção. O modo Desenvolvimento exibe erros em caso de falhas da execução;
  

Instalando as dependências

Os comandos aqui apresentados mostram a execução através do TERMINAL disponibilizado pelo proprio painel cPanel.

Tambem recomendamos se possível, que realize ssh de sua maquina local como prompt de comando em maquinas windows ou terminal mac em maquinas com macOs, o que pode evitar alguns issues do gerenciador/Terminal do painel cPanel.

Caso queira saber como realizar login no SSH fora do painel cPanel, veja como Clicando aqui.

1. Em Ação, ainda na aba Aplicativos, clique no ícone Terminal.

2. No Terminal basta entrar no diretorio do aplicativo que fez deploy. O comando npm é reconhecido assim que entra na pasta de seu aplicativo, ou seja, acesse o diretório onde esta localizado seu aplicativo, como por exemplo:

cd applications/nextapp  - Local onde esta localizado o aplicativo que foi feito deploy

3. Agora, execute o comando npm install que lerá seu arquivo package.js e recriará o diretório node_modules com as respectivas dependências:

npm install

Figura: npm executado

Alterando o arquivo next.config.js

1. Ainda no terminal SSH, altere/edite o arquivo next.config.js para o conteúdo abaixo:

/* @type {import('next').NextConfig} /
const nextConfig = {
	 output: 'standalone',  //Esta linha adicional ao arquivo
}

module.exports = nextConfig

2. Realize o comando abaixo para gerar o build standalone:

PS: Recomendamos que o build seja realizado localmente ou fora do terminal do cPanel, logando no SSH em sua maquina local, já que o mesmo pode não suportar alguns recursos de comandos nodejs, lhe gerando erros de memoria.

npm run build

3. Após o build acima, é gerado o arquivo server.js. Este arquivo precisa ser movido para a raiz do aplicativo para operar corretamente, ou seja:

• Onde é gerado - ~/applications/nextapp/.next/standalone/server.js

• Onde ele deve ficar - ~/applications/nextapp/server.js

Iniciando o aplicativo pelo painel

Na aba Aplicativos, você pode iniciar o projeto através do ícone de Start e Stop do aplicativo.

Iniciando o aplicativo via terminal SSH

Dentro do diretório virtual do aplicativo, basta digitar o seguinte comando:

pm2 start app.yaml

Exemplo de teste realizado

Com o aplicativo registrado e iniciado corretamente com sucesso, temos o acesso testado e 100% funcional, no qual demonstramos em imagens abaixo:

PS: Lembrando que este endereço de acesso foi utilizado para testes e acessa-lo no momento não reproduz o uso do aplicativo de teste.

Testes de acesso deve ser realizado com seu domínio e/ou subdomínio de acesso no qual registrou seu aplicativo.

Logs

A aba de Logs apresenta saídas informativas realizadas pelo PM2, assim como erros ou informações que seu aplicativo lançar.