Como instalar React.js no cPanel: Guia 2024

Publicados: 2024-09-01
Índice
  • Pré-requisitos
  • Etapa 1: prepare seu aplicativo React.js
  • Etapa 2: configure seu ambiente cPanel
  • Etapa 3: definir as configurações do servidor
  • Etapa 4: finalização e teste
  • Solução de problemas
  • Conclusão

React.js se tornou uma das bibliotecas JavaScript mais populares para a construção de interfaces de usuário dinâmicas e interativas. Embora seja comumente usado com estruturas de back-end como Node.js, muitos desenvolvedores procuram implantar seus aplicativos React.js em ambientes de hospedagem compartilhada que usam cPanel, um painel de controle popular para gerenciar contas de hospedagem na web.

Este artigo irá guiá-lo através do processo de instalação e implantação de um aplicativo React.js usando cPanel, mesmo que seu provedor de hospedagem não atenda especificamente a estruturas JavaScript.

Você também pode ler: 7 melhores hospedagem para aplicativos React 2024 (comparado)

Pré-requisitos

Antes de mergulhar no processo de instalação, existem alguns pré-requisitos que você deve ter:

  1. Um aplicativo React.js pronto para implantação : certifique-se de que seu aplicativo React esteja completo e pronto para produção. Isso significa que todo o trabalho de desenvolvimento está concluído e você está pronto para criar uma versão do aplicativo que possa ser veiculada aos usuários.
  2. Acesso ao cPanel : Você precisa de acesso ao cPanel, que é fornecido pelo seu serviço de hospedagem na web. A maioria dos provedores de hospedagem compartilhada oferece cPanel como parte de seus serviços. (Recomendamos a Hostinger com nossa oferta especial usando o código de cupom “ Codeless “)
  3. Um nome de domínio : um domínio ou subdomínio registrado onde você implantará seu aplicativo React. Se ainda não configurou isso, você pode usar um domínio existente ou criar um subdomínio através do cPanel.

Etapa 1: prepare seu aplicativo React.js

Gerar uma compilação de produção

A primeira etapa para implantar seu aplicativo React.js no cPanel é criar uma versão de produção do seu aplicativo. Essa compilação é otimizada para desempenho, garantindo que seja executada com eficiência na web. Siga estas etapas que devem ser executadas em seu computador local.

  1. Abra o Terminal : Navegue até o diretório do projeto React usando seu terminal ou prompt de comando.
  2. Execute o comando Build : npm run build Se você estiver usando o Yarn como seu gerenciador de pacotes, você usaria: yarn build Este comando gera uma pasta build no diretório do seu projeto. A pasta build contém todos os arquivos estáticos necessários para executar seu aplicativo, incluindo os arquivos HTML, CSS e JavaScript.

Visualize a compilação (opcional)

Antes de implantar, é uma boa ideia visualizar o build de produção localmente para garantir que tudo esteja funcionando corretamente. Você pode fazer isso usando uma ferramenta de servidor simples:

  1. Instale o Serve Globalmente : npm install -g serve
  2. Servir o Build : serve -s build Este comando iniciará um servidor local e servirá seu aplicativo a partir do diretório build , permitindo que você o visualize em seu navegador.

Etapa 2: configure seu ambiente cPanel

Assim que seu aplicativo React estiver pronto para implantação, você precisará configurar seu ambiente cPanel.

Crie um subdomínio (opcional)

Se você deseja que seu aplicativo React seja acessível por meio de um subdomínio (por exemplo, react.yourdomain.com ), você precisa criar um no cPanel:

  1. Faça login no cPanel : Use o portal de login do seu provedor de hospedagem para acessar o cPanel.
  2. Navegue até Subdomínios : Na seção Domínios, clique em “Subdomínios”.
  3. Crie um novo subdomínio : Digite o nome desejado para o seu subdomínio e especifique o diretório raiz do documento. Se você deixar as configurações padrão, o cPanel criará um novo diretório em public_html com o nome do seu subdomínio.

Carregar os arquivos de construção

