还在手撸 Nginx 配置？试试这款可视化配置工具吧，真心强大

向右看齐 2023-09-28 09:47 70阅读 0赞

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

## NginxConfig简介 ##

NginxConfig号称**你唯一需要的Nginx配置工具**，可以使用可视化界面来生成Nginx配置，功能非常强大，在Github上已有15K+Star！

![90e988ce60ecacd266d56ed081cb0106.png][]

下面是NginxConfig使用过程中的一张效果图，大家可以看下！

![1b02f5d45bda72c088924f595c4043c8.png][]

## 安装 ##

> 接下来介绍下NginxConfig的安装，在Linux上安装它还是比较方便的。

## 安装Node.js ##

> 由于NginxConfig是一个基于Vue的前端项目，我们首先得安装Node.js。

*  首先从官网下载Node.js的安装包，下载地址：https://nodejs.org/zh-cn/download/

![4af65bf6e344d6ab5dcd63668bcc9e63.png][]

*  下载成功后将安装包解压到/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命令可查看当前安装版本；

![bfa0befd6ad9213aae8b35e064ed9a9b.png][]

*  如果想在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安装完成。

![49fe69400bf50f4c4bdf683c62518f57.png][]

## 安装NginxConfig ##

> Node.js安装完成后，就可以开始安装NginxConfig了。

*  首先下载NginxConfig的安装包，下载地址：https://github.com/digitalocean/nginxconfig.io

![8a5eb66c0fcb3e3ef886cd635eb61806.png][]

*  下载完成后解压到指定目录，并使用npm命令安装依赖并运行；

tar -zxvf nginxconfig.io-master.tar.gz
    npm install
    npm run dev

*  NginxConfig运行成功后就可以直接访问了，看下界面支持中文还是挺不错的，访问地址：http://192.168.3.105:8080

![3d463330f5f7e8f4fd1afb9c9abc069a.png][]

## 使用 ##

> 接下来我们就体验下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中选择好预设为前端，然后修改服务配置，配置好站点、路径和运行目录；

![684b9fe82f917c8cca4d53a9eaeb0d68.png][]

*  不需要HTTPS的话可以选择不启用；

![b29cd0d82013d9b3925168dc8dc111d2.png][]

*  然后在全局配置->安全中去除Content-Security-Policy设置；

![48779efc2938a54fc81f4039decec9fd.png][]

*  再修改性能配置，开启Gzip压缩，删除资源有效期限制。

![c0aae796c8e80a8ad6b8b108033278b5.png][]

## 前端网站配置 ##

> 再来配置下mall前端网站的访问，域名为：mall.macrozheng.com。

*  接下来我们再添加一个站点，修改下服务配置即可，其他和上面的基本一致。

![f71bb5fb54364657eee6d9f4323d9d19.png][]

## API网站配置 ##

> 最后配置下mall的Swagger API文档网站的访问，域名为：api.macrozheng.com。

*  继续添加一个站点，修改服务配置，只需修改站点名称即可；

![216d445630d7f8461e6cbfcc6994cc84.png][]

*  然后启用反向代理并设置，反向代理到线上API；

![4e6af3e0975f26846fb74180d6a2b01a.png][]

*  路由功能暂时不用可以关闭。

![1815c9ba3e2e61c66a45ad90b198c9e2.png][]

## 使用配置 ##

*  接下来我们就可以直接下载NginxConfig给我们生成好的配置了；

![c7a8e11636f3ec4664d00af4643d3430.png][]

*  我们先来看下NginxConfig给我们生成的配置内容，这种配置手写估计要好一会吧；

![161ce10eb579a75d253b4edbe94c3e7b.png][]

*  点击按钮下载配置，完成后改个名字，然后上传到Linux服务器的Nginx配置目录下，使用如下命令解压；

tar -zxvf nginxconfig.io.tar.gz

*  大家可以看到NginxConfig将为我们生成如下配置文件；

![3394b5e93651b39eeed3ded80d22f9be.png][]

*  接下来将我们之前的mall文档网站和mall前端网站放到Nginx的html目录下，然后重启Nginx就可以查看效果了；

docker restart nginx

*  先访问下我们的mall文档网站，访问地址：http://docs.macrozheng.com

![30d18a463551bd5af8962d566183bc64.png][]

*  在访问下mall的前端网站，访问地址：http://mall.macrozheng.com

