前言
在開發 UniApp H5 項目時,隨著版本迭代,我們需要不斷發布測試版本到線上給測試人員使用;雖然 HBuilderX 點兩下就可以打包,但是打包、壓縮、再上傳還是稍顯繁瑣。好在 HBuilderX 提供了 CLI 工具,結合 CLI 和其他腳本工具我們可以做到一鍵打包、發布、并上傳部署。
HBuilderX 僅適配了 Windows 和 macOS 平臺,本文只研究 Windows 平臺如何實現自動化,使用 macOS 平臺的朋友對照著 PowerShell 腳本內容,將腳本內容替換成適配 ZSH 的 Shell 腳本即可。
思路
實現思路比較簡單,大體步驟如下:
1. 使用 HBuilderX 提供的 CLI 工具打包 UniApp 項目
2. 將打包產物壓縮成 zip 文件
3. 彈出文件瀏覽器并選中高亮 zip 文件
4. 一鍵上傳至測試服務器
腳本內容
這一段比較簡單,配置 CLI 路徑之后讀取當前項目目錄,以當前目錄路徑作為項目路徑來進行打包,這意味著我們運行此腳本時需要在項目根目錄來運行。
使用時請自行替換 CLI 路徑為 HBuilderX 安裝路徑,CLI 路徑以及更多用法參見: https://hx.dcloud.net.cn/cli/publish-h5
$cli = "C:\Users\admin\Documents\tools\HBuilderX\cli.exe"
$projectPath = (Get-Location).Path
$parameters = @("publish", "--platform", "h5", "--project", $projectPath)
&$cli @parameters
將打包產物壓縮成 ZIP 文件,并使用當前日期,結合摘要算法生成隨機文件名。
$dateTime = Get-Date -Format "yyyy_MM_dd"
$fileName = $dateTime + ".zip"
Write-Host "正在壓縮..."
Compress-Archive -Path .\unpackage\dist\build\web\* -DestinationPath $fileName -Force
$hash = (Get-FileHash -Algorithm SHA256 $fileName).Hash.Substring(0, 8)
$newFileName = "dist_$($dateTime)_$hash.zip"
Rename-Item -Path $fileName -NewName $newFileName
$fileName = $newFileName
Write-Host "壓縮完成!"
可以使用如下命令打開文件管理器并高亮對應的 zip 文件:
Invoke-Expression "explorer '/select,.\$fileName'"
如果需要自動部署至 Linux 服務器上,需要配置免密登錄,大家可以參考這篇文章來實現: https://www.cnblogs.com/caibaotimes/p/14194044.html
自動部署具有一定的風險性,請使用時務必謹慎,確保理解了腳本的每一行含義之后再使用,本人對該腳本帶來的一切后果概不負責。
自動部署
自動部署至 Linux 服務器的思路如下:
1. 上傳 zip 文件至服務器
2. 備份原有資源文件
3. 解壓 zip 文件到項目對應路徑
remoteServer 是 SSH 相關配置,將 root 替換為相應用戶名, t.tt 替換為服務器對應域名。
另外 shellScript 腳本也需要另行修改,例如前端項目路徑為 /opt/project/web,則將腳本第一行中 cd 之后緊跟的項目根路徑 /www/wwwroot/t.tt/public 替換為 /opt/project, 腳本中存在的其他 work 目錄替換為 web 目錄 。
$remoteServer = "root@t.tt"
$shellScript = @'
cd /www/wwwroot/t.tt/public
rm -rf work_backup
mv work work_backup
unzip -q /tmp/{FILENAME} -d work/
'@
$shellScript = $shellScript.Replace("`r", "").Replace("{FILENAME}", $fileName)
Write-Host "正在上傳..."
scp $fileName "$($remoteServer):/tmp/$($fileName)"
Write-Host "上傳成功!"
ssh $remoteServer $shellScript
Write-Host "部署成功!"
配置 PowerShell
編寫完腳本后,還需要將該腳本封裝為函數,并寫進 PowerShell 的配置文件中,這樣我們才能在終端中隨時調用該打包命令。
PowerShell 的配置文件位于 C:\Users\{用戶名}\Documents\PowerShell\Microsoft.PowerShell_profile.ps1,如果該文件不存在,請自行創建。
在文件中新建一個名為 buildUNI 的函數,配置相關內容之后關閉該配置文件;新開啟一個終端窗口,切換到 UniApp 項目根目錄,輸入剛才新建的函數內容,即可開始愉快的打包啦~
以下是完整腳本,Enjoy~
function buildUNI {
# 打包H5平臺文件
$cli = "C:\Users\admin\Documents\tools\HBuilderX\cli.exe"
$projectPath = (Get-Location).Path
$parameters = @("publish", "--platform", "h5", "--project", $projectPath)
&$cli @parameters
# 壓縮成zip文件
$dateTime = Get-Date -Format "yyyy_MM_dd"
$fileName = $dateTime + ".zip"
Write-Host "正在壓縮..."
Compress-Archive -Path .\unpackage\dist\build\web\* -DestinationPath $fileName -Force
$hash = (Get-FileHash -Algorithm SHA256 $fileName).Hash.Substring(0, 8)
$newFileName = "dist_$($dateTime)_$hash.zip"
Rename-Item -Path $fileName -NewName $newFileName
$fileName = $newFileName
Write-Host "壓縮完成!"
# 打開對應文件夾并高亮
#Invoke-Expression "explorer '/select,.\$fileName'"
$remoteServer = "root@t.tt"
$shellScript = @'
cd /www/wwwroot/t.tt/public
rm -rf work_backup
mv work work_backup
unzip -q /tmp/{FILENAME} -d work/
'@
$shellScript = $shellScript.Replace("`r", "").Replace("{FILENAME}", $fileName)
Write-Host "正在上傳..."
scp $fileName "$($remoteServer):/tmp/$($fileName)"
Write-Host "上傳成功!"
ssh $remoteServer $shellScript
Write-Host "部署成功!"
}
如果在終端中運行腳本時出現亂碼, 可以在 CLI 命令執行前切換終端編碼為 GB2312,執行完成后再切換回 UTF8。
function setUTF8 {
$OutputEncoding = [console]::InputEncoding = [console]::OutputEncoding = New-Object System.Text.UTF8Encoding
}
function setGB2312 {
$OutputEncoding = [console]::InputEncoding = [console]::OutputEncoding = [System.Text.Encoding]::GetEncoding("GB2312")
}
function buildUNI {
...
setGB2312
...
&$cli @parameters
setUTF8
...
}