Master NginxConfig: Visual Nginx Setup, Installation & Real‑World Use

NginxConfig Overview

Nginx is a widely used web server, but manual configuration can be tedious. NginxConfig is an open‑source visual configuration tool that claims to be the only Nginx config tool you need, boasting over 15K GitHub stars.

Installation

Install Node.js

Download the Node.js installer from https://nodejs.org/zh-cn/download/ and extract it to

/usr/local/src/

.

Run the following commands to unpack and verify the version:

<code>cd /usr/local/src/
tar xf node-v16.14.2-linux-x64.tar.xz
cd node-v16.14.2-linux-x64/
./bin/node -v</code>

Create symbolic links for

node

and

npm

so they are available system‑wide:

<code>ln -s /usr/local/src/node-v16.14.2-linux-x64/bin/node /usr/bin/node
ln -s /usr/local/src/node-v16.14.2-linux-x64/bin/npm /usr/bin/npm
node -v
npm -v</code>

Install NginxConfig

Download the NginxConfig package from https://github.com/digitalocean/nginxconfig.io, extract it, and install dependencies:

<code>tar -zxvf nginxconfig.io-master.tar.gz
npm install
npm run dev</code>

Usage

Preparation

Ensure Nginx is installed (refer to the Nginx tutorial if needed).

Plan static proxies for documentation and frontend sites and a dynamic proxy for the SpringBoot API.

<code># Static proxy for docs site
docs.macrozheng.com
# Static proxy for frontend site
mall.macrozheng.com
# Dynamic proxy for API
api.macrozheng.com</code>

Update the local

/etc/hosts

file accordingly:

<code>192.168.3.105 docs.macrozheng.com
192.168.3.105 mall.macrozheng.com
192.168.3.105 api.macrozheng.com</code>

Document Site Configuration

Select the "frontend" preset in NginxConfig, then edit the service configuration to set the site name, path, and root directory.

Disable HTTPS if not needed, remove the Content‑Security‑Policy in the global security settings, and enable Gzip compression while removing resource expiration limits.

Frontend Site Configuration

Add another site with similar service settings for the frontend application.

API Site Configuration

Add a site for the Swagger API documentation, enable reverse proxy to the online API, and optionally disable the routing feature.

Generating and Applying the Configuration

Use NginxConfig to generate the configuration files, download the archive, and extract it on the Linux server:

<code>tar -zxvf nginxconfig.io.tar.gz</code>

Place the generated site files into Nginx's

html

directory and restart Nginx:

<code>docker restart nginx</code>

Verify the sites:

Documentation site – http://docs.macrozheng.com

Frontend site – http://mall.macrozheng.com

API documentation – http://api.macrozheng.com/swagger-ui.html

Summary

Using NginxConfig to generate Nginx configurations eliminates manual editing, providing a fast, visual way to create high‑performance, secure, and stable server setups.

Project Address

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