Visual Nginx Configuration Made Easy with NginxConfig – A Complete Guide

Overview

NginxConfig

is an open‑source visual tool that generates Nginx configuration files. The source code is hosted at https://github.com/digitalocean/nginxconfig.io.

Prerequisites

Node.js

Download a Node.js binary (e.g., v16.14.2) from the official site and extract it to /usr/local/src/.

Verify the installation: /usr/local/src/node-v16.14.2-linux-x64/bin/node -v.

Create symbolic links so that node and npm are available system‑wide:

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

Install NginxConfig

Clone the repository or download the source archive:

git clone https://github.com/digitalocean/nginxconfig.io.git
# or download and extract the tarball
tar -zxvf nginxconfig.io-master.tar.gz

Enter the project directory and install dependencies:

cd nginxconfig.io
npm install

Start the development server:

npm run dev

The UI is reachable at http://<em>host_ip</em>:8080 (replace host_ip with the server’s address).

Generating Nginx Configuration

Typical use case: static proxy for documentation and front‑end sites, and dynamic proxy for an API service. Add the following host entries to /etc/hosts (adjust IP as needed):

# Static proxy for documentation site
docs.macrozheng.com
# Static proxy for front‑end site
mall.macrozheng.com
# Dynamic proxy for API
api.macrozheng.com

Site configuration steps in the UI

Documentation site

Select the “frontend” preset.

Set service name, root directory, and domain (e.g., docs.macrozheng.com).

Disable HTTPS if not required.

In “Global → Security”, remove the Content‑Security‑Policy header.

In “Performance”, enable Gzip compression and clear any resource‑expiration limits.

Front‑end site

Add another site with the same preset, change the service name and root path (e.g., mall.macrozheng.com).

API site (Swagger UI)

Add a site, set the domain api.macrozheng.com.

Enable reverse proxy to the upstream API server.

Optionally disable the routing feature if not needed.

Deploying the Generated Configuration

In the UI, click the download button to obtain a tarball (e.g., nginxconfig.io.tar.gz).

Transfer the archive to the target Linux server and extract it in the Nginx configuration directory:

tar -zxvf nginxconfig.io.tar.gz -C /etc/nginx/

Place static site files under Nginx’s html directory (e.g., /usr/share/nginx/html/).

Reload or restart Nginx (example for Docker‑based Nginx):

docker restart nginx
# or
nginx -s reload

Verify access:

Documentation: http://docs.macrozheng.com Front‑end: http://mall.macrozheng.com API Swagger UI:

http://api.macrozheng.com/swagger-ui.html

Key Points

The visual interface eliminates manual editing of nginx.conf and reduces syntax errors.

Generated configurations include Gzip compression, optional HTTPS, and customizable security headers.

All steps are reproducible with the open‑source repository at https://github.com/digitalocean/nginxconfig.io.