vue 项目 部署脚本 自动部署

用VueJs开发快两年了,不得不说Vue是个好框架,当时在前期部署的时候每次都很头疼,因为次次都要很麻烦,不同的环境,测试机, 需要管理很多ip用户名,所以想封装一个脚本,只需要修改对应的配置文件,就可以一个命令去部署

废话不多说,在这个脚本运行前,需要配置部署机器的ssh key 到服务器的用户下,具体可以参考
https://www.jianshu.com/p/fab3252b3192(ps:虽然很想自己写一个详细的,无奈手太懒)

看看webpack的配置config.js 中 assetsPublicPath 配置项 为 /

然后在vue项目根目录下创建两个文件

deploy.conf

prod_branch=生产分支名
prod_host=生产机器ip
prod_user=生产机器用户
prod_path=项目路径

test_branch=测试环境分支名
test_host=测试环境机器ip
test_user=测试环境机器用户
test_path=测试环境项目路径

deploy.sh

#!/bin/sh
#获取环境名
env=''

if [ x$1 != x ];then
    env=$1
else
    env='prod'
fi

#获取当前分支名
curr_branch=`git symbolic-ref --short -q HEAD`
echo '当前工作分支 => '${curr_branch}'\n'

echo '读取配置文件:'
deploy_branch=`sed '/^'${env}_branch'=/!d;s/.*=//' deploy.conf`
deploy_host=`sed '/^'${env}_host'=/!d;s/.*=//' deploy.conf`
deploy_user=`sed '/^'${env}_user'=/!d;s/.*=//' deploy.conf`
deploy_path=`sed '/^'${env}_path'=/!d;s/.*=//' deploy.conf`
echo '分支 => '${deploy_branch}
echo '地址 => '${deploy_host}
echo '用户 => '${deploy_user}
echo '路径 => '${deploy_path}
echo '\n'

echo '储存当前修改'
git stash 
echo '\n'

echo '切换到需发布的分支 => '${deploy_branch}
git checkout $deploy_branch
echo '\n'

echo '编译项目'
npm run build
echo '\n'

echo '删除老版本'
ssh ${deploy_user}@${deploy_host} "rm -rf "${deploy_path}
echo '上传新版本'
scp -r ./dist ${deploy_user}@${deploy_host}:${deploy_path}
echo '\n'

echo '切回工作分支 => '${curr_branch}
git checkout $curr_branch
echo '\n'

echo '释放修改'
git stash pop
echo '\n'

echo '部署成功'

使用 sh deploy.sh prod sh deploy.sh test 或者配置其他环境

后期我会把它封装成个npm包,直接用命令配置解决这些问题

你可能感兴趣的:(VueJs)