Nginx server blocks

nginx server blocks¶

Also see Website Server Folder Layout Also see https://www.digitalocean.com/community/tutorials/understanding-nginx-server-and-location-block-selection-algorithms

Make sure to setup an A records for your subdomain so that DNS knows where to send requests.

Make a new website root with an html folder:

sudo mkdir -p /var/www/cliftonbartholomew.co.za/html

Assign ownership to the current user:

sudo chown -R $USER:$USER /var/www/cliftonbartholomew.co.za/html
sudo chmod -R 755 /var/www/cliftonbartholomew.co.za

Next, create a sample index.html page using nano or your favorite editor:

sudo nvim /var/www/cliftonbartholomew.co.za/html/index.html

Inside, add the following sample HTML:

<html>
    <head>
        <title>Welcome to your_domain!</title>
    </head>
    <body>
        <h1>Success!  The your_domain server block is working!</h1>
    </body>
</html>

In order for Nginx to serve this content, it’s necessary to create a server block with the correct directives. Instead of modifying the default configuration file directly, let’s make a new one at /etc/nginx/sites-available/cliftonbartholomew.co.za:

sudo nano /etc/nginx/sites-available/cliftonbartholomew.co.za

Paste in the following configuration block, which is similar to the default, but updated for our new directory and domain name:

server {
        listen 80;
        listen [::]:80;

        root /var/www/cliftonbartholomew.co.za/html;
        index index.html index.htm index.nginx-debian.html;

        server_name cliftonbartholomew.co.za www.cliftonbartholomew.co.za;

        location / {
                try_files $uri $uri/ =404;
        }
}

Next symlink it to the sites-enabled folder (you can remove it from here to disable the web-sub-server):

sudo ln -s /etc/nginx/sites-available/cliftonbartholomew.co.za /etc/nginx/sites-enabled/

Note: this server could have been setup in the main nginx.conf as a server block within the hhtp block. But it is better to put the server blocks within the sites-enable folder.

http {
   ##
   # Basic Settings
   #

   sendfile on;
   tcp_nopush on;
   tcp_nodelay on;
   keepalive_timeout 65;
   types_hash_max_size 2048;

   server_names_hash_bucket_size 64;

   include /etc/nginx/mime.types;
   default_type application/octet-stream;

    ##
    # Logging Settings
    ##

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    ##
    # Virtual Host Configs
    ##

    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
}

Enable server_names_has_bucket_size in the above config folder.

Next, test to make sure that there are no syntax errors in any of your Nginx files:

sudo nginx -t

If there aren’t any problems, restart Nginx to enable your changes:

sudo systemctl restart nginx

Nginx should now be serving your domain name. You can test this by navigating to http://cliftonbartholomew.co.za

Processing multiple websites¶

Below shows how one would listen for multiple website requests:

server {
    listen      80;
    server_name example.org www.example.org;
    ...
}

server {
    listen      80;
    server_name example.net www.example.net;
    ...
}

server {
    listen      80;
    server_name example.com www.example.com;
    ...
}

Each one of the above server blocks will be in its own file in the /etc/nginx/sites-enabled folder.

Sending paths to different consumers within the same website¶

If different parts of your url paths need to go to different consumers you can split them up using locations within a server:

server {
    listen      80;
    root /var/www/cliftonbartholomew.co.za/html;
    index index.html index.htm index.nginx-debian.html;

    server_name cliftonbartholomew.co.za www.cliftonbartholomew.co.za;

    location / {
        try_files $uri $uri/ =404;
    }

    location /api {
       proxy_pass http://localhost:8080;
       proxy_set_header    Host             $host;
       proxy_set_header    X-Real-IP          $remote_addr;
       proxy_set_header    X-Forwarded-For    $proxy_add_x_forwarded_for;
       proxy_set_header    X-Forwarded-Host   $host;
       proxy_set_header    X-Forwarded-Server $host;
       proxy_set_header    X-Forwarded-Port   $server_port;
       proxy_set_header    X-Forwarded-Proto  $scheme;
   }
}

root - where the static files live for this server (the react app)
index.html - the first file to serve if no url sub-path is given
server_name - the domain of this server (one cloud webserver with one ip can host many domains)
location / - a catch all filter that loads static files based on their URL
location /api - any URL starting with this pattern is sent to the service at 8080 (the Spring Boot app)

Nginx server blocks