Com a compilação de produção pronta, agora você pode carregá-la em seu servidor.

  1. Acesse o Gerenciador de Arquivos : No cPanel, localize o “Gerenciador de Arquivos” na seção “Arquivos”.
  2. Navegue até o diretório desejado : se você criou um subdomínio, navegue até o diretório correspondente (por exemplo, public_html/react ). Se você estiver implantando no domínio principal, use o diretório public_html .
  3. Faça upload da pasta de construção :
    • Primeiro, compacte a pasta build em sua máquina local em um arquivo ZIP.
    • Use o botão “Upload” no Gerenciador de Arquivos para carregar este arquivo ZIP para o diretório desejado.
    • Uma vez carregado, clique com o botão direito no arquivo e selecione “Extrair” para descompactar o conteúdo

Etapa 3: definir as configurações do servidor

Depois de fazer upload dos arquivos de construção, pode ser necessário definir algumas configurações do servidor, especialmente se seu aplicativo React usar roteamento do lado do cliente com React Router.

Configurar .htaccess (opcional)

Se seu aplicativo usa React Router, que depende da API de histórico pushState HTML5, seu servidor precisa ser configurado para lidar com solicitações corretamente. Isto é particularmente importante se os usuários puderem navegar diretamente para rotas diferentes da página inicial.

  1. Localize ou crie .htaccess :
    • Em seu diretório public_html ou subdomínio, verifique se existe um arquivo .htaccess .
    • Caso contrário, crie um novo arquivo chamado .htaccess .
  2. Adicionar regras de roteamento :
    • Abra o arquivo .htaccess e adicione a seguinte configuração:bashCopy code Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]
    Essa configuração garante que todas as solicitações sejam roteadas através do arquivo index.html , que é essencial para aplicações de página única como aquelas construídas com React.

Etapa 4: finalização e teste

Com tudo carregado e configurado, a próxima etapa é finalizar sua implantação e garantir que tudo esteja funcionando conforme o esperado.

Verifique as permissões do arquivo

Certifique-se de que os arquivos e diretórios tenham as permissões corretas para serem acessados ​​pelo servidor web. Geralmente, os diretórios devem ter permissões definidas como 755 e arquivos como 644 .

Teste a implantação

Visite seu domínio ou subdomínio (por exemplo, react.yourdomain.com ) em um navegador da web para verificar se seu aplicativo React está funcionando perfeitamente. Verifique todas as páginas e recursos para garantir que tudo funciona corretamente.

Se você encontrar algum problema, as ferramentas de desenvolvedor do navegador podem ser úteis para diagnosticar problemas. Além disso, os logs de erros do cPanel podem fornecer informações sobre problemas do servidor.

Solução de problemas

A implantação de um aplicativo React no cPanel pode ocasionalmente levar a problemas. Aqui estão alguns problemas comuns e suas soluções:

  • Erros de roteamento : se navegar para páginas diferentes do seu aplicativo resultar em erros 404, certifique-se de que seu arquivo .htaccess esteja configurado corretamente para lidar com o roteamento do lado do cliente.
  • Erros de arquivo não encontrado : verifique novamente se todos os arquivos da pasta build foram carregados corretamente e se estão no diretório correto em seu servidor.
  • Permissões de arquivo incorretas : se os arquivos não estiverem sendo carregados, verifique se as permissões de arquivo estão definidas corretamente ( 755 para diretórios e 644 para arquivos).
  • Problemas de cache : às vezes, as alterações podem não aparecer imediatamente devido ao cache. Limpe o cache do navegador ou tente acessar o site no modo de navegação anônima para ver se o problema persiste.

Conclusão

Implantar um aplicativo React.js em um servidor hospedado por cPanel pode parecer desafiador no início, especialmente se você estiver acostumado com processos de implantação mais automatizados com serviços como Vercel ou Netlify ou verifique nosso artigo: 10 melhores provedores de hospedagem Node.js de 2024 ( Barato e grátis). No entanto, seguindo as etapas descritas neste guia, você pode colocar seu aplicativo React em funcionamento no cPanel.

Este processo inclui preparar seu aplicativo React para produção, configurar seu ambiente cPanel, definir as configurações de servidor necessárias e solucionar quaisquer problemas que surjam. Depois de concluído, seu aplicativo React.js estará ativo e acessível ao mundo por meio de seu domínio ou subdomínio.

À medida que você ganha mais experiência, você pode explorar tópicos mais avançados, como integração de serviços de back-end, configuração de pipelines de implantação contínua ou otimização adicional do desempenho. Por enquanto, divirta-se compartilhando seus projetos React com o mundo!