Hi, I'm @ryusei__46.
In this article, we will explain how to separate multiple Next.js apps by port number when self-hosting a web app made with Next.js on a VPS, etc., and how to use a reverse proxy to distribute them to each domain that is accessed.
If you have only one web app that you want to publish, there is no problem, but since it will occupy port 80 or 443 used for HTTP communication, you will be in trouble if you wanted to use it for other services.
Preparing a server for each application is a waste of resources and impractical.
In the case of personal development and small-scale business, I think that you really want to operate while keeping running costs as low as possible.
Of course, if your service becomes popular and you are running out of server resources, that's a different story.
By reading this article, you will learn the following
- How to set up a reverse proxy
- How to launch as many instances of Next.js as the number of apps you need
- How to sort Next.js apps by port number
Server environment
- OS: Ubuntu 22.04（Windows 11 Pro WSL2）
- Node.js ver 20.51
- Next.js ver 14.0.2
- Open Lite Speed ver 1.7.10（Used as a reverse proxy）
How to set up a reverse proxy
We will use "Open Lite Speed" as a reverse proxy.
Open Lite Speed" is an open source web server software that has been gaining market share in recent years as a competitor to Nginx. It is used to run WordPress and PHP programs, but it also has a proxy server function, so it can be used as an internal reverse proxy.
Also, Nginx is fine if you just want to use it as a reverse proxy, but Open Lite Speed has the advantage of a web administration panel that can be operated via GUI, making configuration a smooth process.
In this case, we will use Open Lite Speed.
Install Open Lite Speed and required packages
First, log in remotely to the server and add a repository with the following command.
$ sudo wget -O - http://rpms.litespeedtech.com/debian/enable_lst_debian_repo.sh | sudo bashOnce the repository has been added, install Open Lite Speed.
$ sudo apt-get install -y openlitespeedAfter the installation is complete, run the following command to confirm that the service is running.
$ systemctl status lsws
● lshttpd.service - OpenLiteSpeed HTTP Server
Loaded: loaded (/etc/systemd/system/lshttpd.service; enabled; vendor preset: enabled)
// activeになっていればOK
Active: active (running) since Tue 2023-10-31 06:26:54 JST; 2 weeks 3 days ago
Main PID: 942843 (litespeed)
CGroup: /system.slice/lshttpd.service
├─941746 lsphp "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ">
├─942843 "openlitespeed (lshttpd - main)"
├─942844 "openlitespeed (lscgid)"
├─942853 "openlitespeed (lshttpd - #01)"
├─942854 "openlitespeed (lshttpd - #02)"
├─950419 lsphp "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ">
├─950420 lsphp "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ">
└─950590 lsphp "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ">Next, run the shell script located at the following location to perform the initial setup of the administrator user.
$ sudo /usr/local/lsws/admin/misc/admpass.shNext, also install the dedicated PHP package required for Open Lite Speed.
$ sudo apt-get install lsphp82 lsphp82-common lsphp82-curl lsphp82-mysql lsphp82-opcache lsphp82-imap lsphp82-opcache
// シンボリックリンクを作成
$ sudo ln -sf /usr/local/lsws/lsphp82/bin/lsphp /usr/local/lsws/fcgi-bin/lsphp5Once this is done, access http://localhost:7080 in your browser.
You will then see a login screen, so log in as the administrator user you initially set up earlier.
Reverse proxy configuration with Open Lite Speed
From the menu on the left side of the screen, press "Virtual Hosts" and then press the "+" button to the right of the heading labeled "Virtual Host List.
On the next screen, enter the various configuration items. You only need to enter the main items listed below.
- Virtual host name： Set a name that is easy to understand for you to manage.
- Virtual Host Root ：Absolute path to the project root of the Next.js app
- setup file：
$SERVER_ROOT/conf/vhosts/$VH_NAME/vhconf.conf（Basically, this is OK.） - Allow symbolic links: Yes
- Enable scripts/external apps: Yes
- Suppressed: Yes
- Setting UID mode for external apps：Server UID
Once you have added the settings, click on the virtual host name you have added from the virtual host list to display the details screen.
Select the "General" tab, then the area circled in red
- Document Root:
$VH_ROOT/public(Since all accesses are proxied to Next.js, this setting can be appropriate.) - Enable GZIP compression: Yes
Set to.
Next, configure the settings on the "External Application" tab.
Under "Type," select "Web Server" to proceed. On the next page,
- Name: alphanumeric setting of the first place favorite name
- Address: Specify the port that actually runs Next.js, along with the local loopback IP address.（Example：
http://127.0.0.1:8624） - Maximum number of connections
- keep alive time out：10
- Initial request timeout (seconds)：15
- Retry timeout (seconds)：10
- response buffering：はい
and add external apps.
Next, configure the settings on the "Context" tab. Press the "+" button to display the "Add Context Settings" page, and under "Type," select "Proxy" to proceed. On the next page,
- URI:/ (sets the root path and forwards all accesses coming to the domain to the port number set for the external app)
- Web server: Select the external application you just set up
and save it.
Next, add HTTP listener settings. Click "Listeners" in the menu on the right side of the screen, then click the "+" button to add the setting.
- Listener name: Set a name that is easy to understand for the first place.
- IP address: Select "ANY IPv4
- Port：80
Now save the configuration and the HTTP listener listening on standard port 80 will be activated.
Finally, set up the domain.
Select the HTTP listener you just added from the list of listeners and click the "+" button on the far right of the "Virtual Host Map" heading to set the domain you wish to assign to your app.
- Virtual Host Map: Select a virtual host added above from the pull-down menu
- Domain: Set the domain you wish to assign (e.g., blog.localhost, example.com, etc.)
After completing the settings, finally click the "Restart" button in the upper right corner of the screen to reflect the settings so far.
You will need to configure the above settings for the number of Next.js applications you wish to run.
This completes the Open Lite Speed setup.
Start as many Next.js servers as you need.
Now, we will use the screen command to manage multiple instances of Next.js.
It is not necessary to install it separately, since it comes standard with Linux. First, type screen in the terminal and press the enter key.
Doing so will start a new terminal session, so use the cd command to go to the Next.js project directory and start the Next.js server with the port number you set for the Open Lite Speed virtual host's external app.
When it starts without any problems, use Ctrl + A and D on the keyboard to leave the session (touch in). If you wish to reconnect, use the screen -ls command to list the currently running terminal session, check the screen ID (numeric value) displayed at the top of each item, and reconnect (attach) with screen -r [screen ID].
Incidentally, if you want to scroll the screen in a session, you can use the up and down arrow keys to scroll through the log output on the screen by switching to copy mode with Ctrl + A and [ on the keyboard.
If you want to know how to use the screen command in detail, the following Qiita article is helpful.
This concludes the explanation. We will create as many terminal sessions as we want to start here as well.
The truth is, there is an open source tool called PM2 that manages Node.js instances, but I have not been able to install it yet, so I will catch up and put it in an article when I have more time.
In the meantime, I'll post the official PM2 website.
Conclusion
As I expected, Next.js is often deployed and operated on Vercel, and there seemed to be a lack of knowledge about self-hosting. I had been working with PHP and WordPress for some time, so I was familiar with Open Lite Speed, and Nginx is also lightweight and good, but it is still nice to be able to use the GUI of the web for ease of understanding.
This way, I can manage a huge amount of Next.js servers on the same machine, and since I can also use PHP (which is the main purpose of Open Lite speed), I can run WordPress and PHP systems at the same time. Furthermore, the ability to use it as a reverse proxy means that even if you set up servers in various languages such as Ruby or Python, you can have them all running on the same machine.
I personally found this to be quite innovative.
That's all for now. If you have any trouble or find anything wrong after practicing the contents of this article, please feel free to contact me through comments, inquiries, or direct messages on X.