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工程了，不過由於時間關系，上面的腳本好多異常性沒有作太多處理，這個在后續的使用中繼續完善，目前是保證能基本可用。讓測試人員用起來就行。