Exemplo de deploy com aplicativo Next.js - Histórico de revisão

Integratorhost em 18h36min de 17 de julho de 2025

2025-07-17T18:36:42Z

Integratorhost em 03h32min de 17 de julho de 2024

2024-07-17T03:32:44Z

Integratorhost em 18h44min de 21 de novembro de 2023

2023-11-21T18:44:02Z

Integratorhost em 15h23min de 25 de setembro de 2023

2023-09-25T15:23:46Z

Integratorhost em 22h16min de 22 de setembro de 2023

2023-09-22T22:16:39Z

Integratorhost em 22h15min de 22 de setembro de 2023

2023-09-22T22:15:52Z

Integratorhost em 16h18min de 21 de setembro de 2023

2023-09-21T16:18:18Z

Integratorhost: Criou página com 'Planos promocionais| ---- == Antes de começar == As orientaç...'

2023-09-21T16:17:30Z

Criou página com 'File:Nodepromo-2021.jpg ---- == Antes de começar == As orientaç...'

Página nova

[[File:Nodepromo-2021.jpg|center| 700px||border|link=https://integrator.com.br/plano-hospedagem-php-nodejs|Planos promocionais|]]

----

== 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, [http://wiki.integrator.com.br/exemplos/nextapp.zip Clique Aqui.] 

== O arquivo server.js ==
O arquivo '''server.js''' possui o código apresentado na Listagem abaixo. Veja o detalhe da porta que não é definida diretamente. Usamos a variável '''process.env.PORT''' para que o painel forneça a porta.
<pre>

const express = require('express');
const path = require('path')

const dir = path.join(__dirname)

process.env.NODE_ENV = 'production'
process.chdir(__dirname)

// Make sure commands gracefully respect termination signals (e.g. from Docker)
// Allow the graceful termination to be manually configurable
if (!process.env.NEXT_MANUAL_SIG_HANDLE) {
process.on('SIGTERM', () => process.exit(0))
process.on('SIGINT', () => process.exit(0))
}

const currentPort = parseInt(process.env.PORT, 10) || 3000
const hostname = process.env.HOSTNAME || '0.0.0.0'

let keepAliveTimeout = parseInt(process.env.KEEP_ALIVE_TIMEOUT, 10)
const nextConfig = {"env":{},"webpack":null,"eslint":{"ignoreDuringBuilds":false},"typescript":{"ignoreBuildErrors":false,"tsconfigPath":"tsconfig.json"},"distDir":"./.next","cleanDistDir":true,"assetPrefix":"","configOrigin":"next.config.js","useFileSystemPublicRoutes":true,"generateEtags":true,"pageExtensions":["tsx","ts","jsx","js"],"poweredByHeader":true,"compress":true,"analyticsId":"","images":{"deviceSizes":[640,750,828,1080,1200,1920,2048,3840],"imageSizes":[16,32,48,64,96,128,256,384],"path":"/_next/image","loader":"default","loaderFile":"","domains":[],"disableStaticImages":false,"minimumCacheTTL":60,"formats":["image/webp"],"dangerouslyAllowSVG":false,"contentSecurityPolicy":"script-src 'none'; frame-src 'none'; sandbox;","contentDispositionType":"inline","remotePatterns":[],"unoptimized":false},"devIndicators":{"buildActivity":true,"buildActivityPosition":"bottom-right"},"onDemandEntries":{"maxInactiveAge":60000,"pagesBufferLength":5},"amp":{"canonicalBase":""},"basePath":"","sassOptions":{},"trailingSlash":false,"i18n":null,"productionBrowserSourceMaps":false,"optimizeFonts":true,"excludeDefaultMomentLocales":true,"serverRuntimeConfig":{},"publicRuntimeConfig":{},"reactProductionProfiling":false,"reactStrictMode":null,"httpAgentOptions":{"keepAlive":true},"outputFileTracing":true,"staticPageGenerationTimeout":60,"swcMinify":true,"output":"standalone","modularizeImports":{"@mui/icons-material":{"transform":"@mui/icons-material/{{member}}"},"date-fns":{"transform":"date-fns/{{member}}"},"lodash":{"transform":"lodash/{{member}}"},"lodash-es":{"transform":"lodash-es/{{member}}"},"ramda":{"transform":"ramda/es/{{member}}"},"react-bootstrap":{"transform":{"useAccordionButton":"modularize-import-loader?name=useAccordionButton&from=named&as=default!react-bootstrap/AccordionButton","*":"react-bootstrap/{{member}}"}},"antd":{"transform":"antd/lib/{{kebabCase member}}"},"ahooks":{"transform":{"createUpdateEffect":"modularize-import-loader?name=createUpdateEffect&from=named&as=default!ahooks/es/createUpdateEffect","*":"ahooks/es/{{member}}"}},"@ant-design/icons":{"transform":{"IconProvider":"modularize-import-loader?name=IconProvider&from=named&as=default!@ant-design/icons","createFromIconfontCN":"@ant-design/icons/es/components/IconFont","getTwoToneColor":"modularize-import-loader?name=getTwoToneColor&from=named&as=default!@ant-design/icons/es/components/twoTonePrimaryColor","setTwoToneColor":"modularize-import-loader?name=setTwoToneColor&from=named&as=default!@ant-design/icons/es/components/twoTonePrimaryColor","*":"@ant-design/icons/lib/icons/{{member}}"}},"next/server":{"transform":"next/dist/server/web/exports/{{ kebabCase member }}"}},"experimental":{"serverMinification":true,"serverSourceMaps":false,"caseSensitiveRoutes":false,"useDeploymentId":false,"useDeploymentIdServerActions":false,"clientRouterFilter":true,"clientRouterFilterRedirects":false,"fetchCacheKeyPrefix":"","middlewarePrefetch":"flexible","optimisticClientCache":true,"manualClientBasePath":false,"cpus":11,"memoryBasedWorkersCount":false,"sharedPool":true,"isrFlushToDisk":true,"workerThreads":false,"optimizeCss":false,"nextScriptWorkers":false,"scrollRestoration":false,"externalDir":false,"disableOptimizedLoading":false,"gzipSize":true,"craCompat":false,"esmExternals":true,"isrMemoryCacheSize":52428800,"fullySpecified":false,"outputFileTracingRoot":"/home/cloud30integrato/applications/nextapp","swcTraceProfiling":false,"forceSwcTransforms":false,"largePageDataBytes":128000,"adjustFontFallbacks":false,"adjustFontFallbacksWithSizeAdjust":false,"typedRoutes":false,"instrumentationHook":false,"optimizePackageImports":["lucide-react","@headlessui/react","@headlessui-float/react","@heroicons/react/20/solid","@heroicons/react/24/solid","@heroicons/react/24/outline","@visx/visx","@tremor/react","rxjs","@mui/material","recharts","@material-ui/core","react-use","@material-ui/icons","@tabler/icons-react","mui-core","react-icons/ai","react-icons/bi","react-icons/bs","react-icons/cg","react-icons/ci","react-icons/di","react-icons/fa","react-icons/fa6","react-icons/fc","react-icons/fi","react-icons/gi","react-icons/go","react-icons/gr","react-icons/hi","react-icons/hi2","react-icons/im","react-icons/io","react-icons/io5","react-icons/lia","react-icons/lib","react-icons/lu","react-icons/md","react-icons/pi","react-icons/ri","react-icons/rx","react-icons/si","react-icons/sl","react-icons/tb","react-icons/tfi","react-icons/ti","react-icons/vsc","react-icons/wi"],"trustHostHeader":false},"configFileName":"next.config.js"}

process.env.__NEXT_PRIVATE_STANDALONE_CONFIG = JSON.stringify(nextConfig)
process.env.__NEXT_PRIVATE_PREBUNDLED_REACT = false
? 'experimental'
: 'next'

require('next')
const { startServer } = require('next/dist/server/lib/start-server')

if (
Number.isNaN(keepAliveTimeout) ||
!Number.isFinite(keepAliveTimeout) ||
keepAliveTimeout < 0
) {
keepAliveTimeout = undefined
}

startServer({
dir,
isDev: false,
config: nextConfig,
hostname,
port: currentPort,
allowRetry: false,
keepAliveTimeout,
useWorkers: true,
}).catch((err) => {
console.error(err);
process.exit(1);
});</pre>

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

[[File: Appnextjs-conf-painel.png ‎|Figura: Registrando o aplicativo pelo painel|thumb|600px|none|alt=Registro do aplicativo|link=]]
 

* '''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 [[Acesso SSH| clicando aqui]]

1. Em '''Ação''', ainda na aba '''Aplicativos''', clique no ícone '''Terminal'''.
[[File: Acesso-terminal-painel-nodejs.jpg ‎|thumb|300px|none|alt=Alt text|link=]]

2. No '''Terminal''' basta entrar no ambiente virtual para executar o npm. 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. Tambem pode ser acessado o ambiente virtual copiando o caminho que é informado no painel ao lado do nome do aplicativo no sinal de interrogação, como por exemplo:

source ~/nodevenv/exemplonoderotas/bin/activate && cd ~/applications/exemplonoderotas

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

[[File: Npm-nextapp.png ‎|Figura: npm executado|thumb|600px|none|alt=npm executado|link=]]

== Alterando o arquivo next.config.js ==

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

<pre>

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

module.exports = nextConfig

</pre>

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

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.

[[File: start-stop-nodejs-javascript-express.jpg ‎|none|alt=Alt text|link=]]

== 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:

[[File: Exemplo-nextjs-funcional.png ‎|thumb|550px|none|alt=Alt text|link=]]

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

[[Categoria:PAINEL INTEGRATOR NODE.JS]]
[[Categoria:TUTORIAIS]]

← Edição anterior		Edição das 18h36min de 17 de julho de 2025
Linha 1:		Linha 1:
−	[[File:Wiki-~~node~~-~~next~~-~~puppeteer~~.jpg\|center\| 700px\|\|border\|link=https://integrator.com.br/plano-~~hospedagem~~-~~php-nodejs.html~~\|Planos ~~Nodejs~~\|]]	+	[[File:Wiki-banner-icp-2025.jpg\|center\| 700px\|\|border\|link=https://integrator.com.br/plano-vps-icp\|Planos VPS ICP\|]]

	== Antes de começar ==		== Antes de começar ==

← Edição anterior		Edição das 03h32min de 17 de julho de 2024
Linha 1:		Linha 1:
		+	[[File:Wiki-node-next-puppeteer.jpg\|center\| 700px\|\|border\|link=https://integrator.com.br/plano-hospedagem-php-nodejs.html\|Planos Nodejs\|]]

	== Antes de começar ==		== Antes de começar ==

← Edição anterior		Edição das 18h44min de 21 de novembro de 2023
Linha 77:		Linha 77:

	2. Realize o comando abaixo para gerar o build standalone:		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		npm run build

← Edição anterior		Edição das 15h23min de 25 de setembro de 2023
Linha 1:		Linha 1:
−	~~[[File:Nodepromo-2021.jpg\|center\| 700px\|\|border\|link=https://integrator.com.br/plano-hospedagem-php-nodejs\|Planos promocionais\|]]~~
−
−
−	~~----~~

	== Antes de começar ==		== Antes de começar ==

← Edição anterior		Edição das 22h16min de 22 de setembro de 2023
Linha 44:		Linha 44:
	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.		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 [[Acesso SSH\| ~~clicando~~ aqui]]	+	Caso queira saber como realizar login no SSH fora do painel cPanel, veja como [[Acesso SSH\| Clicando aqui]].

@@ Linha 13: / Linha 13: @@
 <span style="color:green;"> Para baixar o exemplo completo, [http://wiki.integrator.com.br/exemplos/nextapp.zip Clique Aqui.] </span>
@@ Linha 106: / Linha 50: @@
 [[File: Acesso-terminal-painel-nodejs.jpg ‎|thumb|300px|none|alt=Alt text|link=]]
-. No '''Terminal''' basta entrar no ambiente virtual para executar o npm. 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:
+. 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
-. Tambem pode ser acessado o ambiente virtual copiando o caminho que é informado no painel ao lado do nome do aplicativo no sinal de interrogação, como por exemplo:
+. Agora, execute o comando '''npm install''' que lerá seu arquivo '''package.js''' e recriará o diretório node_modules com as respectivas dependências:
-−
- source ~/nodevenv/exemplonoderotas/bin/activate && cd ~/applications/exemplonoderotas
-−
-. 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

← Edição anterior		Edição das 16h18min de 21 de setembro de 2023
Linha 169:		Linha 169:

	[[File: Exemplo-nextjs-funcional.png ‎\|thumb\|550px\|none\|alt=Alt text\|link=]]		[[File: Exemplo-nextjs-funcional.png ‎\|thumb\|550px\|none\|alt=Alt text\|link=]]
−


Linha 175:		Linha 174:

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