Node js, Deployment React & Next.js

Technische problemen? Hier kun jij jouw vragen stellen!
Forumregels
Check eerst onze helpsectie (https://www.antagonist.nl/help) voordat je hier een vraag stelt. Voor de meeste vragen hebben we uitgebreide handleidingen met uitleg.
Plaats reactie
n-fx
Berichten: 5
Lid geworden op: 11 jun 2022, 12:04

Node js, Deployment React & Next.js

Bericht door n-fx » 11 jun 2022, 12:55

Dag,

Sins kort ben ik overgestap op het plus pakket, om met node js aan de slag te gaan.
Ik bouw sinds kort mn websites met next js / react. Dit werkt lokaal allemaal geweldig. Maar nu het deployen van zo'n site. Deployen op Vercel via git lukt allemaal wel maar op een cpanel is dit lastiger.

Ik weet dat hier al verschillende blogs voor zijn gescreven ( https://www.antagonist.nl/blog/vuejs-nu ... uitrollen/) maar toch is het altijd weer anders wanneer je zelf bezig gaat. En Next js is werkt mischien ook net weer even anders.

Ik kan in de Node.js Selector omgeving een applicatie aanmaken. Via ftp kan ik in de aangemaakte directory de package js plaatsen en ook de static build folder. Toch gaan er veel dingen mis wanneer ik scripts uitvoer.
Via ftp zie ik ook dat er een directory nodeenv is aangemaakt. Moet ik mijn site in deze folder plaatsen? Wat wordt waar geinstalleerd..

Next.js heeft een server.js voorbeeld op hun website https://nextjs.org/docs/advanced-features/custom-server
Op youtube videos (Deploy Next.js on cpanel) gaat het allemaal zo eenvoudig... Maar ik kom er niet uit.

Na een paar keer npm scripts te hebben uitgevoerd. Zoals build, export, start krijg ik veel foutmeldingen en ben ik ook al snel over mn resource limit heen en moet ik weer 24 uur wachten.


Heeft iemand dezelfde ervaring? En of wil een gedreven antagonister eens proberen next js werkend te krijgen?

Ik ben heel erg benieuwd naar julie antwoorden en ervaringen.

mark.boom
Antagonist staff
Berichten: 5
Lid geworden op: 02 mar 2022, 09:38

Re: Node js, Deployment React & Next.js

Bericht door mark.boom » 12 jun 2022, 17:28

Hallo n-fx, hier de auteur van het door jou aangehaalde blogartikel. Tof dat je met Next.js aan de slag wilt gaan op ons platform! Ik beantwoord graag je vragen.
op een cpanel is dit lastiger
Merk op dat we niet van cpanel gebruikmaken, maar DirectAdmin - echter is dat slechts een detail.
Via ftp zie ik ook dat er een directory nodeenv is aangemaakt. Moet ik mijn site in deze folder plaatsen?
Nee, de inhoud van die map wordt als het goed is automatisch beheerd. Waar je wel je bestanden kwijt moet, wordt in het blog hier toegelicht:
Nu is het zaak dat we de gehele map met bestanden op het pakket plaatsen. Bouw je bijvoorbeeld je website in de map ‘mijn-blog’ (dat wil zeggen: mijn-blog/package.json is de locatie van je package.json-bestand), dan zet ik de gehele map mijn-blog in /home/<username>/. Zo heb je in dit geval /home/deb123456/mijn-blog/package.json.
Na een paar keer npm scripts te hebben uitgevoerd. Zoals build, export, start krijg ik veel foutmeldingen en ben ik ook al snel over mn resource limit heen en moet ik weer 24 uur wachten.
Let erop, dat je alleen build scripts uitvoert via Run script. Voer je per ongeluk het draaien van je server op die manier uit, start je inderdaad een proces dat niet meer af te breken is. Die knop is slechts bedoeld voor acties met een duidelijk begin en einde (bijvoorbeeld het installeren van pakketten). Je webserver hoort te blijven draaien, en dient dus niet zo uitgevoerd te worden.

Hoe voer je die server dan wel uit? Nou, in het blog maken we een bestand genaamd app.js aan. Dat mag je natuurlijk naar eigen inzicht ook anders noemen. In de NodeJS selector voeren we de naam van dat bestand in bij Application startup file. Daarmee geven we dus aan, dat dat specifieke bestand het "hoofdproces" is. Voor Next werkt het natuurlijk ietsje anders dan Nuxt, maar het komt erop neer dat we de Next-server vanuit dat bestand willen laten draaien. Het platform zorgt er dan automatisch voor, dat deze gestart wordt en blijft draaien.

Verder: loop je tegen concrete foutmeldingen aan, dan kan het helpen om die fouten (en (delen van) je code) hier ook te delen met ons.

n-fx
Berichten: 5
Lid geworden op: 11 jun 2022, 12:04

Re: Node js, Deployment React & Next.js

Bericht door n-fx » 12 jun 2022, 21:03

Dag Mark, Dank voor je antwoord. Ik zal even toelichten welke stappen ik heb genomen en welke errors ik krijg.

nodejs version: 14.18.3 (recommended)
Application mode: Production
Application root: nextjs
Application URL: domein.nl/nextjs
Application startup file: server.js

Server.js ziet er als volgt uit:

Code: Selecteer alles

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = process.env.NODE_ENV || 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')
    }
  }).listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://${hostname}:${port}`)
  })
})
Mijn package.json ziet er als volgt uit:

