Nginx开源可视化配置工具NginxConfig使用教程


Posted in Servers onJune 21, 2022

前言

Nginx是一款非常流行的Web服务器,作为程序员我相信大家没少和它打交道。在我使用Nginx的过程中,一直觉得它的配置很麻烦,尤其是在Linux服务器上用vim手撸配置的时候!最近发现一款开源的Nginx可视化配置工具NginxConfig,能轻松生成Nginx配置,推荐给大家!

SpringBoot实战电商项目mall(50k+star)地址:

https://github.com/macrozheng/mall

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命令行中直接运行,还需对nodenpm命令创建软链接;

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使用教程

总结

体验了一把NginxConfig的配置生成功能,这种不用手写配置,直接通过可视化界面来生成配置的方式确实很好用。NginxConfig不愧是配置高性能、安全、稳定的NgInx服务器的最简单方法!

项目地址 https://github.com/digitalocean/nginxconfig.io

以上就是Nginx开源可视化配置工具NginxConfig使用教程的详细内容,更多关于Nginx配置可视化NginxConfig的资料请关注三水点靠木其它相关文章!


Tags in this post...

Servers 相关文章推荐
Nginx URL重写rewrite机制原理及使用实例
Apr 01 Servers
Nginx进程调度问题详解
Sep 25 Servers
Rhit高效可视化Nginx日志查看工具
Nov 01 Servers
Apache POI的基本使用详解
Nov 07 Servers
教你使用Jenkins集成Harbor自动发布镜像
Apr 03 Servers
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
Apr 07 Servers
Windows server 2012搭建FTP服务器
Apr 29 Servers
Nginx配置之禁止指定IP访问
May 02 Servers
windows系统安装配置nginx环境
Jun 28 Servers
Nginx报404错误的详细解决方法
Jul 23 Servers
在windows server 2012 r2中安装mysql的详细步骤
Jul 23 Servers
解决ubuntu安装软件时,status-code=409报错的问题
Dec 24 Servers
超越Nginx的Web服务器caddy优雅用法
详解ZABBIX监控ESXI主机的问题
Jun 21 #Servers
Apache POI操作批量导入MySQL数据库
Jun 21 #Servers
Ubuntu安装Mysql+启用远程连接的完整过程
Jun 21 #Servers
shell进度条追踪指令执行时间的场景分析
Jun 16 #Servers
Linux服务器离线安装 nginx的详细步骤
Jun 16 #Servers
利用Apache Common将java对象池化的问题
Jun 16 #Servers
You might like
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
深入PHP异步执行的详解
2013/06/03 PHP
PHP合并静态文件详解
2014/11/14 PHP
PHP 断点续传实例详解
2017/11/11 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
js浮动图片的动态效果
2013/07/10 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python中字典dict常用操作方法实例总结
2015/04/04 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
Python telnet登陆功能实现代码
2020/04/16 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
观看《永远的雷锋》心得体会
2014/03/12 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
springboot入门 之profile设置方式
2022/04/04 Java/Android