How to create reverse proxy for multiple websites in nginx

user_16304630 0
Viewed 7794

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.

reverse-proxy nginx
1 Answers

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

user_110484320
Related