Cum se instalează React.js în cPanel: Ghid 2024

Publicat: 2024-09-01
Cuprins
  • Cerințe preliminare
  • Pasul 1: Pregătiți-vă aplicația React.js
  • Pasul 2: Configurați mediul dvs. cPanel
  • Pasul 3: Configurați setările serverului
  • Pasul 4: Finalizare și testare
  • Depanare
  • Concluzie

React.js a devenit una dintre cele mai populare biblioteci JavaScript pentru construirea de interfețe de utilizator dinamice, interactive. Deși este folosit în mod obișnuit cu cadre backend precum Node.js, mulți dezvoltatori caută să-și implementeze aplicațiile React.js în medii de găzduire partajată care utilizează cPanel, un panou de control popular pentru gestionarea conturilor de găzduire web.

Acest articol vă va ghida prin procesul de instalare și implementare a unei aplicații React.js folosind cPanel, chiar dacă furnizorul dvs. de găzduire nu se adresează în mod specific cadrelor JavaScript.

Puteți citi și: Cele mai bune 7 găzduire pentru aplicațiile React 2024 (comparativ)

Cerințe preliminare

Înainte de a vă scufunda în procesul de instalare, există câteva condiții preliminare pe care ar trebui să le aveți la dispoziție:

  1. O aplicație React.js gata de implementare : asigurați-vă că aplicația React este completă și pregătită pentru producție. Aceasta înseamnă că toată munca de dezvoltare este finalizată și sunteți gata să creați o versiune a aplicației care poate fi oferită utilizatorilor.
  2. Acces la cPanel : aveți nevoie de acces la cPanel, care este oferit de serviciul dvs. de găzduire web. Majoritatea furnizorilor de găzduire partajată oferă cPanel ca parte a serviciului lor. (Recomandăm Hostinger cu oferta noastră specială folosind codul de cupon „ Codless ”).
  3. Un nume de domeniu : un domeniu sau subdomeniu înregistrat în care veți implementa aplicația React. Dacă nu ați configurat încă acest lucru, puteți fie să utilizați un domeniu existent, fie să creați un subdomeniu prin cPanel.

Pasul 1: Pregătiți-vă aplicația React.js

Generați o versiune de producție

Primul pas în implementarea aplicației dvs. React.js în cPanel este să creați o versiune de producție a aplicației dvs. Această versiune este optimizată pentru performanță, asigurându-se că rulează eficient pe web. Urmați acești pași ar trebui efectuati pe computerul dvs. local.

  1. Deschideți terminalul : navigați la directorul proiectului React folosind terminalul sau promptul de comandă.
  2. Rulați comanda Build : npm run build Dacă utilizați Yarn ca manager de pachete, ați folosi: yarn build Această comandă generează un folder build în directorul dvs. de proiect. Dosarul build conține toate fișierele statice necesare pentru rularea aplicației dvs., inclusiv fișierele HTML, CSS și JavaScript.

Previzualizați construcția (opțional)

Înainte de implementare, este o idee bună să previzualizați versiunea de producție la nivel local pentru a vă asigura că totul funcționează corect. Puteți face acest lucru folosind un instrument simplu de server:

  1. Instalați Servire la nivel global : npm install -g serve
  2. Servire Build : serve -s build Această comandă va porni un server local și va servi aplicația dvs. din directorul build , permițându-vă să o previzualizați în browser.

Pasul 2: Configurați mediul dvs. cPanel

Odată ce aplicația React este gata de implementare, trebuie să configurați mediul cPanel.

Creați un subdomeniu (opțional)

Dacă doriți ca aplicația dvs. React să fie accesibilă printr-un subdomeniu (de exemplu, react.yourdomain.com ), trebuie să creați una în cPanel:

  1. Conectați-vă la cPanel : utilizați portalul de conectare al furnizorului dvs. de găzduire pentru a accesa cPanel.
  2. Navigați la Subdomenii : în secțiunea Domenii, faceți clic pe „Subdomenii”.
  3. Creați un nou subdomeniu : introduceți numele dorit pentru subdomeniul dvs. și specificați directorul rădăcină a documentului. Dacă părăsiți setările implicite, cPanel va crea un nou director sub public_html cu numele subdomeniului dvs.

Încărcați fișierele de compilare