Code: Selecteer alles

{
  "name": "nextjs",
  "homepage": "https://domein.nl/nextjs/",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js"
  },
  "dependencies": {
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0"
  },
  "devDependencies": {
    "eslint": "8.17.0",
    "eslint-config-next": "12.1.6"
  }
}
Ik heb aan de package.json nog de variabele homepage toegevoegd. Soms is dit handig voor next.js voor routing, image paden etc.

De knop run npm install werkt nu weer zonder error. Echter zie ik nergens node_modules geinstalleer staan.
Ook niet in de nodevenv omgeving. Ik zie hier wel een .lock bestand staan met een lege inhoud.
nodevenv/nextjs/14/lib/node_modules hier zou ik de node_module verwachten. Maar deze directory is leeg.

Als ik nu naar mijn nextjs app kijk zie ik een 404 error, maar dan wel in de css style van next.js Dat betekend dat ik al een weer stapje verder ben en dat de website wel draaid. Misscihen moet ik mijn node_modules rechtstreeks in de zelfde directory plaatsen waar de app staat. Klinkt logisch toch? Ergens zijn de node_modules nodig.

De error meldingen zijn nu weg. Deze verschenen vooral wanneer ik run js script ging uitvoeren zoals. npm run start of npm run build. Aangezien ik al een gebuilde app heb geupload zal dit niet nodig zijn.

Ik vraag me nog wel af wat ik met de virtual enviroment kan / moet en hoe ik deze moet uitvoeren.
Enter to the virtual environment.To enter to virtual environment, run the command ....

Ik denk dat ze fout nu ergens in mijn next.js app/website zit. Ik ga nog het een en ander proberen.

Wie weet kan je / iemand iets met deze voortgang.

n-fx
Berichten: 5
Lid geworden op: 11 jun 2022, 12:04

Re: Node js, Deployment React & Next.js

Bericht door n-fx » 12 jun 2022, 21:12

Kleine correctie.

Ik zie dat er nu wel node modules geinstalleerd zijn, na een refresh van de folder. Deze was eerder leeg in: nodevenv/nextjs/14/lib/node_modules

de 404 melding is nog niet weg.

n-fx
Berichten: 5
Lid geworden op: 11 jun 2022, 12:04

Re: Node js, Deployment React & Next.js

Bericht door n-fx » 13 jun 2022, 15:26

Ter info toch nog even wat error meldingen.

Wanneer ik Run JS script uitvoer en dan het build script, dan krijg ik deze melding:

Code: Selecteer alles

returncode: 1
stdout:
> nextjs@0.1.0 build /home/gebruiker/nextjs
> next build

info  - Checking validity of types...
stderr:
npm WARN lifecycle The node binary used for scripts is /home/gebruiker/nodevenv/nextjs/14/bin/node but npm is using /opt/alt/alt-nodejs14/root/usr/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
events.js:377
      throw er; // Unhandled 'error' event
      ^

