前端專案無獨立部署環境時，使用shell命令簡化依賴後臺部署的繁雜操作

漓漾li發表於2019-06-24
前端

背景

有一些前端專案，沒有獨立的的各環境部署流程，需要依附後臺專案的靜態服務來一同部署，這種情況下，前端同學提交一次程式碼將會是很繁雜的操作

  1. 修改程式碼
  2. 打包專案
  3. 前端專案git提交
  4. 拉取後臺專案最新程式碼
  5. 刪除後臺專案的靜態服務目錄下，舊的前端打包資源
  6. 把新的前端資源複製到靜態服務目錄下
  7. 後臺專案git提交

一次兩次的上線還可容忍，但測試階段，修改bug時，就需要不停重複上述流程，來部署測試環境。忍無可忍，無須再忍。。。

使用shell指令碼組合這一系列的操作，省時省力

#!/bin/bash
# 進入後臺專案 靜態資源目錄 =======
cd ./background-project/web/src/main/resources/static/
# 獲取當前分支 =======
branch=$(git symbolic-ref --short HEAD)

# 拉去當前分支最新程式碼 =======
git pull origin "$branch"
echo -e "\n\nbackground-project專案當前的分支為:   $branch"

read -p $'\n\n請確認分支，是否繼續操作？y or n: ' isContinue
if [ "$isContinue" != 'y' ];then 
    exit
fi

# 替換檔案 =======
# 刪除舊的打包資源
rm -r ./static
rm index.html
# 複製新的打包資源到後臺目錄下
cp -r ../../../../../../fe-project/dist/* ./
git status
read -p $'\n\n已替換檔案成功，是否繼續提交操作？y or n: ' isContinueSubmit
if [ "$isContinueSubmit" != 'y' ];then 
    // 撤銷此次複製操作
    git reset --hard HEAD
    git clean -f
    exit
fi

# git提交 =======
git add .
read -p $'\n\n請輸入您的commit資訊： ' commitInfo
git commit -m ${commitInfo}
git push origin ${branch}

複製程式碼

專案地址

使用

  • 本人把shell檔案放在了與前後端專案同級的目錄下。也可以把它放在後端專案的靜態目錄下，記得把它新增進.gitignore避擴音交就可以了。
  • 自行修改前端專案打包資源路徑、後端專案靜態資源目錄路徑
  • git bash(windows)或終端(linux)中進入shell檔案目錄下，使用sh命令即可執行shell檔案：sh ./shell-tool.sh。

難度不大，僅僅是一些shell命令和git命令的堆砌，但也學了一些東西

  • echo -e可以識別轉義字元。可以在輸出時加入換行符 echo -e '\n hello world'實現換行
  • 使用$''形式的字串，可以在read命令中使提示語換行。see here
  • read命令
  • git獲取當前專案分支
    • branch=$(git symbolic-ref HEAD | sed -e 's,.*/\(.*\),\1,')
    • see here

相關文章