Nginx開源視覺化設定工具NginxConfig如何使用

NginxConfig簡介

NginxConfig號稱你唯一需要的Nginx配置工具，可以使用視覺化介面來產生Nginx配置，功能非常強大，在Github上已有15K Star！

以下是NginxConfig使用過程中的一張效果圖，大家可以看下！

安裝

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

安裝Node.js

由於NginxConfig是一個基於Vue的前端項目，我們必須先安裝Node.js。

先從官網下載Node.js的安裝套件

#下載網址：https://nodejs.org/zh-cn/download/

下載成功後將安裝套件解壓縮到/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指令可查看目前安裝版本；

#如果想在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安裝完成。

安裝NginxConfig

#Node.js安裝完成後，就可以開始安裝NginxConfig了。

首先下載NginxConfig的安裝包，

#下載位址：https://github.com/digitalocean/nginxconfig.io

下載完成後解壓縮到指定目錄，並使用npm命令安裝依賴並運行；

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

NginxConfig運行成功後就可以直接訪問了，看下介面支援中文還挺不錯的，訪問位址：http://192.168.3.105:8080

##使用

接下來我們就體驗下

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
192.168.3.105 api.#macrozheng.com

#3.配置

我們先來設定下mall文件網站的訪問，網域為：docs.macrozheng.com。

在

NginxConfig

中選擇好預設為前端，然後修改服務配置，配置好網站、路徑和運行目錄；

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

#然後在

全域設定->安全性

中移除Content-Security-Policy設定;

再修改

效能

配置，開啟Gzip壓縮，刪除資源有效期限限制。

前端網站配置

再來配置下mall前端網站的訪問，網域為：mall.macrozheng.com。

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

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

以上是Nginx開源視覺化設定工具NginxConfig如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！