Nginx開源視覺化設定工具NginxConfig使用教學

前言

Nginx是一款非常流行的Web伺服器，作為程式設計師我相信大家沒少和它打交道。在我使用Nginx的過程中，一直覺得它的設定很麻煩，尤其是在Linux伺服器上用vim手擼設定的時候！最近發現一款開源的Nginx視覺化設定工具NginxConfig，能輕鬆生成Nginx設定，推薦給大家！

SpringBoot實戰電商專案mall（50k+star）地址：

https://github.com/macrozheng/mall

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

檔案網站設定

我們先來設定下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

總結

體驗了一把NginxConfig的設定生成功能，這種不用手寫設定，直接通過視覺化介面來生成設定的方式確實很好用。NginxConfig不愧是設定高效能、安全、穩定的NgInx伺服器的最簡單方法！

專案地址 https://github.com/digitalocean/nginxconfig.io

以上就是Nginx開源視覺化設定工具NginxConfig使用教學的詳細內容，更多關於Nginx設定視覺化NginxConfig的資料請關注it145.com其它相關文章！