Nginx開源可視化配置工具NginxConfig如何使用

nginxConfig簡介

nginxconfig號稱你唯一需要的nginx配置工具,可以使用可視化界面來生成nginx配置,功能非常強大,在github上已有15k+star!

Nginx開源可視化配置工具NginxConfig如何使用

下面是NginxConfig使用過程中的一張效果圖,大家可以看下!

Nginx開源可視化配置工具NginxConfig如何使用

安裝

接下來介紹下NginxConfig的安裝,在Linux上安裝它還是比較方便的。

安裝Node.js

由于NginxConfig是一個基于Vue的前端項目,我們首先得安裝Node.js。

首先從官網下載Node.js的安裝包

下載地址:https://nodejs.org/zh-cn/download/

Nginx開源可視化配置工具NginxConfig如何使用

下載成功后將安裝包解壓到/usr/local/src/目錄下,使用如下命令即可;

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

使用./bin/node -v命令可查看當前安裝版本;

Nginx開源可視化配置工具NginxConfig如何使用

如果想在Linux命令行中直接運行,還需對node和npm命令創建軟鏈接;

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

創建完成后使用命令查看版本,至此Node.js安裝完成。

Nginx開源可視化配置工具NginxConfig如何使用

安裝NginxConfig

Node.js安裝完成后,就可以開始安裝NginxConfig了。

首先下載NginxConfig的安裝包,

下載地址:https://github.com/digitalocean/nginxconfig.io

Nginx開源可視化配置工具NginxConfig如何使用

下載完成后解壓到指定目錄,并使用npm命令安裝依賴并運行;

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

NginxConfig運行成功后就可以直接訪問了,看下界面支持中文還是挺不錯的,訪問地址:http://192.168.3.105:8080

Nginx開源可視化配置工具NginxConfig如何使用

使用

接下來我們就體驗下NginxConfig的可視化配置生成功能,看看是不是夠強大!

使用準備

首先我們需要安裝Nginx,Nginx的安裝可以參考之前寫的Nginx使用教程 ;

我們將實現如下功能,通過靜態代理訪問在不同目錄下的靜態網站,通過動態代理來訪問SpringBoot提供的API接口;

#?靜態代理,訪問mall文檔網站 docs.macrozheng.com #?靜態代理,訪問mall前端項目 mall.macrozheng.com #?動態代理,訪問mall線上API api.macrozheng.com

需要提前修改下本機host文件。

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

文檔網站配置

我們先來配置下mall文檔網站的訪問,域名為:docs.macrozheng.com。

在NginxConfig中選擇好預設為前端,然后修改服務配置,配置好站點、路徑和運行目錄;

Nginx開源可視化配置工具NginxConfig如何使用

不需要HTTPS的話可以選擇不啟用;

Nginx開源可視化配置工具NginxConfig如何使用

然后在全局配置->安全中去除Content-Security-Policy設置;

Nginx開源可視化配置工具NginxConfig如何使用

再修改性能配置,開啟Gzip壓縮,刪除資源有效期限制。

Nginx開源可視化配置工具NginxConfig如何使用

前端網站配置

再來配置下mall前端網站的訪問,域名為:mall.macrozheng.com。

接下來我們再添加一個站點,修改下服務配置即可,其他和上面的基本一致。

Nginx開源可視化配置工具NginxConfig如何使用

API網站配置

最后配置下mall的Swagger API文檔網站的訪問,域名為:api.macrozheng.com。

繼續添加一個站點,修改服務配置,只需修改站點名稱即可;

Nginx開源可視化配置工具NginxConfig如何使用

然后啟用反向代理并設置,反向代理到線上API;

Nginx開源可視化配置工具NginxConfig如何使用

路由功能暫時不用可以關閉。

Nginx開源可視化配置工具NginxConfig如何使用

使用配置 接下來我們就可以直接下載NginxConfig給我們生成好的配置了;

Nginx開源可視化配置工具NginxConfig如何使用

我們先來看下NginxConfig給我們生成的配置內容,這種配置手寫估計要好一會吧;

Nginx開源可視化配置工具NginxConfig如何使用

點擊按鈕下載配置,完成后改個名字,然后上傳到Linux服務器的Nginx配置目錄下,使用如下命令解壓;

tar?-zxvf?nginxconfig.io.tar.gz

大家可以看到NginxConfig將為我們生成如下配置文件;

Nginx開源可視化配置工具NginxConfig如何使用

接下來將我們之前的mall文檔網站和mall前端網站放到Nginx的html目錄下,然后重啟Nginx就可以查看效果了;

docker?restart?nginx

先訪問下我們的mall文檔網站,訪問地址:http://docs.macrozheng.com/

Nginx開源可視化配置工具NginxConfig如何使用

在訪問下mall的前端網站,訪問地址:http://mall.macrozheng.com

Nginx開源可視化配置工具NginxConfig如何使用

最后訪問下mall的API文檔網站,訪問地址:http://api.macrozheng.com/swagger-ui.html

Nginx開源可視化配置工具NginxConfig如何使用

? 版權聲明
THE END
喜歡就支持一下吧
點贊9 分享