前端自動化部署方案-實踐（配合shell）

如下實例項目爲vue項目，其餘項目固然也雷同咯

在項目中建一個這個麼腳本文件

不說了，上代碼

#!/bin/sh

handle=$1;
env=$2;

# 遠程部署機 webhook
# 若是用遠程機器部署的話就要用到如下方法
# preHandle(){
#     git pull orgin master
#     npm config set registry http://registry.npm.taobao.org/
#     npm install
#     npm run build-prod
# }
# 清空dist目錄
emptyRemoteDist(){
    if [ $env == "prod" ]
    then
        echo "[exec]remove remote:yourip folder"
        ssh root@yourip "rm -rf /www/jiketoutiao_admin/*"
    else
        echo "[exec]remove remote:yourip folder"
        ssh root@yourip "rm -rf /www/jiketoutiao_admin/*"
    fi
}
# 發送文件到正式服
transferFileToProSever(){
    echo "[exec]transfer file to product:yourip sever"
    scp -r ./dist/* root@yourip:/www/jiketoutiao_admin/
}
# 發送文件到測試服
transferFileToTestSever(){
    echo "[exec]transfer file to development::yourip sever"
    scp -r ./dist/* root@yourip:/www/jiketoutiao_admin/
}


if [ $handle == "build" ]
then
    if [ $env == "prod" ]
    then
        env='prod'
        echo "[exec]build ==> build production"
        npm run build-prod
        emptyRemoteDist
        transferFileToProSever
    else
        env='dev'
        echo "[exec]build ==> build development"
        npm run build
        emptyRemoteDist
        transferFileToTestSever
    fi
fi

首先你得把部署機（多是你本地機器）的ssh公鑰（~/.ssh/id_rsa.pub）配置到對應服務器（~/.ssh/authorized_keys）

命令走起就能夠直接發佈了

例1：發佈到測試服

./deploy.sh build dev

例2：發佈到正式服

./deploy.sh build prod

這些後面的參數名稱本身按照愛好改就行

 

而後在這講一下npm run build-prod的操做,先在package.json這樣配置

"scripts": {
    "dev": "node build/dev-server.js development-server",
    "dev-prod": "node build/dev-server.js production-server",
    "build": "node build/build.js  development-server",
    "build-prod": "node build/build.js production-server"
},

其實就是在執行對應操做的時候加上自定義的參數，這些參數production-server幹啥用呢，看下面

而後用來在項目中作一些配置，配置一些測試服正式服的域名啥的

 

嗯，就這些東西了，今後部署項目的時候不再用打開FTP「選中->拖拽」了，麻煩