How to deploy a next.js app to Cyberpanel

Question

I am trying to deploy a full next js app in Cyberpanel

So i am trying to deploy a next js app to CyberPanel, and after following the only documentation they have on this (https://community.cyberpanel.net/t/how-to-host-nextjs-app-on-cyberpanel/44403/2) it did not work, the webiste is still showing me the 404 page, while I'm running the app (using pm2). The only thing i didnt do is that a ran it on the default port (3000).

Answer 1

I've tried so many things and here is the only way that worked for me.

1. Create the handler

• Go to the OpenLiteSpeed admin panel (usually at http://<IP_ADDRESS>:7080).
  
• Go to "Server Configuration" --> "External App".
  
• Add new app (the + sign at the right).
  
• Select type "Web Server" and click next (Right arrow at the right).
• Give a custom name for the handler, for example "nextjs" or the name of your site.
• Set the address to "http://127.0.0.1:<CUSTOM_PORT>", I personally use ports 11300 and above to avoid using ports that are already used by the system.
• Set the other required values to 100 and click save (Save icon at the right).
• Restart the LSWS (Green refresh button at the top right).

2. Redirect the requests

(from "http://127.0.0.1:<CUSTOM_PORT>" to the domain/sub-domain)

• Go CyberPanel --> "Websites" --> "List Websites" and click on manage at the right of your domain name.
• Select vHost Conf and paste this at the end:

context / {
  type                    proxy
  handler                 <HANDLER_NAME>
  addDefaultCharset       off
}

// The <HANDLER_NAME> should be the name that
// we gave to our handler, for example if we named it nextjs:

context / {
  type                    proxy
  handler                 nextjs
  addDefaultCharset       off
}

• Click on save.

3. Allow the port to be used

I don't know if this is the case for everyone, but for me it only worked after I've done this. Try not doing it, if it doesn't work come back to it.
By default, the port is not allowed to be used.
Access your server by SSH and execute this command:

sudo iptables -A INPUT -p tcp --dport <PORT> -j ACCEPT

// If we used the port 11300:

sudo iptables -A INPUT -p tcp --dport 11300 -j ACCEPT

4. Start your app

Now go to the SSH and start your app on the custom port that we have set.
(In NextJS, you can either change the start script in package.json to next start -p <PORT>, meaning next start -p 11300 and then run it normally with npm start, or you can run directy the command npm start -- -p 11300).

Run it normally with npm to test if everything is working fine.
Then you can start it with pm2 with pm2 start "npm start -- -p 11300".

PS: This works for any Nodejs app not only NextJS.

I hope you find this helpful.