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解决前端访问资源跨域问题的方法详解
Mar 31 Servers
Nginx服务器添加Systemd自定义服务过程解析
Mar 31 Servers
nginx处理http请求实现过程解析
Mar 31 Servers
Nginx服务器添加Systemd自定义服务过程解析
Mar 31 Servers
查看nginx配置文件路径和资源文件路径的方法
Mar 31 Servers
Apache POI的基本使用详解
Nov 07 Servers
Apache Linkis 中间件架构及快速安装步骤
Mar 16 Servers
CentOS7和8下安装Maven3.8.4
Apr 07 Servers
Nginx反向代理、重定向
Apr 13 Servers
阿里云ECS云服务器快照的概念以及如何使用
Apr 21 Servers
基于docker安装zabbix的详细教程
Jun 05 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
PHP使用者状态管理功能的应用
2006/10/09 PHP
一个分页的论坛
2006/10/09 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
js轮播图代码分享
2016/07/14 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
javascript History对象原理解析
2020/02/17 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
酒店总经理助理岗位职责
2014/02/01 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
保密工作目标责任书
2014/07/28 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
初中政治教学反思
2016/02/23 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python
SQL Server内存机制浅探
2022/04/06 SQL Server
介绍一下28个JS常用数组方法
2022/05/06 Javascript