How to use Nginx open source visual configuration tool NginxConfig

NginxConfig Introduction

NginxConfig Known asThe only Nginx configuration tool you need, you can use the visual interface to generate Nginx configuration, the function is very powerful, it is available on Github There are 15K Star!

The following is a rendering of the use of NginxConfig, you can take a look!

Installation

Next, we will introduce the installation of NginxConfig. It is relatively convenient to install it on Linux.

Install Node.js

Since NginxConfig is a front-end project based on Vue, we must first install Node.js.

First download the installation package of Node.js from the official website

Download address: https://nodejs.org/zh-cn/download/

After the download is successful, unzip the installation package to the /usr/local/src/ directory and use the following command;

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

Use the ./bin/node -v command to view the currently installed version;

If you want to run it directly from the Linux command line, you also need to # The ##node and npm commands create soft links;

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

After the creation is completed, use the command to view the version. At this point, the

Node.js installation is complete.

Install NginxConfig

Node.jsAfter the installation is complete, you can start the installationNginxConfig .

First download the installation package of

NginxConfig,

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

After the download is complete, extract it to the specified directory, and use the

npm command to install the dependencies and run it;

tar -zxvf nginxconfig.io-master.tar.gz
npm install
npm run dev

NginxConfigAfter successful operation, You can access it directly. It is quite good to see that the interface supports Chinese. Access address: http://192.168.3.105:8080

Use

Next we will experience the visual configuration generation function of

NginxConfig to see if it is powerful enough!

Preparation for use

First we need to install Nginx. For Nginx installation, please refer to the Nginx usage tutorial written before;

We will implement the following functions through static proxy To access static websites in different directories, access the API interface provided by SpringBoot through a dynamic proxy;

# 静态代理，访问mall文档网站
docs.macrozheng.com
# 静态代理，访问mall前端项目
mall.macrozheng.com
# 动态代理，访问mall线上API
api.macrozheng.com

You need to modify the local host file in advance.

192.168.3.105 docs.macrozheng.com

192.168.3.105 mall.macrozheng.com
192.168.3.105 api.macrozheng.com

Documentation website Configuration

Let’s first configure access to the mall document website. The domain name is: docs.macrozheng.com.

Select

default as the front end in NginxConfig, then modify the service configuration, configure the site, path and running directory;

If you don’t need HTTPS, you can choose not to enable it;

Then remove it in

Global Configuration->Security Content-Security-Policy Settings;

Then modify the

Performance configuration, enable Gzip compression, and delete the resource validity limit.

Front-end website configuration

Let’s configure access to the mall front-end website. The domain name is: mall.macrozheng.com.

Next we add another site and modify the service configuration. The rest is basically the same as above.

API网站配置

最后配置下mall的Swagger API文档网站的访问，域名为：api.macrozheng.com。

继续添加一个站点，修改服务配置，只需修改站点名称即可；

然后启用反向代理并设置，反向代理到线上API；

路由功能暂时不用可以关闭。

使用配置 接下来我们就可以直接下载NginxConfig给我们生成好的配置了；

我们先来看下NginxConfig给我们生成的配置内容，这种配置手写估计要好一会吧；

点击按钮下载配置，完成后改个名字，然后上传到Linux服务器的Nginx配置目录下，使用如下命令解压；

tar -zxvf nginxconfig.io.tar.gz

大家可以看到NginxConfig将为我们生成如下配置文件；

接下来将我们之前的mall文档网站和mall前端网站放到Nginx的html目录下，然后重启Nginx就可以查看效果了；

docker restart nginx

先访问下我们的mall文档网站，访问地址：http://docs.macrozheng.com/

在访问下mall的前端网站，访问地址：http://mall.macrozheng.com

最后访问下mall的API文档网站，访问地址：http://api.macrozheng.com/swagger-ui.html

The above is the detailed content of How to use Nginx open source visual configuration tool NginxConfig. For more information, please follow other related articles on the PHP Chinese website!