Error: spawn /opt/alt/alt-nodejs14/root/usr/bin/node EAGAIN
    at Process.ChildProcess._handle.onexit (internal/child_process.js:274:19)
    at onErrorNT (internal/child_process.js:469:16)
    at processTicksAndRejections (internal/process/task_queues.js:82:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:280:12)
    at onErrorNT (internal/child_process.js:469:16)
    at processTicksAndRejections (internal/process/task_queues.js:82:21) {
  errno: -11,
  code: 'EAGAIN',
  syscall: 'spawn /opt/alt/alt-nodejs14/root/usr/bin/node',
  path: '/opt/alt/alt-nodejs14/root/usr/bin/node',
  spawnargs: [
    '/home/gebruiker/nodevenv/nextjs/14/lib/node_modules/next/dist/compiled/jest-worker/processChild.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nextjs@0.1.0 build: `next build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the nextjs@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/gebruiker/.npm/_logs/2022-06-13T15_02_10_969Z-debug.log
De log file ziet er als volgt uit:

Code: Selecteer alles

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/opt/alt/alt-nodejs14/root/usr/bin/node',
1 verbose cli   '/opt/alt/alt-nodejs14/root/usr/bin/npm',
1 verbose cli   'run-script',
1 verbose cli   'build',
1 verbose cli   '--'
1 verbose cli ]
2 info using npm@6.14.15
3 info using node@v14.18.3
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle nextjs@0.1.0~prebuild: nextjs@0.1.0
6 info lifecycle nextjs@0.1.0~build: nextjs@0.1.0
7 warn lifecycle The node binary used for scripts is /home/gebruiker/nodevenv/nextjs/14/bin/node but npm is using /opt/alt/alt-nodejs14/root/usr/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
8 verbose lifecycle nextjs@0.1.0~build: unsafe-perm in lifecycle true
9 verbose lifecycle nextjs@0.1.0~build: PATH: /opt/alt/alt-nodejs14/root/usr/lib/node_modules/npm/node_modules.bundled/npm-lifecycle/node-gyp-bin:/home/gebruiker/nextjs/node_modules/.bin:/home/gebruiker/nodevenv/nextjs/14/bin:/opt/alt/alt-nodejs14/root/usr/bin:/home/gebruiker/nodevenv/nextjs/14/lib/bin/:/usr/local/bin:/usr/bin
10 verbose lifecycle nextjs@0.1.0~build: CWD: /home/gebruiker/nextjs
11 silly lifecycle nextjs@0.1.0~build: Args: [ '-c', 'next build' ]
12 silly lifecycle nextjs@0.1.0~build: Returned: code: 1  signal: null
13 info lifecycle nextjs@0.1.0~build: Failed to exec build script
14 verbose stack Error: nextjs@0.1.0 build: `next build`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/opt/alt/alt-nodejs14/root/usr/lib/node_modules/npm/node_modules.bundled/npm-lifecycle/index.js:332:16)
14 verbose stack     at EventEmitter.emit (events.js:400:28)
14 verbose stack     at ChildProcess.<anonymous> (/opt/alt/alt-nodejs14/root/usr/lib/node_modules/npm/node_modules.bundled/npm-lifecycle/lib/spawn.js:55:14)
14 verbose stack     at ChildProcess.emit (events.js:400:28)
14 verbose stack     at maybeClose (internal/child_process.js:1058:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:293:5)
15 verbose pkgid nextjs@0.1.0
16 verbose cwd /home/gebruiker/nextjs
17 verbose Linux 4.18.0-305.17.1.lve.el8.x86_64
18 verbose argv "/opt/alt/alt-nodejs14/root/usr/bin/node" "/opt/alt/alt-nodejs14/root/usr/bin/npm" "run-script" "build" "--"
19 verbose node v14.18.3
20 verbose npm  v6.14.15
21 error code ELIFECYCLE
22 error errno 1
23 error nextjs@0.1.0 build: `next build`
23 error Exit status 1
24 error Failed at the nextjs@0.1.0 build script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]

Ik zie de regel:

2 info using npm@6.14.15
3 info using node@v14.18.3

Lokaal gebruik de volgende versies:

npm: 8.10.0
node: v16.15.0

Kan het zijn dat hierdoor het conflict ontstaat? En zo ja. Heb ik of antagonist de mogelijkheid de npm en node versies hoger te zetten? Kan ik dit zelf via ftp instaleren?

Vele vragen en berichten, maar ik hoop dat ik ooit mijn vette websites aan de praat krijg..

mark.boom
Antagonist staff
Berichten: 5
Lid geworden op: 02 mar 2022, 09:38

Re: Node js, Deployment React & Next.js

Bericht door mark.boom » 13 jun 2022, 18:27

Misscihen moet ik mijn node_modules rechtstreeks in de zelfde directory plaatsen waar de app staat. Klinkt logisch toch? Ergens zijn de node_modules nodig.
Nee, dat is (zoals je zelf in je volgende post volgens mij je ook al realiseert) inderdaad niet nodig. Die node_modules staan bewust los van de rest van de code van je app en worden helemaal beheerd door de NodeJS selector.
Ik vraag me nog wel af wat ik met de virtual enviroment kan / moet en hoe ik deze moet uitvoeren.
Enter to the virtual environment.To enter to virtual environment, run the command ....
Die alert geeft je commando's om eventueel via SSH in je virtualenv terecht te komen. Je hoeft daar niet per se iets mee te doen, maar als je via SSH werken prettig vindt, dan kun je er op die manier mee aan de slag. Maar het is dus niet nodig, en de blogpost toont ook de manier om het zonder SSH te doen.
Ik denk dat ze fout nu ergens in mijn next.js app/website zit.
Ja, dat vermoed ik ook gezien je wel gewoon de Next.js styling op de 404-pagina krijgt. Dat is op zich heel goed nieuws, want dat betekent dat je Next.js app gewoon wordt opgepikt en werkt!
Kan het zijn dat hierdoor het conflict ontstaat? En zo ja. Heb ik of antagonist de mogelijkheid de npm en node versies hoger te zetten? Kan ik dit zelf via ftp instaleren?
Nu *denk* ik niet direct dat jouw problemen aan het versieverschil van Node/NPM liggen, maar - ja - in principe kunnen verschillende versies uiteraard verschillende (en daarmee foute) resultaten geven. Je kunt niet zelf Node en/of NPM installeren via FTP, dat is juist één van de dingen die wij voor je in orde maken. :wink: Jij hebt nu aan je vorige posts te zien gekozen voor 14.4 (Recommended), en dat lijkt mij meer dan voldoende.

