How to deploy next JS app on domain with VPS server/openlitespeed

Question

I'm trying to learn next.js and I'm really struggling working out how to deploy it on my VPS as I'm not used to running a site where there is no index.html. I've been trying to research it for the best part of a week and it's driving me a bit nuts!!

So, my VPS is with Centos 7, cyberpanel and openlitespeed. For testing purposes I'm just using the initial next.js build (i.e. what's first created). I copied over the files to the public_html folder of my site and ran 'npm build'. If I run 'npm start' I can see the 'site' on my-domain-name:3000. But I can't figure out how to get this to run on just my-domain-name. All the information I find either seems to be about deploying on various services (Vercel, digital ocean etc) or in other ways unrelated to just setting it up on a VPS

The closest lead I have so far is that in OpenLiteSpeed I need to create an App Server 'context' for the virtual host for my site (CyberPanel auto-created this) and have entered the following settings:

• URI: /
• Location: /home/$VH_NAME/public_html
• Binary Path: /usr/bin/node (not sure if this is right but there is this file on my server level)
• Application Type: Node
• Startup File: server.js

The startup file is the basic one shown at https://nextjs.org/docs/advanced-features/custom-server. I also tried updating the scripts with the following:

"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js"
}

Additionally I tried opening the port up in my firewall (CFS)

I still can't seem to figure out how I'm supposed to be getting my VPS to run this site without using the port number or how to keep it running when I terminate my session in VS Code. I feel that I'm really misunderstanding how to set up OpenLiteSpeed as a reverse proxy and I'm also a little worried that if I keep testing random things out I'm likely to damage something.

This is probably modern web dev 101 but I'm really over my head here and not sure where to look for the answers. If someone has a moment would you be able to point me in the right direction? Happy to provide any other information about my set-up necessary...

Thanks in advance

Answer 1

Ok, I think I've stumbled on to a solution (typical this is a day after positing the question). I'm not 100% sure it's the right solution so if anyone see's a problem please let me know. Otherwise it's here for anyone else in the same situation

In my public_folder I created/modified the .htaccess file with:

RewriteEngine On
RewriteRule ^(.*)$ http://127.0.0.1:3000/$1 [P,L]

and then in OpenLiteSpeed I set up an 'External App' under the domain virtual host Cyberpanel created for me with the following settings:

• Name: 127.0.0.1:3000
• Address: http://127.0.0.1:3000
• Max Connections: 100
• List item
• Connection Keep-Alive Timeout: 60
• Initial Request Timeout (secs): 60
• Retry Timeout (secs): 0
• Response Buffering: No

Then I restarted OLS and now when I run NPM start I can see the site on the domain level!!

I still need to do a bit of research on keeping it running (looking at PM2 or systemd) when I close my terminal session but I'm feeling much more positive as there seems to be quite a lot of info out there on configuring next.js properly and I'm no longer hitting a wall!!