How to create reverse proxy for multiple websites in nginx - nginx

Question

I have many different technologies serving APIs and sites on my local machine. I want to be able to see them via human-readable names, rather than ports.
For example, I have:
localhost:8000 => laravel api for user panel
localhost:8001 => laravel api for admin panel
localhost:3000 => react client for user panel
localhost:3001 => nextjs client for site
localhost:3002 => react client for admin panel
And this list goes on.
Remembering all these ports is not possible of course. Thus I thought to setup a reverse proxy for them:
api.user.example.local
api.admin.example.local
example.local
user.example.local
admin.example.local
I know I have to add these host headers to /etc/hosts file. I also read about how to configure nginx as a reverse proxy for one domain.
I don't know how to do it for many sites. And only as a reverse proxy, not as a server.

Answer 1

Please note: I'm not considering myself as really super nginx expert, just starting to learn nginx, but I think I can help you with this task.
Here is my approach:
First, make sure your default nginx config (usually /etc/nginx/nginx.conf) has line include /etc/nginx/conf.d/*.conf; in its http block, so you may specify internal servers in separate config files for ease of use.
Create additional config file /etc/nginx/conf.d/local_domains.conf and add following server blocks in it:
server {
listen 80;
server_name api.user.example.local;
location / {
set $target http://localhost:8000;
proxy_pass $target;
}
}
server {
listen 80;
server_name api.admin.example.local;
location / {
set $target http://localhost:8001;
proxy_pass $target;
}
}
server {
listen 80;
server_name example.local;
location / {
set $target http://localhost:3000;
proxy_pass $target;
}
}
server {
listen 80;
server_name user.example.local;
location / {
set $target http://localhost:3001;
proxy_pass $target;
}
}
server {
listen 80;
server_name admin.example.local;
location / {
set $target http://localhost:3002;
proxy_pass $target;
}
}
On the client machine, add these records to the hosts file
192.168.1.1 api.user.example.local
192.168.1.1 api.admin.example.local
192.168.1.1 example.local
192.168.1.1 user.example.local
192.168.1.1 admin.example.local
Where 192.168.1.1 is the address of your nginx server.
That's it, it should work if your internal servers are using HTTP protocol.
But if you need to use HTTPS for internal servers and for the main nginx server, modify each server block as follows:
server {
listen 443 ssl http2;
server_name api.user.example.local;
ssl_certificate /usr/local/share/ca-certificates/example.local.crt;
ssl_certificate_key /usr/local/share/ca-certificates/example.local.key;
add_header Strict-Transport-Security "max-age=31536000" always;
location / {
set $target https://api.user.example.local:8000;
proxy_pass $target;
}
}
and so on
ssl_certificate and ssl_certificate_key should point to correct certificate and key files for the domain.
If you would like nginx main server to listen port 80 and redirect all traffic to https, add additional server blocks for each server:
server {
server_name api.user.example.local;
listen 80;
# Force redirection to https on nginx side
location / {
return 301 https://$host$request_uri;
}
}
and so on
More information on NGINX Reverse Proxy
NGINX Reverse Proxy
Module ngx_http_proxy_module