作為一名專職前端開發的我，為了幫助解決目前工作中的一些繁瑣的工作（主要是處理 excel數據），解放程序員雙手，前陣子就剛剛入了 python 的坑，畢竟也算是門工具語言，都已經加入少兒編程了，哈哈哈！

背景

實踐是檢驗學習成果的唯一標準！

在我學習過程中，一直琢磨著如何將學習的理論與我所掌握的知識結合起來，來解決或者處理實際問題，于是就有了 前端自動化打包部署 的念頭。

盡快近幾年，市面上關于自動化部署的工具層出不窮，比如當下比較流行的 Jenkins ，盡管如此，我還是想自己試一試~

環境配置

初學乍道，切不可眼高手低，先給自己定個小目標，先實現一個最簡單版本。

工欲善其事，必先利其器，開發環境的配置是開發的第一步。

關于 python 的安裝配置我就不贅述了。

為了方便測試，我本地利用 VM 虛擬機安裝了 centos 系統，安裝并配置 nginx 充當了服務器。

難點分析

要想實現打包，核心需要考慮下面2個問題：

• 在 python 腳本中如何去執行前端的打包命令 npm run build （這里以 vue 項目作為測試）
• 在 python 腳本中如何連接服務器將打包好的問題上傳到服務器的指定目錄中去

理論求證

通過查閱資料得知， python 中的 os 模塊提供了非常豐富的方法用來處理文件和目錄，其中 os 模塊中的 system() 函數可以方便地運行其他程序或者腳本，其語法如下：

os.system(command)

command 要執行的命令，相當于 在Windows 的 cmd 窗口中輸入的命令。如果要向程序或者腳本傳遞參數，可以使用空格分隔程序及多個參數，該方法返回結果如果為 0，則表示命令執行成功,其它值則表示錯誤。

這樣就解決了第一個問題。

關于服務器連接這一塊，可以使用 python 的一個第三方模塊 paramiko ，它實現了 SSHv2 協議，允許我們直接使用 SSH 協議對遠程服務器執行操作，關于 paramiko 的更多知識和用法，請戳 這里

這樣上面兩個難點就解決了，我們就可以開工了。

小試牛刀

首先定義一個類 SSHConnect 后續的方法我們都會在這個類里面完善

class SSHConnect:# 定義一個私有變量，用來保存ssh連接通道，初始化為None__transport = None 復制代碼

初始構造函數

我們需要在構造函數中定義我們需要的參數，初始化我們的連接

# 初始化構造函數（主機，用戶名，密碼，端口，默認22） def __init__(self, hostname, username, password, port=22):self.hostname = hostnameself.port = portself.username = usernameself.password = password# 創建 ssh 連接通道self.connect() 復制代碼

建立 ssh 連接通道

我們在構造函數中最后調用了一個 connect 方法建立 ssh 連接通道，現在我們來具體的實現它

# 建立ssh連接通道，并綁定在 __transport 上 def connect(self):try:# 設置SSH連接的遠程主機地址和端口self.__transport = paramiko.Transport((self.hostname, self.port))# 通過用戶名和密碼連接SSH服務端self.__transport.connect(username=self.username, password=self.password)except Exception as e:# 連接出錯print(e) 復制代碼

執行打包

現在我們需要創建一個打包方法，執行 npm run build 命令，利用我們 os.system 方法，入參是 work_path 是打包項目所在的目錄

# 前端打包（入參work_path為項目目錄） def build(self, work_path):# 開始打包print('########### run build ############')# 打包命令cmd = 'npm run build'# 切換到需要項目目錄os.chdir(work_path)# 當前項目目錄下執行打包命令if os.system(cmd) == 0:# 打包完成print('########### build complete ############') 復制代碼

只有一點要注意，就是要通過 os.chdir(work_path) 方法切換到項目的所在目錄，打包當前的項目。

文件上傳

打包結束后，我們需要將打包好的 dist 文件夾下的文件上傳到服務器，因此，我們需要創建一個文件上傳方法，我們通過 paramiko.SFTPClient 方法創建 sftp 來完成

該方法入參需要兩個參數，一個是本地項目打包后的 dist 路徑 local_path ，另一個是要上傳到服務器的目標目錄 target_path

# 文件上傳 def upload(self, local_path, target_path):# 判斷路徑問題if not os.path.exists(local_path):return print('local path is not exist')print('文件上傳中...')# 實例化一個 sftp 對象,指定連接的通道sftp = paramiko.SFTPClient.from_transport(self.__transport)# 打包后的文件路徑local_path = os.path.join(local_path, 'dist')# 本地路徑轉換，將windows下的 轉成 /local_path = '/'.join(local_path.split(''))# 遞歸上傳文件self.upload_file(sftp, local_path, target_path)print('文件上傳完成...')# 關閉連接self.close() 復制代碼

為了方便操作，需要將 windows 中的路徑分隔符 轉成 linux 下的分隔符 /

此外，該方法中調用了另外兩個方法，分別是 upload_file 和 close ， close 方法的定義很簡單，直接調用 __transport.close() 方法即可

# 關閉連接 def close(self):self.__transport.close() 復制代碼

考慮到我們的 static 不是文件，而是一個文件夾，因此需要遞歸遍歷，并將其拷貝到服務器上，所以我們定義了 upload_file 方法，專門負責這個事情。

執行 linux 命令

