Learn how to – Easily generate Nginx configuration files using NGINXConfig

Learn how to – Easily generate Nginx configuration files using NGINXConfig.

Nginx is an extremely high-performance web server that has the ability to handle large sites. It is highly preferred due to its ability to handle multiple concurrent connections. It is also preferred for many other reasons such as:

• Its asynchronous event-driven architecture
• Low memory usage
• Load balancing
• TLS/SSL with SNI
• Amazing fast handling of static files
• FastCGI support with caching (PHP)
• Reverse proxying

Linux users find it easy to configure this web server, but for new users, this can be so confusing. This guide solves this tussle by demonstrating how one can easily generate these Nginx configurations using NGINXConfig

Step 1 – Install the Required Packages

Since we will be cloning NGINXConfig from GitHub, we need git installed:

##On RHEL/CentOS/Rocky Linux 8/Alma Linux 8
sudo yum install git 

##On Debian/Ubuntu
sudo apt update
sudo apt install git 

Next, install the development tools

##On RHEL/CentOS/Rocky Linux 8/Alma Linux 8
sudo yum -y groupinstall 'Development Tools'
sudo yum -y install ncurses-devel make gcc bc openssl-devel
sudo yum -y install python3

##On Debian/Ubuntu
sudo apt install curl build-essential python3 
sudo apt install libncurses-dev flex libssl-dev libelf-dev bc bison

Now Install NodeJS on your system:

##On Debian/Ubuntu
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
sudo apt -y install nodejs

##On RHEL/CentOS/Rocky Linux
curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo yum -y install nodejs

Verify the installation.

$ node -v
v14.19.1

Step 2 – Install NGINXConfig on Linux

Now we will clone the GitHub repository on our system using the command:

git clone https://github.com/digitalocean/nginxconfig.io.git

Navigate into the directory:

cd nginxconfig.io

Once in the directory, install the required NPM packages:

npm install
npm ci

Sample Output:

.......
npm WARN prepare removing existing node_modules/ before installation

> core-js@3.21.1 postinstall /home/thor/nginxconfig.io/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js:
> https://opencollective.com/core-js 
> https://patreon.com/zloirock 
> https://paypal.me/zloirock 
> bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

added 1749 packages in 15.312s

If you have a firewall enabled, you may need to allow the service through the firewall. By default, it runs on port 8080, if the port is in use, the service will listen on port 8081

##For Firewalld
sudo firewall-cmd --add-port=8080/tcp --permanent
sudo firewall-cmd --reload

#For UFW
sudo ufw allow 8080

Now run the NGINXConfig development server

npm run dev

Sample Output:

.....
 DONE  Compiled successfully in 9567ms                                2:24:00 PM

Error parsing bundle asset "/home/thor/nginxconfig.io/dist/js/chunk-vendors.js": no such file
Error parsing bundle asset "/home/thor/nginxconfig.io/dist/js/app.js": no such file
Error parsing bundle asset "/home/thor/nginxconfig.io/dist/js/src_nginxconfig_i18n_ru_index_js.js": no such file
Error parsing bundle asset "/home/thor/nginxconfig.io/dist/js/src_nginxconfig_i18n_pt-br_index_js.js": no such file
Error parsing bundle asset "/home/thor/nginxconfig.io/dist/js/src_nginxconfig_i18n_es_index_js.js": no such file
Error parsing bundle asset "/home/thor/nginxconfig.io/dist/js/src_nginxconfig_i18n_fr_index_js.js": no such file
Error parsing bundle asset "/home/thor/nginxconfig.io/dist/js/src_nginxconfig_i18n_de_index_js.js": no such file
Error parsing bundle asset "/home/thor/nginxconfig.io/dist/js/src_nginxconfig_i18n_pl_index_js.js": no such file
Error parsing bundle asset "/home/thor/nginxconfig.io/dist/js/src_nginxconfig_i18n_zh-cn_index_js.js": no such file
Error parsing bundle asset "/home/thor/nginxconfig.io/dist/js/src_nginxconfig_i18n_zh-tw_index_js.js": no such file
Error parsing bundle asset "/home/thor/nginxconfig.io/dist/js/src_nginxconfig_templates_prism_yaml_vue.js": no such file
Error parsing bundle asset "/home/thor/nginxconfig.io/dist/js/src_nginxconfig_templates_prism_docker_vue.js": no such file

No bundles were parsed. Analyzer will show only original module sizes from stats file.

Webpack Bundle Analyzer saved report to /home/thor/nginxconfig.io/dist/report.html

  App running at:
  - Local:   http://localhost:8080 
  - Network: http://192.168.205.2:8080

  Note that the development build is not optimized.
  To create a production build, run npm run build.