Ik zou echter eerst eens kijken waar die 404 vandaan komt. Die komt natuurlijk uit die if-else boom in je server.js. Vervang dit eens:

Code: Selecteer alles

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)
}
door dit:

Code: Selecteer alles

await app.render(req, res, '/', query)
Hoe die URL routing precies werkt, zul je even moeten uitzoeken voor wat je app precies (zou moeten) doen, maar dat zou in ieder geval de voorpagina even moeten tonen om te laten zien dat alles goed werkt.

Je andere fout bij het bouwen op de server, kan ik reproduceren. Daar valt gemakkelijk omheen te werken door lokaal npm run build te draaien en dan de .next-map te uploaden, maar dat zou inderdaad gemakkelijker moeten kunnen. Mocht ik er nog achter komen waarop dat vast zit dan post ik dat hier wel even.

n-fx
Berichten: 5
Lid geworden op: 11 jun 2022, 12:04

Re: Node js, Deployment React & Next.js

Bericht door n-fx » 14 jun 2022, 14:25

Geweldig!

Je tip: code vervangen in server.js heeft geholpen.

Code: Selecteer alles

await app.render(req, res, '/', query)
De 404 is weg en ik zie mijn Welkomst pagina. Dit betekend dat het dus niet aan node of npm versies ligt.

De css, js en andere asset paden gaan alleen nog wel verkeerd binnen nextJS.
In de broncode zie ik b.v. href="./_next/static/css/6ee51524d56cedee.css"


de paden lopen dus niet automatisch naar de omgeving zoals de Application URL en of de Root. In mijn geval https://mijnwebsite.nl/nextjs


Wanneer ik lokaal mijn NextJS website Build en Export.

In package.json

Code: Selecteer alles

 "scripts": { 
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "next export"
  },
Dan wordt er een "out" folder aangemaakt. Export zorgt ervoor dat er een static site wordt gegenereed. Wanneer ik de bestanden via FTP plaats in een nieuwe folder b.v. "nextstatic" https://mijnwebsite.nl/nextstatic dan werkt alles wel!

Ik heb voor nu alleen nog maar een hello world pagina dus het wordt even kijken hoe routing en/of navigatie werkt met een static website. Maar voor nu kan ik in elk geval wel vette moderde static websites maken. Alleen heb ik de node js functie van antagonist dan eigenlijk niet meer nodig...

Voor andere forum leden die met next js werken.
Ik vond ook via google een tip om in de next.config.js de volgende codes toe te voegen:

module.exports = {
assetPrefix: './'
}

er kan ook een basepath worden toegevoegd. B.v. blog

module.exports = {
basePath: '/blog',
}

In mijn geval heeft het via node js allemaal nog niet geholpen.

Ik ga voorlopig wel even met static websites aan de slag. Lokaal bouwen exporten en dan uploaden.


Mark, mocht je nog een idee hebben waar de code:

Code: Selecteer alles

 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)
      }
Voor dient, dan hoor ik het graag. Misschien moet ik a en b vervangen.

Flinke puzzel toch dit allemaal, maar wel leerzaam.

mark.boom
Antagonist staff
Berichten: 5
Lid geworden op: 02 mar 2022, 09:38

Re: Node js, Deployment React & Next.js

Bericht door mark.boom » 22 jun 2022, 10:55

Mark, mocht je nog een idee hebben waar de code:

Code: Selecteer alles

 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)
      }
Voor dient, dan hoor ik het graag. Misschien moet ik a en b vervangen.
Dit lijkt mij trouwens vooral voorbeeldcode. De paden /a en /b staan hier hardcoded in, waarop er ook gerenderd wordt voor die paden. Een echte applicatie heeft niet /a en /b, maar waarschijnlijk andere paden. Die code zal dus vast voor jouw use case anders zijn. En het is zelfs logisch dat die routes dynamisch worden en bijvoorbeeld uit een ander bestand, database of met logica gematcht worden.

Plaats reactie