vue服务端打包及自动部署

上次给CI环境搭建好了，这次写了一个脚本用于服务端打包及部署使用,解决了前端需要频繁打包的问题，即时将代码推到工程库，服务端自动打包作发布,然后测试人员即时测试，尽早发现问题。

发布原理：

我没有通过软链的方式作发布，因为目前在Dev和Test环境也不需要用到回滚的地方，就是直接将打包好的文件解压到指定的目录下面。

主要流程如下：

1. gitlab-runner中.gitlab-ci.yml配置通过不同的分支，触发不同的构建脚本

2. 构建脚本拉取最新代码，然后安装依赖及打不同环境的包

3. 将打好的包，通过scp传递到Dev／Test所在的服务器

4. 通过ssh触发Dev / Test的发布脚本，主要是将压缩包解压到网站目录。

5. 作清理工作

主要用到的脚本

.gitlab-ci.yml

stages:
  - deploy-dev
  - deploy-test
 
deploy_develop:
  stage: deploy-dev
  tags:
    - nodejs
    - php
  script:
    - /data/scripts/ci/web_deploy_dev.sh
  only:
    - dev
    
deploy_test:
  stage: deploy-test
  tags:
    - nodejs
    - php
  script:
    - /data/scripts/ci/web_deploy_test.sh
  only:
    - release

安装依赖及打包，传送文件，web_deploy_dev.sh

##
#前端工程自动化构建
#dev环境
##

node_path=/data/scripts/node/bin/node
npm_path=/data/scripts/node/bin/npm

product=web_cloudTax_manage_dev #不能重复
web_path=/tmp/$product
target_path="${web_path}/dist"
git_path=git@172.1.1.22:WEB-Developer/cloud_manage.git


function display(){
 if [ $? -ne 0 ]
 then
   exit -999
 fi
}


if [ ! -d $web_path ]
then
  echo "创建文件夹${web_path}"
  sudo mkdir -p $web_path
  echo "进入项目路径:${web_path}"
  cd $web_path
  sudo git clone $git_path .
  display
else
  echo "进入项目路径:${web_path}"
  cd $web_path
  display
fi

sudo chown -R gitlab-runner:gitlab-runner $web_path

if [ -d $target_path ]
then
 sudo chown -R gitlab-runner:gitlab-runner $target_path
fi
display

sudo git checkout test-dev
sudo git pull
display

#echo "进入项目路径:${web_path}"
#cd $web_path

echo "清除原先的dist打包文件夹"
sudo rm -rf $target_path
display

echo "安装依赖"
node_depency="${npm_path} i"
$node_depency
display

echo "开始打包"
build="${npm_path} run build:dev"
$build
display

if [ ! -d "$target_path" ]
then
  echo "打包失败,dist未生成"
  exit 1
fi

echo "进入打包目录${target_path}"
cd   ${target_path}
echo "开始创建压缩包/tmp/${product}.tar.gz"
sudo tar  cvzf "/tmp/${product}.tar.gz" .
display

echo "======================================"
echo "开始复制文件到部署服务器"

scp /tmp/${product}.tar.gz  lc@172.11.10.68:/tmp
echo "文件复制完成到部署服务器"
display

echo "开始服务器部署"

ssh lc@172.11.10.68 /data/scripts/ci/web_deploy.sh $product.tar.gz
display

echo "清除原始压缩包"
sudo rm -rf "/tmp/${product}.tar.gz"
display
exit 0

发布脚本web_deploy.sh

#! /bin/sh

##
#将从gitlab-runner打包好的文件，拷贝到网站目录中作发布
##

webpath=/data/vhosts/vhosts.website/test_manage.zc.com
tar_file=$1
tar_path="/tmp/${tar_file}"

if [ ! -f "$tar_path" ]
then
  echo "打包文件${tar_path}不存在，无法作发布处理"
  exit
fi

echo "开始拷贝文件，从${tar_path}到${webpath}"
cp $tar_path  $webpath
echo "复制完成"

echo "进入网站目录"
cd $webpath

if [ ! -f "${webpath}/${tar_file}" ]
then
  echo "解压包${webpath}/${tar_file}不存在，无法发布"
  exit
fi

echo "删除原来的"
#rm -rf ${webpath}

echo  "解压"
tar xzf "${webpath}/${tar_file}"  --overwrite  .
echo "部署完成,执行清理操作"
chown -R nginx:nginx $webpath
rm "${webpath}/${tar_file}"

好了，通过上面的脚本就能快速构建前端的Vue工程了，不过由于时间关系，上面的脚本好多异常性没有作太多处理，这个在后续的使用中继续完善，目前是保证能基本可用。让测试人员用起来就行。