上面我們也提到了，需要遞歸遍歷 static 并上傳到服務器，那么上傳到服務器的目錄結構肯定需要跟原來的 static 保持一致，因此對服務器的操作肯定是不可少的，需要執行 linux 命令，我們需要一個 exec 方法來實現這個功能，入參就是 linux 命令

# 執行linux命令 def exec(self, command):# 創建 ssh 客戶端ssh = paramiko.SSHClient()# 指定連接的通道ssh._transport = self.__transport# 調用 exec_command 方法執行命令stdin, stdout, stderr = ssh.exec_command(command)# 獲取命令結果，返回是二進制，需要編碼一下res = stdout.read().decode('utf-8')# 獲取錯誤信息error = stderr.read().decode('utf-8')# 如果沒出錯if error.strip():# 返回錯誤信息return errorelse:# 返回結果return res復制代碼

現在你可以連接服務器測試一下，這個方法的正確性

ssh = SSHConnect(hostname='x.x.x.x', username='root', password='xxx')print(ssh.exec(r'df -h')) 復制代碼

我們連接到服務器并嘗試調用 linux 中的 df -h 命令查看我們系統文件系統的磁盤使用情況，不出意外的話，會看到控制臺返回的信息

ps：命令 df -h 前面的 r 是為了讓 python 解釋器不轉義

遞歸上傳文件

準備工作做好以后，我們就可以來是實現我們的遞歸上傳的方法 upload_file 了，主要是通過前面創建的 sftp 對象的 put 方法，將本地文件上傳到對應的服務器中

# 遞歸上傳文件 def upload_file(self, sftp, local_path, target_path):# 判斷當前路徑是否是文件夾if not os.path.isdir(local_path):# 如果是文件，獲取文件名file_name = os.path.basename(local_path)# 檢查服務器文件夾是否存在self.check_remote_dir(sftp, target_path)# 服務器創建文件target_file_path = os.path.join(target_path, file_name).replace('', '/')# 上傳到服務器sftp.put(local_path, target_file_path)else:# 查看當前文件夾下的子文件file_list = os.listdir(local_path)# 遍歷子文件for p in file_list:# 拼接當前文件路徑current_local_path = os.path.join(local_path, p).replace('', '/')# 拼接服務器文件路徑current_target_path = os.path.join(target_path, p).replace('', '/')# 如果已經是文件，服務器就不需要創建文件夾了if os.path.isfile(current_local_path):# 提取當前文件所在的文件夾current_target_path = os.path.split(current_target_path)[0]# 遞歸判斷self.upload_file(sftp, current_local_path, current_target_path) 復制代碼

上述方法中添加了一個 check_remote_dir 方法，用來檢測服務器端是否已經存在了文件夾，如果服務端沒有我們就創建一個，定義如下：

# 創建服務器文件夾 def check_remote_dir(self, sftp, target_path):try:# 判斷文件夾是否存在sftp.stat(target_path)except IOError:# 創建文件夾self.exec(r'mkdir -p %s ' % target_path) 復制代碼

非常巧妙的利用了 sftp.stat 方法查看文件信息來區分的。

合并流程，自動發布

現在基本的方法我們都已經實現了，接下來我們需要將它們合并到 auto_deploy 方法中，真正實現自動發布。

# 自動化打包部署 def auto_deploy(self, local_path, target_path):# 打包構建self.build(local_path)# 文件上傳self.upload(local_path, target_path) 復制代碼

ok~ 我們來調用 auto_deploy 方法測試一下：

if __name__ == '__main__':# 項目目錄project_path = r'D:learnvue-demo'# 服務器目錄remote_path = r'/www/project'# 實例化ssh = SSHConnect(hostname='x.x.x.x', username='root', password='xxx')# 自動打包部署ssh.auto_deploy(project_path, remote_path) 復制代碼

如果一切順利，就可以看到控制臺輸出成功！！

再看看服務器文件是否已上傳成功。

并嘗試訪問我的主頁！

非常完美！

Congratulations! 你已經 get 了這項技能，點個贊吧！

服務器清空

到這里的話，我們的功能已基本完成了，只是還有一個小小的問題遺留，如果我們不斷的迭代優化，那么如果我們不清除服務器的目錄的話，會堆積越來越多的舊的文件，占用服務器的空間，因此我們需要在打包上傳前清空一下。

不妨定義一個 clear_remote_dir 方法來實現這個功能

# 清空文件夾 def clear_remote_dir(self, target_path):if target_path[-1] == '/':cmd = f'rm -rf {target_path}*'else:cmd = f'rm -rf {target_path}/*'self.exec(cmd) 復制代碼

之后把它添加到 auto_delpoy 方法中 self.upload 之前就好了~

結語

勉強算是完成了一個小工具吧，這個過程對我來說也算是對 python 的一次小小的實踐吧，也算是頗有收獲了。

對于上述的代碼，完全還可以通過 sys.argv 通過命令行參數解析的方式來實現真正的 cmd 調用，筆者在這里就不贅述了，感興趣的小伙伴可以自己去實踐一下。

可以看到 python 在語法上的簡潔和優雅，這一點也是讓我感覺還是挺舒服的，對我個人來說，可能后面更多是作為一門工具語言來使用，最大程度的去解決實際問題。

總結

以上是生活随笔為你收集整理的vuecli打包后的dist目录无法访问_听说很多人都不会打包，教你Python实现前端自动化打包部署！...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。