Como implantar o aplicativo Next.js no cPanel (Guia)

Publicados: 2023-07-17
Índice
  • O que é Next.js
  • O que é cPanel
  • Implantar o aplicativo Next.js no cPanel
  • Prós e contras de implantar um NextJs no cPanel
  • perguntas frequentes
  • Outros recursos
  • Conclusão

Aprender a implantar um aplicativo Next.js no cPanel de maneira simples e eficaz. Vou guiá-lo passo a passo neste processo.

Antes de nos aprofundarmos, vamos descompactar o que são Next.js e cPanel, caso você seja novo nesses termos.

O que é Next.js

Next.js é uma estrutura legal, baseada em React.js. É um assistente quando se trata de criar aplicativos de renderização do lado do servidor (SSR). O React.js suporta apenas a criação de aplicativos de página única (SPA) por padrão. No entanto, o Next.js avança com seu atraente recurso SSR. O que mais? O Next.js oferece um sistema de roteamento baseado em arquivo, entre outras vantagens.

O que é cPanel

Movendo-se para o cPanel. Pense nisso como um software que simplifica o gerenciamento do servidor. Ele traz para sua mesa uma série de ferramentas. Gerenciador de arquivos, Gerenciador de banco de dados e Gerenciador de nomes de domínio são apenas alguns exemplos.

Agora que fizemos amizade com o Next.js e o cPanel, vamos prosseguir com nossa missão principal: implantar um aplicativo Next.js no cPanel. Supondo que você tenha um aplicativo Next.js, um host da Web com cPanel e um nome de domínio vinculado, vamos em frente.

Implantar o aplicativo Next.js no cPanel

Etapa 1 : comece configurando um servidor Next.js personalizado. Você precisa de um arquivo server.js no diretório raiz do seu projeto, preenchido com o código necessário. Procure um guia oficial do Next.js para obter ajuda.

 const { createServer } = require('http') const { parse } = require('url') const next = require('next') const dev = process.env.NODE_ENV !== 'production' const hostname = 'localhost' const port = 3000 // when using middleware `hostname` and `port` must be provided below const app = next({ dev, hostname, port }) const handle = app.getRequestHandler() app.prepare().then(() => { createServer(async (req, res) => { try { // Be sure to pass `true` as the second argument to `url.parse`. // This tells it to parse the query portion of the URL. const parsedUrl = parse(req.url, true) const { pathname, query } = parsedUrl if (pathname === '/a') { await app.render(req, res, '/a', query) } else if (pathname === '/b') { await app.render(req, res, '/b', query) } else { await handle(req, res, parsedUrl) } } catch (err) { console.error('Error occurred handling', req.url, err) res.statusCode = 500 res.end('internal server error') } }) .once('error', (err) => { console.error(err) process.exit(1) }) .listen(port, () => { console.log(`> Ready on http://${hostname}:${port}`) }) })

Etapa 2 : ajuste o arquivo package.json. Esta etapa torna o ambiente 'pronto para produção' e ativa o arquivo server.js.

 { "scripts": { "start": "NODE_ENV=production node server.js" } }

Etapa 3 : Hora de criar seu aplicativo Next.js. Você pode fazer isso com o comando npm run build ou yarn run build em seu Terminal.

Passo 4 : Após a compilação, localize seus arquivos de projeto Next.js em seu gerenciador de arquivos. Se você não vir arquivos ocultos, ative a visibilidade. Evite pastas node_modules e .git, README.md e arquivos .gitignore. Selecione todos os outros arquivos e pastas e crie um arquivo ZIP.

Etapa 5 : Agora, faça login na sua hospedagem na web cPanel. Carregue e extraia o arquivo ZIP para a pasta raiz do seu nome de domínio.

Passo 6 : Seus arquivos de projeto estão prontos. Vá para a seção Software no seu cPanel. Clique em Setup Node.js App, seguido pelo botão + Create Application. Configure seu aplicativo Node.js, tendo em mente a versão do Node.js, modo de aplicativo de produção, raiz do aplicativo, URL e arquivo de inicialização (server.js).

