使用NginxConfig实现Nginx可视化配置

Lewis
2022-04-22 / 0 评论 / 56 阅读 / 正在检测是否收录...

一、NginxConfig简介与安装

NginxConfig号称你唯一需要的Nginx配置工具,可以使用可视化界面来生成Nginx配置,功能非常强大,在Github上已有15K+Star!项目地址: 点击进入

1.1 安装Node.js

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

  • 首先从官网下载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命令可查看当前安装版本
  • 如果想在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安装完成

1.2 安装NginxConfig

  • 首先下载NginxConfig的安装包,下载地址:https://github.com/digitalocean/nginxconfig.io
  • 下载完成后解压到指定目录,并使用npm命令安装依赖并运行

    tar -zxvf nginxconfig.io-master.tar.gz
    npm install
    npm run dev
  • NginxConfig运行成功后就可以直接访问了,看下界面支持中文还是挺不错的,访问地址:http://ip:8080

二、使用

2.1 使用准备

  • 首先我们需要安装Nginx
  • 我们将实现如下功能,通过静态代理访问在不同目录下的静态网站,通过动态代理来访问SpringBoot提供的API接口

    # 静态代理,访问文档网站
    docs.bdysoft.com
    # 静态代理,访问前端项目
    mall.bdysoft.com
    # 动态代理,访问线上API
    api.bdysoft.com
  • 需要提前修改下本机host或DNS解析,使得上面的三个域名解析到对应的服务器

2.2 文档网站配置(docs.bdysoft.com)

  • 在NginxConfig中选择好预设为前端,然后修改服务配置,配置好站点、路径和运行目录;
    l29sxfqm.png
  • 不需要HTTPS的话可以选择不启用;
    l29sxsyg.png
  • 然后在全局配置->安全中去除Content-Security-Policy设置
    l29sya63.png
  • 再修改性能配置,开启Gzip压缩,删除资源有效期限制
    l29syoll.png

2.2 前端网站配置(mall.bdysoft.com)

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

2.3 API网站配置(Swagger API文档网站的访问 api.bdysoft.com)

  • 继续添加一个站点,修改服务配置,只需修改站点名称即可
    l29t1444.png
  • 然后启用反向代理并设置,反向代理到线上API
    l29t1bw6.png
  • 路由功能暂时不用可以关闭
    l29t1s3a.png

三、使用配置

  • 接下来我们就可以直接下载NginxConfig给我们生成好的配置了
    l29t2aa3.png
  • 我们先来看下NginxConfig给我们生成的配置内容,这种配置手写估计要好一会吧
    l29t2m9e.png
  • 点击按钮下载配置,完成后改个名字,然后上传到Linux服务器的Nginx配置目录下,使用如下命令解压

    tar -zxvf nginxconfig.io.tar.gz
  • 大家可以看到NginxConfig将为我们生成如下配置文件
    l29t37lr.png
  • 接下来将我们之前的文档网站和前端网站放到Nginx的html目录下,然后重启Nginx就可以查看效果了

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

0

评论 (0)

取消