沃梦达 / IT编程 / 前端开发 / 正文

Flask + html + Shell 实现nginx配置管理web平台

一.起因: 1.最近公司频繁添加nginx 虚拟主机,操作太过频繁,人工太坑,真对此需求新开发通过界面添加nginx 虚拟主机;二.前端页面代码;form action=/nginx_configuer method=get div class=row ...

一.起因:

   1.最近公司频繁添加nginx 虚拟主机,操作太过频繁,人工太坑,真对此需求新开发通过界面添加nginx 虚拟主机;


二.前端页面代码;

<form action="/nginx_configuer" method="get">    
<div class="row">    
<div class="col-md-6" style="margin-top: 10px">    
<div class="form-group">    
<label for="exampleFormControlSelect1">nginx应用名称</label>    
<select class="form-control"    
id="exampleFormControlSelect1">    
<option>ops_nginx01</option>    
<option>ops_nginx02</option>    
</select>    
<br>    
<div class="col-xs-12">    
<label for="exampleFormControlSelect1">访问域名</label>    
<input type="text" id="text" name="domain_name"    
required="required"    
placeholder=""    
class="form-control col-md-7 col-xs-12">    
<br>    
<label for="exampleFormControlSelect1">后端ip地址</label>    
<input type="text" id="text02" name="backend_ip"    
required="required"    
placeholder=""    
class="form-control col-md-7 col-xs-12">    
<br>    
<label for="exampleFormControlSelect1">后端服务端口</label>    
<input type="text" id="text03" name="backend_port"    
required="required"    
placeholder=""    
class="form-control col-md-7 col-xs-12">    
</div>    
</div>    
</div>    
<div class="col-md-6" style="margin-top: 10px">    
<label for="exampleFormControlSelect1">Nginx IP列表</label>    
<select multiple class="form-control" id="nuber01">    
</select>    
<label for="exampleFormControlSelect1">Upstream 名称</label>    
<input type="text" id="text04" name="upstream_name"    
required="required"    
placeholder=""    
class="form-control col-md-7 col-xs-12">    
</div>    
</div>    
</div>    
<div role="tabpanel" class="tab-pane fade" id="Test">    
TEST    
</div>    
<div role="tabpanel" class="tab-pane fade" id="Ontest">    
ONTEST    
</div>    
<div role="tabpanel" class="tab-pane fade" id="Cloudtest">    
CLOUD    
</div>    
<div role="tabpanel" class="tab-pane fade" id="Prod">    
PROD    
</div>    
</div>    
</div>    
<div class="modal-footer">    
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>    
<button type="submit" class="btn btn-primary">确定</button>    
</div>    
</form>


页面效果如下;



三.flask 路由代码如下;

"""
   通过页面新增nginx 虚拟主机,固定参数,域名,后端ip地址和端口以及upstream 名称;
"""

@app.route('/nginx_configuer', methods=['GET'])
def nginx_configuer():
    domain_name = request.args.get('domain_name')
    backend_ip = request.args.get('backend_ip')
    backend_port =  request.args.get('backend_port')
    upstream_name = request.args.get('upstream_name')
    nginx_config_instance = Nginx_configure()
    result = nginx_config_instance.nginx_config_edit(domain_name,backend_ip,backend_port,upstream_name)
    return Response(json.dumps(result), mimetype='application/json')


四.后台处理逻辑代码如下;

# -*- coding: utf-8 -*-
import os
class Nginx_configure(object):
    def nginx_config_edit(self,domain_name,backend_ip, backend_port,upstream_name):
        self.name = domain_name
        self.ip   = backend_ip
        self.port = backend_port
        self.upstream_name = upstream_name
        p  = os.popen("/bin/bash ./shell/nginx_set_config.sh  {0} {1} {2} {3}".format(self.name,self.ip,self.port,self.upstream_name))
        reult = p.read()
        return reult


4.实现shell 脚本如下;

#!/bin/bash

function Edit_nginx_config(){
if [ $# == 0 ]
then
    echo "no parameters nuber"
else
    if [ $# == 4 ]
    then

cat >/etc/nginx/conf.d/$1.conf<<EOF
upstream $4 {
            server $2:$3;
          }

server {
        listen   80;
        server_name $1;
        access_log /chj/data/log/$1.log;
        location / {
           proxy_set_header Host \$host;
          proxy_set_header X-Real-IP \$remote_addr;
          proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
           add_header Access-Control-Allow-Origin *;
           add_header Access-Control-Allow-Headers X-Requested-With;
           add_header Access-Control-Allow-Methods GET,POST,OPTIONS,HEAD;
           proxy_pass http://$4;
        }

}
EOF
    echo "domain_nming add sucess"

    else
        echo  "Insufficient parameters $#"

    fi 
fi 
}
Edit_nginx_config $1 $2 $3 $4



本文标题为:Flask + html + Shell 实现nginx配置管理web平台