Nginx是一款非常流行的Web服務(wù)器,，作為程序員我相信大家沒少和它打交道,。在我使用Nginx的過程中，一直覺得它的配置很麻煩,，尤其是在Linux服務(wù)器上用vim手?jǐn)]配置的時候,！最近發(fā)現(xiàn)一款開源的Nginx可視化配置工具NginxConfig，能輕松生成Nginx配置,，推薦給大家,！

NginxConfig簡介

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

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

安裝

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

安裝Node.js

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

• 首先從官網(wǎng)下載Node.js的安裝包,，下載地址：https:///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命令可查看當(dāng)前安裝版本,；

• 如果想在Linux命令行中直接運行,，還需對node和npm命令創(chuàng)建軟鏈接；

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

• 創(chuàng)建完成后使用命令查看版本,，至此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的可視化配置生成功能,，看看是不是夠強大,！

使用準(zhǔn)備

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

• 我們將實現(xiàn)如下功能,，通過靜態(tài)代理訪問在不同目錄下的靜態(tài)網(wǎng)站，通過動態(tài)代理來訪問SpringBoot提供的API接口,；

# 靜態(tài)代理,，訪問mall文檔網(wǎng)站
docs.
# 靜態(tài)代理，訪問mall前端項目
mall.
# 動態(tài)代理,，訪問mall線上API
api.

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

192.168.3.105 docs.
192.168.3.105 mall.
192.168.3.105 api.

文檔網(wǎng)站配置

我們先來配置下mall文檔網(wǎng)站的訪問，域名為：docs.,。

• 在NginxConfig中選擇好預(yù)設(shè)為前端,，然后修改服務(wù)配置，配置好站點,、路徑和運行目錄,；

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

• 然后在全局配置->安全中去除Content-Security-Policy設(shè)置；

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

前端網(wǎng)站配置

再來配置下mall前端網(wǎng)站的訪問,，域名為：mall.,。

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

API網(wǎng)站配置

最后配置下mall的Swagger API文檔網(wǎng)站的訪問，域名為：api.,。

• 繼續(xù)添加一個站點,，修改服務(wù)配置，只需修改站點名稱即可,；

• 然后啟用反向代理并設(shè)置,，反向代理到線上API；

• 路由功能暫時不用可以關(guān)閉,。

使用配置

• 接下來我們就可以直接下載NginxConfig給我們生成好的配置了,；

• 我們先來看下NginxConfig給我們生成的配置內(nèi)容，這種配置手寫估計要好一會吧,；

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

tar -zxvf nginxconfig.io.tar.gz

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

• 接下來將我們之前的mall文檔網(wǎng)站和mall前端網(wǎng)站放到Nginx的html目錄下,，然后重啟Nginx就可以查看效果了,；

docker restart nginx

• 先訪問下我們的mall文檔網(wǎng)站，訪問地址：http://docs.

• 在訪問下mall的前端網(wǎng)站,，訪問地址：http://mall.

• 最后訪問下mall的API文檔網(wǎng)站,，訪問地址：http://api./swagger-ui.html

總結(jié)

體驗了一把NginxConfig的配置生成功能，這種不用手寫配置,，直接通過可視化界面來生成配置的方式確實很好用,。NginxConfig不愧是配置高性能、安全,、穩(wěn)定的NgInx服務(wù)器的最簡單方法,！

項目地址

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

微信8.0將好友放開到了一萬，小伙伴可以加我大號了，先到先得,，再滿就真沒了