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_18.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 nodejsVerify the installation.
$ node -v
v18.17.1Step 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.gitNavigate into the directory:
cd nginxconfig.ioOnce in the directory, install the required NPM packages:
npm install
npm ciSample Output:
.......
> [email protected] prepare
> husky install
husky - Git hooks installed
added 1688 packages, and audited 1689 packages in 21s
225 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
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 Firewalldsudo firewall-cmd --add-port=8080/tcp --permanent
sudo firewall-cmd --reload
#For UFW
sudo ufw allow 8080Now run the NGINXConfig development server
npm run devSample 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 buildSample 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 serveNow 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.neveropen.tech.tar.gz
nginxconfig.io-nginx.neveropen.tech.tar.gz: gzip compressed data, last modified: Sat Apr 23 10:26:59 2022, max compression, from Unix, original size modulo 2^32 10752You 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.neveropen.tech.tar.gz | xargs chmod 0644
x nginx.conf
x sites-available/nginx.neveropen.tech.conf
x sites-enabled/nginx.neveropen.tech.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 -tIt 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:
