1. 程式人生 > >使用PowerShell自動編譯部署前端

使用PowerShell自動編譯部署前端

前言

最近在開發一套管理系統,做了前後端分離。

後臺使用的是Asp.Net Core 3.1

前端使用的是Vue+Ant Design

自己搞了一臺雲伺服器,打算把系統部署到雲伺服器上。以供外網訪問。

 

伺服器OS是WinServer2016

所以打算通過IIS平臺來發部與部署系統。

 

後臺部署

後臺部署很好辦。因為可以通過Visual Studio,使用IIS的Web Deploy元件一健釋出到伺服器

 

 

 

 

 

 

 

前端部署-手動

 

因為專案還小。要部署的也就一個前端,一個後端。也沒有什麼分散式部署。

 

顯然現還用不到到通過工具自動從GIT拿程式碼,然後通過流水線自動構建這種大炮。

 

在沒有使用PowerShell自己部署前,前端部署流程是:

 

1。通過npm run build:live編譯,然後會把編譯好的檔案生成在dist目錄

 

2。通過Windows遠端桌面,連線到遠端伺服器。然後Ctrl+C,Ctrl+V把檔案複製到伺服器指定目錄

 

因為dist目錄檔案數量太多,但是大小都比較小,直接複製可能比較慢。

 

一般是先用WinRAR把dist目錄壓縮一下。然後手動複製到伺服器,然後解壓到伺服器目錄。

 

這樣速度上來說比直接複製快一點。

 

但是一想到後端可以通過VS一鍵釋出到伺服器,而前端就要通過手動的方式複製到伺服器

 

這樣的差距有點大。所以自己想通過寫一些指令碼達到自動部署的目的。

 

 

 

自動部署方案

 

雖然說要設計一個自動部署方案,還不如說是通過機器模擬手工部署的流程。

 

達到把手工的工作機器自動完成。從而解放雙手。

 

那麼流程其實還是和手工差不多。

 

1。編譯前端程式碼

 

2。把編譯後dist目錄壓縮成一個RAR檔案

 

3。遠端連線到伺服器

 

4。把壓縮檔案傳輸到伺服器

 

5。把壓縮檔案解壓到指定目錄(先把原目錄所有檔案刪除,再把壓縮檔案解壓)

 

6。斷開遠端伺服器連線,刪除本地壓縮檔案

 

 

 

自動部署PowerShell指令碼

 

基本上把上面的6個動作都用指令碼實現,基本上就實現了自動部署的流程。

 

接下來就是一步步的實現過程

 

1。編譯前端程式碼

 

這個很好辦。基本就是執行一下npm run build:live指令碼

 

 

Write-Host 'Build Starting' -ForegroundColor Yellow
$BuildScript={npm run build:live}
Invoke-Command -ScriptBlock $BuildScript
Write-Host 'Build Completed' -ForegroundColor Green

 

Write-Host就是在控制檯輸出資訊,-ForegroundColor就是指定以什麼顏色輸出

Invoke-Command就是執行一段指令碼 -ScriptBlock就是指令碼內容,這裡我們定義了npm run build:live

2。把編譯後dist目錄壓縮成一個RAR檔案

因為我們電腦一般都會安裝WinRAR,所以我們通過執行WinRAR來壓縮檔案。

WinRAR也可以使用Command的方式來壓縮和解壓檔案

 

Write-Host 'RAR Starting' -ForegroundColor Yellow
$WinRARPath="C:\Program Files\WinRAR\WinRAR.exe"
$CurDateString=Get-Date -Format "yyyyMMddHHmmss"
$RARFileName="WMSWeb"+$CurDateString+".rar"
$CurPath=(Resolve-Path .).Path
Start-Process -FilePath $WinRARPath -ArgumentList "a","-r","-ep1",$RARFileName,"-cfg-",".\dist\*.*" -WorkingDirectory $CurPath -NoNewWindow -Wait
Write-Host 'RAR Completed' -ForegroundColor Green

 

WinRAR壓縮命令,如果我們在CMD裡執行的話。可以輸入以下命令

WinRAR.exe a -r -ep1 -cfg- 壓縮檔名 壓縮目錄

a是壓縮 -r是包括字目錄 -ep1是排除要目錄資料夾 -cfg-是不使用自定義壓縮配置(使用預設)

所以我們指定好WinRAR.exe的路徑,

然後壓縮檔名是通過字串+日期的格式來生成檔案,這樣也就知道我們部署檔案的時間了。

通過Start-Process的PowerShell來執行一個壓縮命令

-FilePath 是指定要執行的程式

-ArgumentList是指定引數列表。多個引數之間用豆號隔開

-WorkingDirectory是當前工作目錄,一般就是我們前端程式碼的要目錄了

-NoNewWindow 不用一個新的視窗執行

-Wait 等待命令執行完成

完成以上命令,那麼就會在前端程式碼根目錄生成一個對應的壓縮檔案了

3。遠端連線到伺服器

通過PowerShell遠端連線到伺服器這一步是比較難的。

因為他要在伺服器和本機做一定的配置才可以實現

首先在伺服器裡面

通過PowerShell執行Enable-PSRemoting

來開啟可以使用PowerShell遠端連線

然後開啟PowerShell遠端連線對應的防火牆埠

開啟防火牆"Windows 遠端管理“項,埠:5985

然後在伺服器和本機都執行:winrm quickconfig

來快速配置WinRM

然後在本機通過PowerShell執行

Set-Item wsman:localhost\Client\TrustedHosts -value 伺服器IP

來允許本機可以遠端連線到伺服器

至此。環境配置方面就都已經完成。可以通過PowerShell來連線到伺服器了

然後我們通過寫PowerShell指令碼,來實現遠端連線到伺服器

Write-Host 'Deploy Starting' -ForegroundColor Yellow
$User = "登入帳號"
$Password = Read-Host -Prompt "Please enter the server password" -AsSecureString
Write-Host 'Start connecting to the server' -ForegroundColor Yellow
$Credential = New-Object -TypeName System.Management.Automation.PSCredential -ArgumentList $User, $Password
$Session = New-PSSession -ComputerName 伺服器IP -Credential $Credential
Write-Host 'Successfully connected to the server' -ForegroundColor Green

我這裡把登入伺服器帳號寫死了。但是密碼要在每次執行的時候輸入。以達到保密的目的。

因為我們這個指令碼是要上傳到Git的。要是被人看到了還是不好,所以密碼就沒有寫死在這裡了。要每次輸入

Read-Host -AsSecureString就是指要在控制檯輸入一串密碼。密碼是以*顯示出來。

New-PSSession就是開啟一個遠端的會話 -Credential是以指定憑據的方式開啟遠端會話

到這裡沒有報錯的話。基本上就表示連線到伺服器了

 

4。把壓縮檔案複製到伺服器

這個步驟還是比較簡單。基本上就一個命令

 

Copy-Item $RARFilePath -Destination $RemotePath -ToSession $Session

 

Copy-Item 複製一個對像 -Destination 複製的目標地址(伺服器目錄) -ToSession 哪個遠端會話連線

基本上這樣一個命令就可以把本地的一個檔案複製到遠端伺服器目錄了

 

5。把壓縮檔案解壓

這個步驟基本上和壓縮是一樣的。也是呼叫WinRAR.exe來執行解壓。

有區別的是壓縮是在本機執行。解壓是在遠端會話執行

 