![ac54abe17a51451e63a0276f935a152c.png][]

*  最后访问下mall的API文档网站，访问地址：http://api.macrozheng.com/swagger-ui.html

![fd76cfd30a0e796a14c229eca64216b8.png][]

## 总结 ##

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

## 项目地址 ##

![18891b19a59b464b97610b8577bff021.jpeg][]

[90e988ce60ecacd266d56ed081cb0106.png]: https://img-blog.csdnimg.cn/img_convert/90e988ce60ecacd266d56ed081cb0106.png
[1b02f5d45bda72c088924f595c4043c8.png]: https://img-blog.csdnimg.cn/img_convert/1b02f5d45bda72c088924f595c4043c8.png
[4af65bf6e344d6ab5dcd63668bcc9e63.png]: https://img-blog.csdnimg.cn/img_convert/4af65bf6e344d6ab5dcd63668bcc9e63.png
[bfa0befd6ad9213aae8b35e064ed9a9b.png]: https://img-blog.csdnimg.cn/img_convert/bfa0befd6ad9213aae8b35e064ed9a9b.png
[49fe69400bf50f4c4bdf683c62518f57.png]: https://img-blog.csdnimg.cn/img_convert/49fe69400bf50f4c4bdf683c62518f57.png
[8a5eb66c0fcb3e3ef886cd635eb61806.png]: https://img-blog.csdnimg.cn/img_convert/8a5eb66c0fcb3e3ef886cd635eb61806.png
[3d463330f5f7e8f4fd1afb9c9abc069a.png]: https://img-blog.csdnimg.cn/img_convert/3d463330f5f7e8f4fd1afb9c9abc069a.png
[684b9fe82f917c8cca4d53a9eaeb0d68.png]: https://img-blog.csdnimg.cn/img_convert/684b9fe82f917c8cca4d53a9eaeb0d68.png
[b29cd0d82013d9b3925168dc8dc111d2.png]: https://img-blog.csdnimg.cn/img_convert/b29cd0d82013d9b3925168dc8dc111d2.png
[48779efc2938a54fc81f4039decec9fd.png]: https://img-blog.csdnimg.cn/img_convert/48779efc2938a54fc81f4039decec9fd.png
[c0aae796c8e80a8ad6b8b108033278b5.png]: https://img-blog.csdnimg.cn/img_convert/c0aae796c8e80a8ad6b8b108033278b5.png
[f71bb5fb54364657eee6d9f4323d9d19.png]: https://img-blog.csdnimg.cn/img_convert/f71bb5fb54364657eee6d9f4323d9d19.png
[216d445630d7f8461e6cbfcc6994cc84.png]: https://img-blog.csdnimg.cn/img_convert/216d445630d7f8461e6cbfcc6994cc84.png
[4e6af3e0975f26846fb74180d6a2b01a.png]: https://img-blog.csdnimg.cn/img_convert/4e6af3e0975f26846fb74180d6a2b01a.png
[1815c9ba3e2e61c66a45ad90b198c9e2.png]: https://img-blog.csdnimg.cn/img_convert/1815c9ba3e2e61c66a45ad90b198c9e2.png
[c7a8e11636f3ec4664d00af4643d3430.png]: https://img-blog.csdnimg.cn/img_convert/c7a8e11636f3ec4664d00af4643d3430.png
[161ce10eb579a75d253b4edbe94c3e7b.png]: https://img-blog.csdnimg.cn/img_convert/161ce10eb579a75d253b4edbe94c3e7b.png
[3394b5e93651b39eeed3ded80d22f9be.png]: https://img-blog.csdnimg.cn/img_convert/3394b5e93651b39eeed3ded80d22f9be.png
[30d18a463551bd5af8962d566183bc64.png]: https://img-blog.csdnimg.cn/img_convert/30d18a463551bd5af8962d566183bc64.png
[ac54abe17a51451e63a0276f935a152c.png]: https://img-blog.csdnimg.cn/img_convert/ac54abe17a51451e63a0276f935a152c.png
[fd76cfd30a0e796a14c229eca64216b8.png]: https://img-blog.csdnimg.cn/img_convert/fd76cfd30a0e796a14c229eca64216b8.png
[18891b19a59b464b97610b8577bff021.jpeg]: https://img-blog.csdnimg.cn/18891b19a59b464b97610b8577bff021.jpeg