At this point, the NGINXConfig development server should be accessible using the provided URL http://localhost:8080 or http://serverip:8080

You can as well build the server for production using the command:

npm run build

Sample Output:

.......
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (782 KiB)
      js/chunk-vendors.js
      css/app.css
      js/app.js


Webpack Bundle Analyzer saved report to /home/thor/nginxconfig.io/dist/report.html
  File                        Size                                                  Gzipped

  dist/js/chunk-vendors.js    270.18 KiB                                            94.00 KiB
  dist/js/app.js              203.68 KiB                                            44.36 KiB
  dist/js/950.js              16.48 KiB                                             5.88 KiB
  dist/js/416.js              12.99 KiB                                             5.01 KiB
  dist/js/218.js              12.93 KiB                                             4.96 KiB
  dist/js/7.js                12.91 KiB                                             4.98 KiB
  dist/js/33.js               12.84 KiB                                             5.01 KiB
  dist/js/357.js              12.65 KiB                                             5.18 KiB
  dist/js/274.js              11.30 KiB                                             5.24 KiB
  dist/js/724.js              11.24 KiB                                             5.22 KiB
  dist/js/932.js              2.75 KiB                                              1.30 KiB
  dist/js/184.js              2.37 KiB                                              1.16 KiB
  dist/css/app.css            307.77 KiB                                            38.96 KiB

  Images and other types of assets omitted.
  Build at: 2022-03-26T14:26:45.799Z - Hash: 8b0ecd9d52d48862 - Time: 16219ms

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

Once the build process is complete, you will have the dist folder created. You can serve the content in the folder using the Node.js static file server installed as below:

sudo npm install -g serve

Now use it to serve the content:

$ serve -s dist
.......
   ┌────────────────────────────────────────────────────┐
   │                                                    │
   │   Serving!                                         │
   │                                                    │
   │   - Local:            http://localhost:3000        │
   │   - On Your Network:  http://192.168.205.2:3000   │
   │                                                    │
   └────────────────────────────────────────────────────┘

Step 3 – Generate Nginx Configuration files using NGINXConfig.

Open the provided URL on a browser. Now create an Nginx config file by providing the domain name, path, and document root. You can also select preset templates.

You can proceed and make adjustments if you want to use HTTPS for your site. If not, you can disable it by unchecking the box

Here, you can also set the certificate type, custom, or from Let’s Encrypt.

Next, configure PHP if the site is PHP-based.

Make other configurations depending on the site, these configurations include; Python, Reverse proxy, site logging e.t.c

Now you will have the Nginx conf file ready depending on the configurations made.

Below is a sample file for HTTP:

For HTTPS:

You can choose to copy the file to the provided folder or download a zipped config file and upload it to the server’s /etc/nginx directory.

$ file nginxconfig.io-nginx.ownyourlife.com.ng.tar.gz
nginxconfig.io-nginx.ownyourlife.com.ng.tar.gz: gzip compressed data, last modified: Sat Apr 23 10:26:59 2022, max compression, from Unix, original size modulo 2^32 10752

You can as well copy a base64 string of the compressed config and paste it into your server’s command line to execute it.

Once copied to the required folder, enable the conf, restart Nginx, and access the site.

# Create a backup of your current NGINX configuration:
tar -czvf nginx_$(date +'%F_%H-%M-%S').tar.gz nginx.conf sites-available/ sites-enabled/ nginxconfig.io/

#Extract the new compressed configuration archive using tar:
$ tar -xzvf nginxconfig.io-nginx.ownyourlife.com.ng.tar.gz | xargs chmod 0644
x nginx.conf
x sites-available/nginx.ownyourlife.com.ng.conf
x sites-enabled/nginx.ownyourlife.com.ng.conf
x nginxconfig.io/letsencrypt.conf
x nginxconfig.io/security.conf
x nginxconfig.io/general.conf
x nginxconfig.io/php_fastcgi.conf

#Move files and folders
sudo mv nginx.conf /etc/nginx/nginx.conf
sudo mv nginxconfig.io /etc/nginx/nginxconfig.io
sudo mv sites-available/* /etc/nginx/conf.d/

# Validate configs
$ sudo nginx -t

It is that easy!

That marks the end of this guide on how to easily generate Nginx Configuration files using NGINXConfig. This is just a short guide to get you started with NGINXConfig. Now proceed and enjoy the awesomeness of this tool.

Related posts:

• Configure Varnish Cache for Apache/Nginx on Ubuntu
• Analyze Nginx/Apache Log Files using SEO Log File Analyser
• Deploy Nginx Ingress Controller on Kubernetes using Helm Chart
• Understanding NGINX and How to Monitor it