Deploy multiple domains with http3 support with Nginx

1. Introduction

I am using Nginx happily to deploy a Next.js application https://myex.ai on the server (Linode cloud server). At current stage, I run yarn build & yarn start to launch the Next.js server in production mode (port 3000 by default), then Nginx acts as a reverse proxy to manage the incoming requests. It handles the SSL certificates, caching, HTTP/3 configuration, etc., then forwards the requests to the Node.js server at port 3000. We can imagine Nginx is a gatekeeper to handle requests first. For better performance, I configure Nginx to serve through HTTP/3. Please check this article for the HTTP/3 configuration.

The Nginx conf file is like:

Now I have another site, let's say, jscoder.io, and I would like to deploy it on the same server in the similar way.

2. Jscoder.io

Create a new next.js app and push the GitHub repo at https://github.com/agongdai/nextjs-performance. Clone the repo to the cloud server, then run:

Since port 3000 has been occupied by https://myex.ai, here jscoder.io uses port 3001.

3. Nginx conf

Now we want to add Nginx as the reverse engine to serve jscoder.io at port 3001. The easy way is simply copy the myex.ai Nginx conf file for jscoder.io. Run sudo cp /etc/nginx/conf.d/myex.ai.conf /etc/nginx/conf.d/jscoder.io.conf, then change the content:

In this conf, remember to:

1. change server_name to jscoder.io.

2. change SSL certificates to jscoder.io certificates. Refer to this article for SSL certificate application and deployment: A complete guide to make your first website online with HTTPS.

3. change reverse proxy port from 3000 to 3001.

Moreover, at line 2 and 3, remove the default_server setting. This directive defines the default server for port 80, which cannot have multiple. Otherwise, we will get error:

Again more, at line 11, remove the reuseport setting. Otherwise, we get the error:

For more details, please check this GitHub issue: Nginx configures multiple sites to share 443/udp ports.

Remember to reload or restart the nginx server: $ sudo service nginx restart. Then you can visit both https://myex.ai and https://jscoder.io.