Nginx開(kāi)源可視化配置工具NginxConfig使用教程
前言
Nginx是一款非常流行的Web服務(wù)器，作為程序員我相信大家沒(méi)少和它打交道。在我使用Nginx的過(guò)程中，一直覺(jué)得它的配置很麻煩，尤其是在Linux服務(wù)器上用vim手?jǐn)]配置的時(shí)候！最近發(fā)現(xiàn)一款開(kāi)源的Nginx可視化配置工具NginxConfig，能輕松生成Nginx配置，推薦給大家！
SpringBoot實(shí)戰(zhàn)電商項(xiàng)目mall（50k+star）地址：
https://github.com/macrozheng/mall
NginxConfig簡(jiǎn)介
NginxConfig號(hào)稱你唯一需要的Nginx配置工具，可以使用可視化界面來(lái)生成Nginx配置，功能非常強(qiáng)大，在Github上已有15K+Star！
下面是NginxConfig使用過(guò)程中的一張效果圖，大家可以看下！
安裝
接下來(lái)介紹下NginxConfig的安裝，在Linux上安裝它還是比較方便的。
安裝Node.js
由于NginxConfig是一個(gè)基于Vue的前端項(xiàng)目，我們首先得安裝Node.js。
首先從官網(wǎng)下載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命令可查看當(dāng)前安裝版本；
如果想在Linux命令行中直接運(yùn)行，還需對(duì)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安裝完成后，就可以開(kāi)始安裝NginxConfig了。
首先下載NginxConfig的安裝包，
下載地址：https://github.com/digitalocean/nginxconfig.io
下載完成后解壓到指定目錄，并使用npm命令安裝依賴并運(yùn)行；
tar -zxvf nginxconfig.io-master.tar.gz npm install npm run dev
NginxConfig運(yùn)行成功后就可以直接訪問(wèn)了，看下界面支持中文還是挺不錯(cuò)的，訪問(wèn)地址：http://192.168.3.105:8080
使用
接下來(lái)我們就體驗(yàn)下NginxConfig的可視化配置生成功能，看看是不是夠強(qiáng)大！
使用準(zhǔn)備
首先我們需要安裝Nginx，Nginx的安裝可以參考之前寫的Nginx使用教程 ；
我們將實(shí)現(xiàn)如下功能，通過(guò)靜態(tài)代理訪問(wèn)在不同目錄下的靜態(tài)網(wǎng)站，通過(guò)動(dòng)態(tài)代理來(lái)訪問(wèn)SpringBoot提供的API接口；
# 靜態(tài)代理，訪問(wèn)mall文檔網(wǎng)站 docs.macrozheng.com # 靜態(tài)代理，訪問(wèn)mall前端項(xiàng)目 mall.macrozheng.com # 動(dòng)態(tài)代理，訪問(wèn)mall線上API api.macrozheng.com
需要提前修改下本機(jī)host文件。
192.168.3.105 docs.macrozheng.com
192.168.3.105 mall.macrozheng.com
192.168.3.105 api.macrozheng.com
文檔網(wǎng)站配置
我們先來(lái)配置下mall文檔網(wǎng)站的訪問(wèn)，域名為：docs.macrozheng.com。
在NginxConfig中選擇好預(yù)設(shè)為前端，然后修改服務(wù)配置，配置好站點(diǎn)、路徑和運(yùn)行目錄；
不需要HTTPS的話可以選擇不啟用；
然后在全局配置->安全中去除Content-Security-Policy設(shè)置；
再修改性能配置，開(kāi)啟Gzip壓縮，刪除資源有效期限制。
前端網(wǎng)站配置
再來(lái)配置下mall前端網(wǎng)站的訪問(wèn)，域名為：mall.macrozheng.com。
接下來(lái)我們?cè)偬砑右粋€(gè)站點(diǎn)，修改下服務(wù)配置即可，其他和上面的基本一致。
API網(wǎng)站配置
最后配置下mall的Swagger API文檔網(wǎng)站的訪問(wèn)，域名為：api.macrozheng.com。
繼續(xù)添加一個(gè)站點(diǎn)，修改服務(wù)配置，只需修改站點(diǎn)名稱即可；
然后啟用反向代理并設(shè)置，反向代理到線上API；
路由功能暫時(shí)不用可以關(guān)閉。
使用配置 接下來(lái)我們就可以直接下載NginxConfig給我們生成好的配置了；
我們先來(lái)看下NginxConfig給我們生成的配置內(nèi)容，這種配置手寫估計(jì)要好一會(huì)吧；
點(diǎn)擊按鈕下載配置，完成后改個(gè)名字，然后上傳到Linux服務(wù)器的Nginx配置目錄下，使用如下命令解壓；
tar -zxvf nginxconfig.io.tar.gz
大家可以看到NginxConfig將為我們生成如下配置文件；
接下來(lái)將我們之前的mall文檔網(wǎng)站和mall前端網(wǎng)站放到Nginx的html目錄下，然后重啟Nginx就可以查看效果了；
docker restart nginx
先訪問(wèn)下我們的mall文檔網(wǎng)站，訪問(wèn)地址：http://docs.macrozheng.com/
在訪問(wèn)下mall的前端網(wǎng)站，訪問(wèn)地址：http://mall.macrozheng.com
最后訪問(wèn)下mall的API文檔網(wǎng)站，訪問(wèn)地址：http://api.macrozheng.com/swagger-ui.html
總結(jié)
體驗(yàn)了一把NginxConfig的配置生成功能，這種不用手寫配置，直接通過(guò)可視化界面來(lái)生成配置的方式確實(shí)很好用。NginxConfig不愧是配置高性能、安全、穩(wěn)定的NgInx服務(wù)器的最簡(jiǎn)單方法！
項(xiàng)目地址 https://github.com/digitalocean/nginxconfig.io
以上就是Nginx開(kāi)源可視化配置工具NginxConfig使用教程的詳細(xì)內(nèi)容，更多關(guān)于Nginx配置可視化NginxConfig的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Nginx是一個(gè)高性能的HTTP和反向代理web服務(wù)器。本文詳細(xì)講解了Nginx配置使用的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
前端開(kāi)發(fā)用得著的nginx配置(場(chǎng)景)
這篇文章主要介紹了前端開(kāi)發(fā)用得著的nginx配置,前端的工作過(guò)程里，本地開(kāi)發(fā)、提供測(cè)試環(huán)境，總得有個(gè)用著順手的服務(wù)器軟件，這個(gè)場(chǎng)景里nginx很流行，特分享下需要的朋友可以參考下2014-09-09
Nginx高可用(主從、主主模式)的項(xiàng)目實(shí)踐
本文介紹了Nginx高可用性的兩種主要解決方案,主從架構(gòu)和主主架構(gòu),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
Nginx+PHP(FastCGI)搭建高并發(fā)WEB服務(wù)器(自動(dòng)安裝腳本)第二版
Nginx 0.7.x + PHP 5.2.10（FastCGI）搭建勝過(guò)Apache十倍的Web服務(wù)器（第5版） 編寫2011-04-04
nginx進(jìn)行端口轉(zhuǎn)發(fā)的實(shí)現(xiàn)
本文主要介紹了nginx進(jìn)行端口轉(zhuǎn)發(fā)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
Nginx多ip部署多站點(diǎn)的實(shí)現(xiàn)步驟
使用Nginx在具有多個(gè)IP地址的服務(wù)器上部署多個(gè)站點(diǎn),從而實(shí)現(xiàn)高效、安全的網(wǎng)站托管,本文主要介紹了Nginx多ip部署多站點(diǎn)的實(shí)現(xiàn)步驟,感興趣的可以了解一下2024-01-01
nginx實(shí)現(xiàn)TCP反向代理的示例代碼
本文主要介紹了nginx實(shí)現(xiàn)TCP反向代理的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
這篇文章主要介紹了Nginx服務(wù)器安裝及配置文件與使用詳解 ,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
Nginx服務(wù)器中處理AJAX跨域請(qǐng)求的配置方法講解
這篇文章主要介紹了Nginx服務(wù)器中處理AJAX跨域請(qǐng)求的配置方法講解,包括Nginx作Apache的反向代理時(shí)的配置方法,需要的朋友可以參考下2016-01-01
Nginx+keepalived實(shí)現(xiàn)七層的負(fù)載均衡的高可用(最新解決方案)
這篇文章主要介紹了Nginx+keepalived實(shí)現(xiàn)七層的負(fù)載均衡的高可用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2024-03-03