Cu versiunea de producție gata, acum o puteți încărca pe server.

  1. Accesați Managerul de fișiere : În cPanel, găsiți „Manager de fișiere” în secțiunea „Fișiere”.
  2. Navigați la directorul dorit : dacă ați creat un subdomeniu, navigați la directorul corespunzător (de exemplu, public_html/react ). Dacă implementați pe domeniul principal, utilizați directorul public_html .
  3. Încărcați dosarul de compilare :
    • Mai întâi, comprimați folderul build de pe mașina dvs. locală într-un fișier ZIP.
    • Utilizați butonul „Încărcare” din Managerul de fișiere pentru a încărca acest fișier ZIP în directorul dorit.
    • Odată încărcat, faceți clic dreapta pe fișier și selectați „Extract” pentru a decomprima conținutul

Pasul 3: Configurați setările serverului

După încărcarea fișierelor de compilare, poate fi necesar să configurați unele setări de server, mai ales dacă aplicația dvs. React folosește rutarea pe partea client cu React Router.

Configurați .htaccess (Opțional)

Dacă aplicația dvs. utilizează React Router, care se bazează pe API-ul istoric pushState HTML5, serverul dvs. trebuie configurat pentru a gestiona corect solicitările. Acest lucru este deosebit de important dacă utilizatorii pot naviga direct către alte rute decât pagina de pornire.

  1. Localizați sau creați .htaccess :
    • În directorul public_html sau subdomeniu, verificați dacă există un fișier .htaccess .
    • Dacă nu, creați un fișier nou numit .htaccess .
  2. Adăugați reguli de rutare :
    • Deschideți fișierul .htaccess și adăugați următoarea configurație: cod bashCopy Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]
    Această configurație asigură că toate solicitările sunt direcționate prin fișierul index.html , care este esențial pentru aplicațiile cu o singură pagină, cum ar fi cele create cu React​.

Pasul 4: Finalizare și testare

Cu totul încărcat și configurat, următorul pas este să vă finalizați implementarea și să vă asigurați că totul funcționează conform așteptărilor.

Verificați permisiunile fișierelor

Asigurați-vă că fișierele și directoarele au permisiunile corecte pentru a fi accesate de serverul web. În general, directoarele ar trebui să aibă permisiunile setate la 755 și fișierele la 644 .

Testați implementarea

Vizitați domeniul sau subdomeniul dvs. (de exemplu, react.yourdomain.com ) într-un browser web pentru a verifica dacă aplicația dvs. React funcționează fără probleme. Verificați toate paginile și funcțiile pentru a vă asigura că totul funcționează corect.

Dacă întâmpinați probleme, instrumentele de dezvoltare ale browserului pot fi utile în diagnosticarea problemelor. În plus, jurnalele de erori ale cPanel pot oferi informații despre problemele de pe partea serverului.

Depanare

Implementarea unei aplicații React pe cPanel poate duce ocazional la probleme. Iată câteva probleme comune și soluțiile lor:

  • Erori de rutare : dacă navigarea către diferite pagini ale aplicației dvs. are ca rezultat erori 404, asigurați-vă că fișierul .htaccess este configurat corect pentru a gestiona rutarea pe partea client.
  • Erori de fișier nu a fost găsit : verificați de două ori dacă toate fișierele din folderul build au fost încărcate corect și că se află în directorul corect de pe serverul dvs.
  • Permisiuni incorecte pentru fișiere : Dacă fișierele nu se încarcă, verificați dacă permisiunile pentru fișiere sunt setate corect ( 755 pentru directoare și 644 pentru fișiere).
  • Probleme de stocare în cache : uneori, modificările pot să nu apară imediat din cauza stocării în cache. Goliți memoria cache a browserului sau încercați să accesați site-ul în modul incognito pentru a vedea dacă problema persistă.

Concluzie

Implementarea unei aplicații React.js pe un server găzduit de cPanel poate părea dificilă la început, mai ales dacă sunteți obișnuit cu procese de implementare mai automatizate cu servicii precum Vercel sau Netlify sau consultați articolul nostru: 10 cei mai buni furnizori de găzduire Node.js din 2024 ( Ieftin și gratuit). Cu toate acestea, urmând pașii menționați în acest ghid, puteți pune în funcțiune aplicația React pe cPanel.

Acest proces include pregătirea aplicației React pentru producție, configurarea mediului cPanel, configurarea setărilor necesare pentru server și depanarea oricăror probleme care apar. Odată finalizată, aplicația dvs. React.js va fi live și accesibilă lumii prin domeniul sau subdomeniul dvs.

Pe măsură ce câștigați mai multă experiență, puteți explora subiecte mai avansate, cum ar fi integrarea serviciilor de backend, configurarea conductelor de implementare continuă sau optimizarea în continuare a performanței. Deocamdată, bucură-te de împărtășirea proiectelor tale React cu toată lumea!