Featured image of post Access Personal Website from Public Network——Nginx Reverse Proxy Configuration
Network

Access Personal Website from Public Network——Nginx Reverse Proxy Configuration

Use Nginx to configure reverse proxy to access your server or website from the public network

Motivation

After deciding to build a personal server on my own computer, I bought a domain name and configured dynamic domain name resolution, so I could access my server through the domain name. Later, I built a lot of websites on this server and used Nginx to configure reverse proxy to access these websites from the public network. Here I record how I configured Nginx reverse proxy.

Prerequisites

Install and Configure nginx

Install nginx

  1. Install nginx 
    1

    sudo apt install nginx
  2. Start nginx service 
    1

    sudo systemctl enable nginx

Nginx Configuration File

Configuration File Structure

The nginx configuration file is generally located in the /etc/nginx directory, and the directory structure is generally as follows:

1
2
3
4
5
6
7
8

/etc/nginx
├── ...
├── nginx.conf
├── sites-available
│   ├── default
│   └── ...
└── sites-enabled
    └── ...

where nginx.conf is the main configuration file of nginx, and the sites-available directory contains all the website configuration files. Each time a new website is added, we can put the configuration file in the sites-available directory.

In the nginx.conf file, there is a default configuration as follows:

1
2
3
4

http {
    ...
    include /etc/nginx/sites-enabled/*;
}

This means that nginx will automatically read all the configuration files in the sites-enabled directory. Therefore, we can create a new configuration file in the sites-available directory, and then create a symbolic link in the sites-enabled directory pointing to this configuration file, so that nginx will read this configuration file.

Configuration File Example

  1. General Static Website

    A general static website refers to a website with only static files, such as HTML, CSS, JS, etc., or the front-end part of a website that is separated from the back-end. The configuration file for this type of website is generally as follows:

    1
2
3
4
5
6
7

    server {
    listen 80;
    server_name www.your.domain.name;
    root /home/YourUserName/Documents/www/website1/public;
    location / {
    }
}

    where:

    • listen 80; means listening on port 80, the port of the HTTP protocol.
    • server_name www.your.domain.name; means that the domain name www.your.domain.name points to this website.
    • root /home/YourUserName/Documents/www/website1/public; means the root directory of the website.
    • location / {} means that all requests will be forwarded to the root directory of the website.

    Note that here we point the domain name to the ~/Documents/www/website1 directory’s public folder, rather than the entire website1 directory. Because we don’t want to expose some private files.

    If you need to configure HTTPS, you can use the following configuration:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

    server{
    listen 80;
    server_name www.your.domain.name;
    return 301 https://www.your.domain.name$request_uri;
}

server{
    listen 443 ssl;
    ssl_certificate /home/YourUserName/Documents/www/website1/private/cert.pem;
    ssl_certificate_key /home/YourUserName/Documents/www/website1/private/key.pem;
    root /home/YourUserName/Documents/www/website1/public;
    server_name www.your.domain.name;
    location /{
    }
}

    where ssl_certificate and ssl_certificate_key are the paths to the SSL certificate and private key.

  2. General Dynamic Website

    A general dynamic website refers to a website with backend code, such as PHP, Python, Node.js, etc., or a website hosted in a Docker container. This type of website is generally accessed through a specific port, such as localhost:3000. The configuration file for this type of website is generally as follows:

    1
2
3
4
5
6
7

    server {
    listen 80;
    server_name www.your.domain.name;
    location / {
        proxy_pass http://localhost:3000;
    }
}

    where:

    • proxy_pass http://localhost:3000; means that all requests are forwarded to localhost:3000, the address of the backend service.

    If you need to configure HTTPS, you can use the following configuration:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

    server{
    listen 80;
    server_name www.your.domain.name;
    return 301 https://www.your.domain.name$request_uri;
}

server{
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name www.your.domain.name;

    ssl_certificate /home/YourUserName/Documents/www/website1/private/cert.pem;
    ssl_certificate_key /home/YourUserName/Documents/www/website1/private/key.pem;

    location /{
        proxy_pass http://localhost:3000;
    }
}

Enable Configuration File

  1. Create a new configuration file in the sites-available directory according to the configuration file example above, such as website1.conf.

  2. Check if there are any syntax errors in the configuration file

    1

    sudo nginx -t

    If there are no errors, it will display nginx: configuration file /etc/nginx/nginx.conf test is successful.

  3. Create a symbolic link in the sites-enabled directory pointing to this configuration file.

    1

    sudo ln -s /etc/nginx/sites-available/website1.conf /etc/nginx/sites-enabled/website1.conf

  4. Restart the nginx service

    1

    sudo service nginx reload

    You can check the status of nginx with the following command:

    1

    sudo nginx status

  5. Access www.your.domain.name through a browser, and you will see the content of the website.

Load Balancing

If we have multiple backend services, we can use Nginx’s load balancing feature. Load balancing can distribute requests to multiple backend services to improve performance and reliability. Since I only have one server at the moment, I will not go into detail here. I will update this part when I have enough money to buy multiple servers.

comments powered by Disqus