Finalize clicando em CRIAR. Uma vez criado, pare por um tempo. Role para baixo até a seção Arquivos de configuração detectados. Execute o NPM Install para obter todos os pacotes Node.js. Por fim, clique em INICIAR APLICATIVO.

Ai está! Abra seu nome de domínio em seu navegador. Seu aplicativo Next.js agora está ativo. Ótimo trabalho na implantação bem-sucedida!

Compartilhar esse método de implantação de aplicativos Next.js no cPanel foi uma alegria. Boa sorte e codificação feliz!

Prós e contras de implantar um NextJs no cPanel

A implantação de um aplicativo Next.js no cPanel oferece vários benefícios. Aqui estão alguns prós e contras a serem considerados.

Prós :

  1. Fácil de usar : o cPanel fornece uma interface gráfica fácil de usar, que simplifica o processo de implantação.
  2. Automação : o cPanel inclui muitas ferramentas automatizadas que podem lidar com tarefas como criar bancos de dados, gerenciar arquivos de sites, configurar e-mail e muito mais.
  3. Versatilidade : o cPanel oferece suporte a uma ampla variedade de aplicativos, incluindo aplicativos Node.js, como os criados com o Next.js.

Contras :

  1. Flexibilidade Limitada : Embora o cPanel seja fácil de usar, às vezes pode limitar a flexibilidade e o controle sobre o ambiente do servidor devido à sua interface simplificada.
  2. Possíveis problemas de compatibilidade : alguns usuários relataram problemas ao implantar aplicativos Next.js em plataformas de hospedagem compartilhada, como encontrar erros durante o processo de compilação.

perguntas frequentes

Quais são os benefícios e limitações de hospedar um site Next.js no cPanel?

Hospedar um site Next.js no cPanel pode ter várias vantagens, como economia de custos e retenção dos recursos do Next.js. No entanto, existem algumas limitações das quais você deve estar ciente. Por exemplo, cPanel não suporta funções sem servidor e otimização estática automática. A decisão de hospedar no cPanel deve ser baseada nas preferências individuais e nas necessidades do negócio.

O que a configuração do arquivo .htaccess faz ao implantar um aplicativo Next.js no cPanel?

A configuração do arquivo .htaccess é uma parte crítica da implantação de um aplicativo Next.js no cPanel. Este arquivo controla o comportamento do servidor quando encontra certas condições. A configuração específica fornecida no exemplo ajuda a lidar com solicitações e redirecionamentos adequadamente.

O que acontece se eu encontrar falhas ou problemas de redirecionamento ao implantar um aplicativo Next.js no cPanel?

Se você tiver travamentos ou problemas de redirecionamento ao implantar seu aplicativo Next.js no cPanel, uma solução pode ser criar um arquivo de inicialização chamado app.js em sua pasta raiz. Você precisa executar seu aplicativo como um aplicativo Node.js neste cenário.

Como posso desativar a otimização de imagem ao implantar um aplicativo Next.js no cPanel?

Desativar a otimização de imagem ao implantar um aplicativo Next.js no cPanel pode ser feito, mas as instruções exatas não foram incluídas nas informações fornecidas. Para etapas específicas, consulte a documentação oficial do Next.js ou os tutoriais relevantes.

Outros recursos

Melhores Provedores de Hospedagem Next.JS

Melhores provedores de hospedagem Node.js

Conclusão

Embora a implantação de um aplicativo Next.js no cPanel possa apresentar alguns desafios, os benefícios geralmente superam as desvantagens. A simplicidade e a automação oferecidas pelo cPanel tornam o processo de implantação direto e gerenciável, mesmo para desenvolvedores que são novos no processo. Com este guia, você agora deve estar melhor equipado para implantar seus aplicativos Next.js no cPanel.