How to Deploy Next.js Project on Plesk

Plesk supports node.js projects however it requires an entry.js file for launching. This is not the way we start our next.js project, so here are some tiny adjustments to run a next.js project on plesk.

Project Initialization

Usually we use Git to pull our projects, I assume you already know how to download you project files to your plesk vhost.

If Node.js were not installed, click Install Application to install it.

Project Initialization

Node.js Setup

Node.js Configuration

1. Node.js version, I Choosed 16.20
2. Package manager, npm or yarn are both fine
3. Document root, this is where node.js reads compiled static files, it would be /DOMAIN_NAME/.next/static if your build destination direction were not configured, choose it to set.
4. Applcation mode, production by default
5. Application URL, can not be modified, we don’t need to modify it though
6. Application root directory, choose the directory where your next.js project is
7. Application startup file, by default it’s app.js, but we don’t have it yet, we’ll create one later.
8. Custom environment variables, specify them if needed

Add our app.js file for launching

we could do this before we push commit to remote.

1. Install express

npm install express -D

2. Add an app.js file in project root directory.

app.js

const express = require("express");
const next = require("next");

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.all("*", (req, res) => {
    return handle(req, res);
  });

  server.listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

3. Then we push our changes to remote and sync them on our plesk vhost.

4. Click npm install to install dependencies with Plesk Node.js control panel.

5. Click Run Script to run build command to compile dist files.

6. Click Restart Application button and refresh page, we shall see it’s working now.

Next.js is Already Running

What does the trick and why do we need it?

When we run our Next.js start command npm run start, our Next.js service runs on port 3000, but for plesk, we can’t not configure a proxy to make our domain access pass to port 3000. So this express did this job to take over all requests on this domain and give them to Next.js handler. Check the login in our app.js, it’s very simple and understandble.

Normally for self-operated host we create a reverse proxy by NGINX to pass website requests to our Next.js service (which is listened on Port 3000). The proxy config may look like this:

proxy_pass

location / {
  proxy_pass http://localhost:3000;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

Forward Proxy vs Reverse Proxy

Image Reference: https://www.youtube.com/watch?app=desktop&v=4NB0NDtOwIQ

All set, hope this helps :)