美文网首页原型群集·测试人在路上
构建简单原型展示系统,使用git钩子(hooks)自动同步仓库

构建简单原型展示系统,使用git钩子(hooks)自动同步仓库

作者: gaopq | 来源:发表于2017-04-28 15:43 被阅读670次

    技术栈

    Tech Usage
    git 构建裸仓库用于存放钩子/文件仓库
    shell 用于更新项目原型版本及提供给不熟悉git操作的产品同事更新原型
    html 用于根据js配置文件展示项目原型及版本
    js 用于存放所有项目的版本配置, 供html及shell脚本解析调用
    nginx HTTP服务器用于配置web域名访问及简单账户密码限制
    AxureRP 产品同事用于生成用于原型预览的HTML文件

    Bare repository(用于存放钩子,相当于中央仓库)

    cd /data/bare_repo
    git init --bare rp.git
    cd rp.git/hooks
    vim post-receive
    --- contents of post-receive ----
    #!/bin/bash
    
    unset GIT_DIR
    dep_path="/data/prototype/"
    
    cd "$dep_path"
    git add . -A && git stash
    git pull origin master
    
    exit 0
    --- contents end ----
    

    Local repository(用于存放供web访问的文件)

    cd /data/prototype
    git init
    git remote add origin /data/bare_repo/rp.git
    

    项目结构(/data/prototype 下)

    • config: 用于存放项目配置
    • rp: 用于存放项目原型 HTML 文件
    • scripts: 存放提供给产品同事执行的 shell 脚本,用于更新原型文件或原型版本
    • index.html/version.html: web页面入口,用于页面展示

    代码样例

    • config/properties.js
    var rpVersion = {
      mmb: [0.1, 0.2],
      aitu: [0.1],
      wedis: [0.1, '0.2'],
      kqmp : [0.1, 0.2, 'web'],
      ddysApp: [2.13, 2.14],
      ddysWx: [2.13, 2.14],
      ddysPc: [2.13],
      ddysAdmin: [2.13],
      ddysXbld: [2.13]
    }
    
    • scripts/git_rp_repo_sync.sh
    #!/bin/bash
    # encoding: utf-8
    ###################################################
    # Author:                 gaopq
    # Version:                0.01
    # Email:                  peiqianggao@gmail.com
    # Org:                    DDYS
    # Date:                   2017-01-10 18:23:34
    # ChangeLog:              add versions page for projects
    # ChangeLog:              fixed bugs when this script updated itself and other user execute it before pull and update it.
    # Description:            更新原型系统请先在 rp 文件夹下对应项目文件夹下创建代表版本的文件夹, 并把原型HTML文件生成到该文件夹下再执行本脚本
    ###################################################
    CONF_FILE=$(dirname $0)/../config/properties.js
    RP_DIR="$(dirname $0)/../"
    TMP_SHELL_NAME=".tmp.sh"
    # 获取所有项目名
    get_projects(){
       while read line
       do
           if [[ $line != ${line%:*} ]]
           then
               projs="$projs ${line%:*}"
           fi
       done < $CONF_FILE
       echo $projs
    }
    # 获取某个项目的现有版本号, param: project_name
    get_versions(){
        [[ $# -ne 1 ]] && return 1
        proj=$1
        versions=$(grep -w $proj $CONF_FILE | awk -F: '{print $2}')
        echo $versions | sed "s/ //g;s/[]\[,]/ /g;s/'//g;"
    }
    # 给某个项目添加一个版本, params: project_name, new_version
    add_version(){
        [[ $# -ne 2 ]] && return 1
        proj=$1
        new_version=$2
        versions_pro=$(get_versions $proj)
        echo $versions_pro | grep -w $new_version > /dev/null
        if [[ $? -eq 0 ]]
        then
            return 1
        else
        # write new_version to file
        # 此处不能使用单引号
        # sed 's/(^ *$proj.*)(],.*$)/\1, ${new_version}\2/' $CONF_FILE
            sed -i "s/\(^ *$proj.*\)\(],.*$\)/\1, '${new_version}'\2/" $CONF_FILE
            return 0
        fi
    }
    # 通过 git 上传文件
    rp_git_sync(){
        git add -A :/
        git commit -m "$(date +'%Y-%m-%d %H:%M:%S')[INFO]update project: $1, version: $2, From: $(uname -a)"
        echo -e "\e[1;32m][INFO]Waiting for updating and pushing ...\e[0m"
        git push origin master && echo -e "\e[1;32m$(date +'%Y-%m-%d %H:%M:%S') updated successfully.\e[0m"
    }
    # 从仓库更新文件并判断本shell文件是否在被更新的列表中
    git_pull_test_shell_script_if_updated(){
        # shell_name=$(basename $0)
        # if the current running shell is not the $TMP_SHELLL_NAME
        [[ ${0%%$TMP_SHELL_NAME} == $0 ]] && cp -rf $0 $(dirname $0)/${TMP_SHELL_NAME}
    
        cd $RP_DIR
        git pull origin master
        [[ $? -ne 0 ]] && exec bash scripts/${TMP_SHELL_NAME}
    }
    # 开始工作
    git_pull_test_shell_script_if_updated
    echo -e "\e[1;32m\nPlease select project (select one and update all ^_^)\e[0m"
    select project in $(get_projects)
    do
        # vers=($(get_versions $project))
        # last_ver=${vers[((${#vers[@]}-1))]}
        last_ver=$(ls -t ${RP_DIR}rp/$project | head -1)
        echo "Versions: $(get_versions $project)"
        echo -en "\e[1;32m\nPlease input your version name (defaults: $last_ver): \e[0m"
        read version
        version=${version// /}
        version=${version:-$last_ver}
        add_version $project $version
        rp_git_sync $project $version
        break
    done
    exit 0
    
    • Nginx 配置
    server {
            listen       80;
            server_name  my_domin_name;
            root /data/prototype/;
            index index.html;
            access_log /data/logs/nginx/my_domain_name.log main;
            location ^~ / {
                try_files $uri $uri/ /index.html?$args;
                # Before this: htpasswd -c $NGINX_PATH/passwd_db/passwd.db username
                auth_basic "Input Password";
                auth_basic_user_file $NGINX_PATH/passwd_db/passwd.db;
            }
    
            # avoid accessing shell scripts from web 
            location ^~ /scripts {
                deny all;
            }
    
            location ~* \.(js|css|png|jpg|jpeg|gif|ico|html)$ {
                if (-f $request_filename) {
                    root /data/prototype;
                    expires 10s;
                    }
            }
    }
    

    Problems and solutions

    • properties.js 文件中版本号可用单引号或双引号括起,便于 js 解析
    • 用户在执行本 shell 是发现本 shell 文件在远程仓库被修改, git pull 的时候报错
      1. 每次执行脚本前若发现执行的不是备份版,则备份一次本脚本
      2. 发现 git pull 失败时默认认为是本 shell 在 pull 列表中,则使用 exec 执行备份的脚本
    • 用户端配置
    # server 端先配置一个可以访问 /data/bare_repo 和 /data/prototype 的用户
    # client 端使用 ssh-keygen 命令生成公钥私钥并配置到 server 上
    git init
    git remote add rp_user@ip:/data/bare_repo/rp.git
    # 首次更新,获取初始化文件及 shell 脚本
    git pull origin master 
    
    # 使用: 
    # 在 rp 文件夹下对应项目文件夹下创建代表版本的文件夹, 并把原型HTML文件生成到该文件夹下
    # 直接将 scripts 下的 git_rp_repo_sync.sh 拖到 git-bash 或 terminal 中执行即可
    # 可能需要: chmod +r git_rp_repo_sync.sh
    

    效果预览

    • web
    rp_index.png rp_versions.png
    • shell 执行效果
    rp_shell.png

    相关文章

      网友评论

        本文标题:构建简单原型展示系统,使用git钩子(hooks)自动同步仓库

        本文链接:https://www.haomeiwen.com/subject/jmtazttx.html