Een Next.js-toepassing migreren naar de Node.js Selector in cPanel

In dit artikel wordt uitgelegd hoe u een Next.js-toepassing voorbereidt en migreert, zodat deze kan worden uitgevoerd met de Node.js Selector in cPanel. De procedure omvat de projectvoorbereiding, verpakking, en applicatie-instellingen in cPanel.

Reikwijdte en vereisten

• Node.js Selector moet beschikbaar zijn op het hostingaccount
• De applicatie moet een aangepaste Node.js-server gebruiken
• Voor Next.js is de Node.js-versie vereist 18.17 of nieuwer

Deze workflow is van toepassing op applicatiehostingomgevingen zoals cPanel-hosting, en kunnen aanpassingen nodig zijn, afhankelijk van de applicatiestructuur.

Een Next.js-project voorbereiden op migratie

Als u al een bestaand Next.js-project heeft, begin vanaf stap 5.

Een voorbeeldproject maken

1. Zorg ervoor dat Node.js en npm lokaal zijn geïnstalleerd.
2. Open een terminal en maak een nieuw project aan:

npx create-next-app@latest

3. Geef het project een naam nextapp en accepteer de standaardopties.

Een aangepaste server maken

Next.js moet worden uitgevoerd met een aangepaste server om met de Node.js Selector te kunnen werken.

1. In de projectroot, maak een bestand met de naam server.js.
2. Voeg de volgende code toe:

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
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      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) {
      res.statusCode = 500
      res.end('internal server error')
    }
  }).listen(port)
})

3. Sla het bestand op.

Het startscript bijwerken

1. Open package.json.
2. Vervang de start script met het volgende:

"start": "NODE_ENV=production node server.js"

3. Sla het bestand op.

Het bouwen en verpakken van het project

1. Bouw de applicatie:

npm run build

2. Maak een ZIP-archief, met uitzondering van onnodige bestanden:

zip -r ../nextapp.zip . --exclude "node_modules/*" ".git/*" .gitignore README.md

Het archief wordt gemaakt in de bovenliggende map.

Bestanden uploaden naar cPanel

1. Log in op cPanel.
2. Open Bestandsbeheer.
3. Uploaden nextapp.zip naar uw rekening.
4. Maak een map met de naam nextapp binnen public_html.
5. Pak het ZIP-bestand uit in public_html/nextapp.

De Node.js-toepassing maken

1. Op de Hulpmiddelen pagina, klik Node.js-app instellen.
2. Klik Applicatie maken.
3. Selecteer een Node.js-versie die compatibel is met Next.js.
4. Set Toepassingsmodus naar productie.
5. Set Applicatie root naar nextapp.
6. Selecteer uw domein en laat het pad leeg.
7. Set Opstartbestand van applicatie naar server.js.
8. Klik Creëren.

Afhankelijkheden installeren en de app starten

1. Klik App stoppen als het draait.
2. Klik Voer NPM-installatie uit.
3. Nadat de installatie is voltooid, klik App starten.

Als de NPM-installatieoptie niet beschikbaar is, Laad de Node.js Selector-pagina opnieuw om de lijst met applicaties te vernieuwen.

Implementatie verifiëren

Open uw domein in een browser. De Next.js-toepassing zou met succes moeten worden geladen.

Overwegingen bij het hosten

Node.js-applicaties met meer verkeer of schaalvereisten presteren mogelijk beter op cloud-servers. Voor workloads waarvoor volledige controle op systeemniveau vereist is, A speciale server biedt maximale flexibiliteit voor het afstemmen van Node.js-runtime.