Invoke-Command -Session $Session -ScriptBlock {param($p) Remove-Item -Path $p -Recurse -Force} -ArgumentList $RemoteRemovePath
Invoke-Command -Session $Session -ScriptBlock {param($p,$n,$rp) Start-Process -FilePath $p -ArgumentList "x",$n,"*",".\WMSWeb\" -WorkingDirectory $rp -NoNewWindow -PassThru -Wait} -ArgumentList $WinRARPath,$RARFileName,$RemotePath

 

Invoke-Command -Session就是在指定遠端會話裡執行一個命令

第一個指令碼是先把伺服器上的目標目錄檔案清除,所以Invoke-Command -ScriptBlock是呼叫遠端的Remove-Item

第二個指令碼是在遠端會話裡開啟一個程序來執行檔案解壓

我們知道用WinRAR在本地解壓是WinRAR.exe x RAR檔名 解壓哪些檔案 解壓到哪個目錄

所以通過第二個命令來呼叫遠端伺服器的WinRAR來解壓剛剛上傳的檔案到指定目錄

 

6。斷開遠端連線,刪除本的壓縮檔案

這個步就比較簡單了,基本上就呼叫兩個命令就OK

 

Disconnect-PSSession -Session $Session
Remove-Item -Path $RARFilePath

 

Disconnect-PSSession 斷開一個遠端會話

Remove-Item移除一個檔案

 

到此,一個自動部署的指令碼就完成了。把指令碼儲存在一個檔案裡。

要部署的時候。直接在VSCode的終端裡執行這個PowerShell指令碼檔案。

就可以自動把編譯好的前端部署到伺服器了

 

本PowerShell完整的指令碼

 1 $WinRARPath="C:\Program Files\WinRAR\WinRAR.exe"
 2 Write-Host 'Build Starting' -ForegroundColor Yellow
 3 $BuildScript={npm run build:live}
 4 Invoke-Command -ScriptBlock $BuildScript
 5 Write-Host 'Build Completed' -ForegroundColor Green
 6 Write-Host 'RAR Starting' -ForegroundColor Yellow
 7 $CurDateString=Get-Date -Format "yyyyMMddHHmmss"
 8 $RARFileName="Deploy"+$CurDateString+".rar"
 9 $CurPath=(Resolve-Path .).Path
10 Start-Process -FilePath $WinRARPath -ArgumentList "a","-r","-ep1",$RARFileName,"-cfg-",".\dist\*.*" -WorkingDirectory $CurPath -NoNewWindow -Wait
11 Write-Host 'RAR Completed' -ForegroundColor Green
12 $RARFilePath=$CurPath+"\"+$RARFileName
13 Write-Host 'Deploy Starting' -ForegroundColor Yellow
14 $User = "登入帳號"
15 $Password = Read-Host -Prompt "Please enter the server password" -AsSecureString
16 Write-Host 'Start connecting to the server' -ForegroundColor Yellow
17 $Credential = New-Object -TypeName System.Management.Automation.PSCredential -ArgumentList $User, $Password
18 $Session = New-PSSession -ComputerName 伺服器IP -Credential $Credential
19 Write-Host 'Successfully connected to the server' -ForegroundColor Green
20 Write-Host 'Start deploying files to the server' -ForegroundColor Yellow
21 $RemotePath="D:\Deploy\"
22 Copy-Item $RARFilePath -Destination $RemotePath -ToSession $Session
23 $RemoteRemovePath=$RemotePath+"Web\*"
24 Invoke-Command -Session $Session -ScriptBlock {param($p) Remove-Item -Path $p -Recurse -Force} -ArgumentList $RemoteRemovePath
25 Invoke-Command -Session $Session -ScriptBlock {param($p,$n,$rp) Start-Process -FilePath $p -ArgumentList "x",$n,"*",".\Web\" -WorkingDirectory $rp -NoNewWindow -PassThru -Wait} -ArgumentList $WinRARPath,$RARFileName,$RemotePath
26 Disconnect-PSSession -Session $Session
27 Remove-Item -Path $RARFilePath
28 Write-Host 'Disconnected from server' -ForegroundColor Yellow
29 Write-Host 'Deploy Completed' -ForegroundColor Green
View Code

 

沒有使用WinRAR直接傳輸到遠端伺服器的PowerShell

 1 Write-Host 'Deploy Starting' -ForegroundColor Yellow
 2 $User = "登入帳號"
 3 $Password = Read-Host -Prompt "Please enter the server password" -AsSecureString
 4 # $PWord = ConvertTo-SecureString -String $Password -AsPlainText -Force
 5 Write-Host 'Start connecting to the server' -ForegroundColor Yellow
 6 $Credential = New-Object -TypeName System.Management.Automation.PSCredential -ArgumentList $User, $Password
 7 $Session = New-PSSession -ComputerName 伺服器IP -Credential $Credential
 8 Write-Host 'Successfully connected to the server' -ForegroundColor Green
 9 Write-Host 'Start deploying files to the server' -ForegroundColor Yellow
10 Copy-Item ".\dist\*" -Destination "伺服器目錄" -ToSession $Session -Recurse -Force
11 Write-Host 'Deploy Completed' -ForegroundColor Green
12 Disconnect-PSSession -Session $Session
13 Write-Host 'Disconnected from server' -ForegroundColor Yellow
View Code