To work in the TECH industry as a Full Stack Engineer It's essential to know the configuration of NGINX and its core features! in this post I'm gonna walk you through all about NGINX configuration how to install, add SSL, HTTP 2, GZIP,..

installing

just head over to nginx.org and download the compatible source code, I'll be using 1.19.2 or use the below command to download it

$  wget http://nginx.org/download/nginx-1.19.2.tar.gz

extracting the file

$ tar -zxvf nginx-1.19.2.tar.gz 

change the directory, and check you have build-essential package (c compiler), if not you need to install it

$ cd nginx-1.19.2

# installing compiler
$ sudo apt install build-essential

# now check it works
$ ./configure

once the installing is done, the next part is to install some essential dependencies

$ sudo apt install libpcre3 libpcre3-dev zlib1g zlib1g-dev libssl-dev

libpcre3 is PCRE library (Perl) for implementing regular expression pattern
zlib1g is for the GZIPING
libssl-dev for the SSL, to make a self-sign certificate

now let's install NGINX server itself, run the below command with root permission, let them custom configuration complete

# ./configure --sbin-path=/usr/bin/nginx --conf-path=/etc/nginx/nginx.conf \
 --error-log-path=/var/log/nginx/err.log --http-log-path=/var/log/nginx/access.log \
  --with-pcre --pid-path=/var/run/nginx.pid --with-http_ssl_module --with-http_v2_module

to learn all about the flags used above, now we can compile and install this source by running the below commands using root permission

$ sudo make
$ sudo make install

once all done, run the server nginx command, it's working? if you got no error. check the process of nginx ps aux | grep nginx or head over http://localhost/, you see it, boom you made it!

Adding systemd system

systemd is allow us some awesome features like start, restart, stop, starting on bootup, reloading. mean we already familiar with systemd so don't need to run everytime nginx -s stop...
to configure systemd, just grap the code from the website and save it as /lib/systemd/system/nginx.service file using root permission, still need some changes in the file, open up the file /lib/systemd/system/nginx.service in the editor and make the below changes

[Unit]
Description=The NGINX HTTP and reverse proxy server
After=syslog.target network-online.target remote-fs.target nss-lookup.target
Wants=network-online.target

[Service]
Type=forking
PIDFile=/var/run/nginx.pid
ExecStartPre=/usr/bin/nginx -t
ExecStart=/usr/bin/nginx
ExecReload=/usr/bin/nginx -s reload
ExecStop=/bin/kill -s QUIT $MAINPID
PrivateTmp=true

[Install]
WantedBy=multi-user.target

now again save the file and run the command sudo systemctl daemon-reload. now start the Nginx using systemd command

$ sudo systemctl start nginx

Download Simple template and serve it

download any template from here to make a demo site.
also make directory named /sites/demo using root permisson

$ sudo mkdir -p /sites/demo

unzip the downloaded template and copy it to /sites/demo.

open the Nginx configuration file /etc/nginx/nginx.conf using your favorite editor, remove all the code from the file and add the below

worker_processes  1;


events {
    worker_connections  1024;
}

http {

    include mime.types;
    index index.html;

    server {
        listen 80;
        server_name localhost;

        root /sites/demo;

        index index.html;
    }
}

now reload the nginx worker(process) by command, when you made any change you need to run this command

$ sudo systemctl reload nginx

and visit localhost in your browser, you saw it? if you did everything right then you'd be able to see it!

Adding SSL and HTTP 2

create a new directory named ssl under /etc/nginx so it becomes /etc/nginx/ssl, you remember we installed a package at the beginning libssl-dev now it's time to take it to work. first we need to create a self-sign certificate using openssl command

$ sudo openssl req -x509 -days 10 -nodes -newkey rsa:2048 -keyout /etc/nginx/ssl/self.key -out /etc/nginx/ssl/self.crt

fill up all the required inputs, once it gets done. it'll give you two files slef.crt and self.key under the directory /et/nginx/ssl. to enable it we need to provide these two files to Nginx conf file. open up /etc/nginx/nginx.conf file

worker_processes  1;


events {
    worker_connections  1024;
}

http {

    include mime.types;
    index index.html;

    gzip on;
    gzip_comp_level 3;
    gzip_types text/css;
    gzip_types text/javascript;

    server {
        # adding 443 port, http2
        listen 443 ssl http2;
        server_name localhost;

        # Adding SSL self-sign certificate
    ssl_certificate /etc/nginx/ssl/self.crt;
    ssl_certificate_key /etc/nginx/ssl/self.key;

        root /sites/demo;

        index index.php index.html;

        location ~* \.(css|js|jpg|png)$ {
                add_header Cache-Control public;
                add_header Pragma public;
                add_header Vary Accept-Encoding;
                expires 1M;
        }
    }
}

reload the nginx service sudo systemctl reload nginx and visit to https://localhost and see the network dev tool list over https and also HTTP 2 or use the curl to confirm

$ curl -Ik -H 'Accept-Encoding: gzip, deflate' https://localhost/lovely.css

    gzip on;
    gzip_comp_level 3;
    gzip_types text/css;
    gzip_types text/javascript;

First we on Gzipping. second using compressing level 3, the more level up the more resources Nginx will use and will compress to a tiny size, so it better to keep it level 4,3.
CSS and javascript file type will be compressed

        listen 443 ssl http2;

        # Adding SSL self-sign certificate
    ssl_certificate /etc/nginx/ssl/self.crt;
    ssl_certificate_key /etc/nginx/ssl/self.key;

we enable 443 port, ssl and http2, we've already installed these dependencies at the beginning --with-http_ssl_module and --with-http_v2_module.
next, we import a self-sign certificate and key for encrypting the request

location ~* \.(css|js|jpg|png)$ {
     add_header Cache-Control public;
     add_header Pragma public;
     add_header Vary Accept-Encoding;
     expires 1M;
}

we're using here regular express to match the path if any request made at the end with .css, .js, .jpg, and .png. we'd like to add an extra header like adding cache to the browser for 1M one month.

Thanks for reading, I hope you enjoy it and learned something from this lesson.

My Github Profile: https://github.com/lifeeric