Cum să implementați aplicația Next.js pe cPanel (ghid)

Publicat: 2023-07-17
Cuprins
  • Ce este Next.js
  • Ce este cPanel
  • Implementați aplicația Next.js pe cPanel
  • Avantaje și dezavantaje ale implementării unui NextJ în cPanel
  • Întrebări frecvente
  • Alte resurse
  • Concluzie

Învățați să implementați o aplicație Next.js pe cPanel într-o manieră perfectă și eficientă. Vă voi ghida pas cu pas în acest proces.

Înainte de a vă scufunda, să despachetăm ce sunt Next.js și cPanel, doar în cazul în care sunteți nou în acești termeni.

Ce este Next.js

Next.js este un cadru elegant, bazat pe React.js. Este un vrăjitor când vine vorba de construirea de aplicații de randare pe server (SSR). React.js acceptă doar realizarea de aplicații cu o singură pagină (SPA) în mod implicit. Cu toate acestea, Next.js face un salt cu caracteristica sa atractivă SSR. Ce altceva? Next.js are o performanță cu un sistem de rutare bazat pe fișiere, printre alte avantaje.

Ce este cPanel

Trecerea la cPanel. Gândiți-vă la asta ca la un software care simplifică gestionarea serverului. Aduce la masa ta o serie de instrumente. Manager de fișiere, Manager de baze de date și Manager de nume de domeniu sunt doar câteva exemple.

Acum că ne-am împrietenit cu Next.js și cPanel, să continuăm cu misiunea noastră principală: implementarea unei aplicații Next.js pe cPanel. Presupunând că aveți o aplicație Next.js, o gazdă web cu cPanel și un nume de domeniu conectat, să mergem înainte.

Implementați aplicația Next.js pe cPanel

Pasul 1 : Începeți prin a configura un server personalizat Next.js. Aveți nevoie de un fișier server.js în directorul rădăcină al proiectului, populat cu codul necesar. Căutați un ghid oficial Next.js pentru ajutor.

 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}`) }) })

Pasul 2 : Modificați fișierul package.json. Acest pas face mediul „pregătit pentru producție” și activează fișierul server.js.

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

Pasul 3 : Este timpul să vă construiți aplicația Next.js. Puteți face acest lucru cu comanda npm run build sau yarn run build din terminalul dvs.

Pasul 4 : După construirea, găsiți fișierele de proiect Next.js în managerul de fișiere. Dacă nu vedeți fișiere ascunse, activați vizibilitatea. Evitați folderele node_modules și .git, README.md și fișierele .gitignore. Selectați toate celelalte fișiere și foldere și creați un fișier ZIP.

Pasul 5 : Acum, conectați-vă la găzduirea web cPanel. Încărcați și extrageți fișierul ZIP în folderul rădăcină al numelui de domeniu.

Pasul 6 : fișierele de proiect sunt gata. Mergeți la secțiunea Software din cPanel. Faceți clic pe Configurare aplicație Node.js, urmat de butonul + Creare aplicație. Configurați aplicația Node.js, ținând cont de versiunea Node.js, modul aplicației de producție, rădăcina aplicației, adresa URL și fișierul de pornire (server.js).

Terminați făcând clic pe CREATE. Odată creat, opriți-l pentru un timp. Derulați în jos la secțiunea Fișiere de configurare detectate. Rulați instalarea NPM pentru a obține toate pachetele Node.js. În cele din urmă, faceți clic pe START APP.

Iată! Deschideți numele de domeniu în browser. Aplicația dvs. Next.js este acum live. Mare treabă la implementarea cu succes!

Partajarea acestei metode de implementare a aplicațiilor Next.js pe cPanel a fost o bucurie. Mult succes și codare fericită!

Avantaje și dezavantaje ale implementării unui NextJ în cPanel

Implementarea unei aplicații Next.js pe cPanel vine cu o varietate de beneficii. Iată câteva argumente pro și contra de luat în considerare.

Pro :

  1. Ușor de utilizat : cPanel oferă o interfață grafică ușor de utilizat, care simplifică procesul de implementare.
  2. Automatizare : cPanel include multe instrumente automate care pot gestiona sarcini precum crearea de baze de date, gestionarea fișierelor site-ului web, configurarea e-mailului și multe altele.
  3. Versatilitate : cPanel acceptă o gamă largă de aplicații, inclusiv aplicații Node.js, cum ar fi cele create cu Next.js.

Contra :

  1. Flexibilitate limitată : Deși cPanel este ușor de utilizat, uneori poate limita flexibilitatea și controlul asupra mediului server, datorită interfeței sale simplificate.
  2. Probleme potențiale de compatibilitate : Unii utilizatori au raportat probleme la implementarea aplicațiilor Next.js pe platforme de găzduire partajată, cum ar fi întâlnirea de erori în timpul procesului de construire.

Întrebări frecvente

Care sunt beneficiile și limitările găzduirii unui site web Next.js pe cPanel?

Găzduirea unui site web Next.js pe cPanel poate avea mai multe avantaje, cum ar fi economii de costuri și păstrarea capabilităților Next.js. Cu toate acestea, există anumite limitări de care trebuie să fii conștient. De exemplu, cPanel nu acceptă funcții fără server și optimizare statică automată. Decizia de a găzdui pe cPanel ar trebui să se bazeze pe preferințele individuale și pe nevoile de afaceri.

Ce face configurația fișierului .htaccess la implementarea unei aplicații Next.js pe cPanel?

Configurația fișierului .htaccess este o parte critică a implementării unei aplicații Next.js pe cPanel. Acest fișier controlează comportamentul serverului atunci când întâlnește anumite condiții. Configurația specifică oferită în exemplu ajută la gestionarea corectă a cererilor și redirecționărilor.

Ce se întâmplă dacă întâmpin blocări sau probleme de redirecționare la implementarea unei aplicații Next.js pe cPanel?

Dacă întâmpinați blocări sau probleme de redirecționare la implementarea aplicației Next.js pe cPanel, o soluție ar putea fi crearea unui fișier de pornire numit app.js în folderul rădăcină. Trebuie să rulați aplicația ca o aplicație Node.js în acest scenariu.

Cum pot dezactiva optimizarea imaginii atunci când implementez o aplicație Next.js pe cPanel?

Se poate dezactiva optimizarea imaginii la implementarea unei aplicații Next.js pe cPanel, dar instrucțiunile exacte nu au fost incluse în informațiile furnizate. Pentru pași specifici, ar trebui să consultați documentația oficială Next.js sau tutorialele relevante.

Alte resurse

Cei mai buni furnizori de găzduire Next.JS

Cei mai buni furnizori de găzduire Node.js

Concluzie

Deși implementarea unei aplicații Next.js pe cPanel poate veni cu câteva provocări, beneficiile depășesc adesea dezavantajele. Simplitatea și automatizarea oferite de cPanel fac ca procesul de implementare să fie simplu și ușor de gestionat, chiar și pentru dezvoltatorii care sunt noi în acest proces. Cu acest ghid, ar trebui să fiți acum mai bine echipat pentru a vă implementa aplicațiile Next.js pe cPanel.