All About NGINX Configuration, HTTPS/SSL, HTTP2, Caching
Tags: devops, showdev, nginx, ubuntu
Published: 2020-09-25 09:58:26

---
title: All About NGINX Configuration, HTTPS/SSL, HTTP2, Caching
published: true
description: learn nginx configuration, installing, adding https/ssl, https2.
tags: #devops #showdev #nginx #ubuntu
cover_image: https://kinsta.com/wp-content/uploads/2018/03/what-is-nginx.png
---

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](nginx.org) and download the compatible source code, I'll be using 1.19.2 or use the below command to download it
```sh
$  wget http://nginx.org/download/nginx-1.19.2.tar.gz
```
extracting the file
```sh
$ 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
```sh
$ 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
```sh
$ 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
```sh
# ./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](http://nginx.org/en/docs/configure.html), now we can compile and install this source by running the below commands using root permission
```sh
$ 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/](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](https://www.nginx.com/resources/wiki/start/topics/examples/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
```nginx
[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
```sh
$ sudo systemctl start nginx
```

# Download Simple template and serve it

download any template from [here](https://all-free-download.com/free-website-templates/lovely_pets_photography_template_2437_download.html) to make a demo site.
also make directory named `/sites/demo` using root permisson
```sh
$ 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
```nginx
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
```sh
$ 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 

```sh
$ 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

```nginx
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

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

```nginx
    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

```nginx
        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 


```nginx
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