前端自動化部署方案-實踐（配合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“選中->拖拽”了，麻煩