Resolved NextJS works on Plesk?

[Nubaltec]

Hi

We are trying to deploy a next.js app into our plesk. But are struggling to make it work.
The problem we are facing is that Plesk's Node.js extension expects an entry point for the app (like app.js) but next.js doesn't work that way.
The expected workflow as explained here (Learn - Deploying a Next.js App | Next.js) is to run the app using npm via the command line using "npm start" after you have built the app and next.js handles the rest internally.
We have tried issuing the commands from the plesks node panel run script command and while we can build the app we get the following error when we try to run the "start --scripts-prepend-node-path" command:

> XXXX@1.0.0 start /var/www/vhosts/XXXX.com/httpdocs
> next start -p 80

Error: listen EACCES: permission denied 0.0.0.0:80
at Server.setupListenHandle [as _listen2] (net.js:1209:19)
at listenInCluster (net.js:1274:12)
at Server.listen (net.js:1362:7)
at /var/www/vhosts/XXXX.com/httpdocs/node_modules/next/dist/server/lib/start-server.js:2:62
at new Promise (<anonymous>)
at start (/var/www/vhosts/XXXX.com/httpdocs/node_modules/next/dist/server/lib/start-server.js:1:407)
at nextStart (/var/www/vhosts/XXXX.com/httpdocs/node_modules/next/dist/cli/next-start.js:22:125)
at /var/www/vhosts/XXXX.com/httpdocs/node_modules/next/dist/bin/next:29:346 {
code: 'EACCES',
errno: 'EACCES',
syscall: 'listen',
address: '0.0.0.0',
port: 80
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! XXXX@1.0.0 start: `next start -p 80`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fersoler@1.0.0 start 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! /var/www/vhosts/XXXX.com/.npm/_logs/2019-11-18T16_37_59_408Z-debug.log

Can anyone shed some light on how to go about deploying a next.js app on plesk.

Thanks!

 

[andresHF]

Hi

We are trying to deploy a next.js app into our plesk. But are struggling to make it work.
The problem we are facing is that Plesk's Node.js extension expects an entry point for the app (like app.js) but next.js doesn't work that way.
The expected workflow as explained here (Learn - Deploying a Next.js App | Next.js) is to run the app using npm via the command line using "npm start" after you have built the app and next.js handles the rest internally.
We have tried issuing the commands from the plesks node panel run script command and while we can build the app we get the following error when we try to run the "start --scripts-prepend-node-path" command:

> XXXX@1.0.0 start /var/www/vhosts/XXXX.com/httpdocs
> next start -p 80

Error: listen EACCES: permission denied 0.0.0.0:80
at Server.setupListenHandle [as _listen2] (net.js:1209:19)
at listenInCluster (net.js:1274:12)
at Server.listen (net.js:1362:7)
at /var/www/vhosts/XXXX.com/httpdocs/node_modules/next/dist/server/lib/start-server.js:2:62
at new Promise (<anonymous>)
at start (/var/www/vhosts/XXXX.com/httpdocs/node_modules/next/dist/server/lib/start-server.js:1:407)
at nextStart (/var/www/vhosts/XXXX.com/httpdocs/node_modules/next/dist/cli/next-start.js:22:125)
at /var/www/vhosts/XXXX.com/httpdocs/node_modules/next/dist/bin/next:29:346 {
code: 'EACCES',
errno: 'EACCES',
syscall: 'listen',
address: '0.0.0.0',
port: 80
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! XXXX@1.0.0 start: `next start -p 80`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fersoler@1.0.0 start 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! /var/www/vhosts/XXXX.com/.npm/_logs/2019-11-18T16_37_59_408Z-debug.log

Can anyone shed some light on how to go about deploying a next.js app on plesk.

Thanks!

Hi

I´m facing the same issue right now.
The problem you had was a few months ago. Did you find the solution?

Any idea to fix it is welcome!

Thanks

 

[andresHF]

Hi again!

I figured out a solution to deploy a Next.js app at Plesk without executing 'next start' script.
The thing here is to provide an entry point file 'app.js' to Plesk just pointing your index.js Next´s server config file.

You can see an example here Hello-world plesk.

My app.js looks like this:


const router = require("next/router");
const express = require("express");
const next = require("next");
const nextRoutes = require("next-routes");
const routes = nextRoutes();
const Router = routes.Router;
const Link = routes.Link;
const expressApp = express();
const port = YOUR_PORT;
const app = next({ dev: false });

const handle = routes.getRequestHandler(app);

app.prepare().then(() => {
***Your expressApp routes here***
expressApp
.use(async (req, res) => {
handle(req, res);
})
.listen(port, err => {
if (err) throw err;
console.log(` Ready on http://localhost:${port}`);
});
});

 

[brianwachira]

I have created app.js and copy pasted that code snippet above but am still getting errors.
Any other clues?

 

[kramnath]

Hi,

I have created NextJS app based on this documentation. ( Getting Started | Next.js ) in my local machine.

npx create-next-app@latest

My Plesk windows and linux server and local server have same Node JS Version but still its not working as expected.
i also tried as per this article How To Setup NextJS Application on Plesk Hosting Control Panel (Linux)
but no use anyone can help how to configure NextJS api and website in plesk server?

 

[Mario Boss]

Hello.. it is my first post and I would like to describe a way how I deployed the Next.js. There is a very nice way to deploy Next.js with Plesk.. we need to use Git to pull the repo and then as as extra actions we need to add:

• npm install
• npm run build

Then in Node we need to provide entry point (Application Startup File) as:

• node_modules/.bin/next
  The above is the same as run npm run start

Please also remember to add Additional nginx directives as the below:

location / {
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Host $http_host;
    proxy_pass http://127.0.0.1:3000;
}

Adjust the port 3000 to your port. 3000 is set by default by next.js.

 

[mytchb]

This is the nginx config that fixed it for me:
rewrite ^/_next/(.*\.(css|js))$ /$1 break;

Also wrote a blog post featuring the topic:
Removing the build folders when deploying Next.js on Plesk - mytchall.dev

 

[impactcolor]

Hi again!

I figured out a solution to deploy a Next.js app at Plesk without executing 'next start' script.
The thing here is to provide an entry point file 'app.js' to Plesk just pointing your index.js Next´s server config file.

You can see an example here Hello-world plesk.

My app.js looks like this:


const router = require("next/router");
const express = require("express");
const next = require("next");
const nextRoutes = require("next-routes");
const routes = nextRoutes();
const Router = routes.Router;
const Link = routes.Link;
const expressApp = express();
const port = YOUR_PORT;
const app = next({ dev: false });

const handle = routes.getRequestHandler(app);

app.prepare().then(() => {
***Your expressApp routes here***
expressApp
.use(async (req, res) => {
handle(req, res);
})
.listen(port, err => {
if (err) throw err;
console.log(` Ready on http://localhost:${port}`);
});
});

Hello.. it is my first post and I would like to describe a way how I deployed the Next.js. There is a very nice way to deploy Next.js with Plesk.. we need to use Git to pull the repo and then as as extra actions we need to add:

• npm install
• npm run build

Then in Node we need to provide entry point (Application Startup File) as:

• node_modules/.bin/next
  The above is the same as run npm run start

Please also remember to add Additional nginx directives as the below:

location / {
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Host $http_host;
    proxy_pass http://127.0.0.1:3000;
}

Adjust the port 3000 to your port. 3000 is set by default by next.js.

Where in plesk do you add the directives?