透過 VSCode SFTP/SSH 自動同步 Server 程式碼


用 VSCode SFTP 自動同步程式碼

現在 Web 開發都習慣透過 Docker 建立環境,在電腦本機開發沒有太大的問題,但是一旦執行環境在遠端的 Server,就會變得很麻煩。無論無何,一定要建立程式存檔後可以馬上編譯執行的環境,如果改個 Code 還要上傳程式碼真的太浪費生命了。

今天就來介紹如何透過 SSH 即時同步本機的修改檔案到 Server 上,當然這些動作都是在開發環境中,正式的產品 (Production) 環境還是透過自動化的 CI/CD 來完成比較正規。

VSCode 安裝與設定 SFTP Extension

VSCode 應該是目前 Web 開發者最被廣泛使用的 IDE (完全海放 Eclipse Family),免費且強大 (不跟商業的 IDE 比的話算強大!!),且速度還算優異,所以今天選擇用 VSCode 來示範。

首先要先安裝由作者 liximomo (哩洗摸摸) 開發的 sftp 擴充套件,如下:

vscode-sftp

接著切換回你的專案,按下 F1 輸入 sftp 就可以「自動完成」顯示「SFTP: Config」,選取這個功能以後開始設定,如下:

vscode-sftp-config

設定檔如同慣例是一個位於專案資料夾 .vscode/sftp.json 的檔案 (如果全面改用 Yaml 那該有多好),設定檔內容修改後如下:

vscode-sftp-config-json

設定檔同步放上 GitHub sftp.json,需要可以直接下載使用。上述設定檔主要設定好你的 SFTP 位置與帳密,remotePath 可以改成 Server 上想要同步的路徑,可以先用 SFTP 登入確認 Chroot 功能有沒有被啟動,降低跑錯場的機率。

儲存以後就可以按下 F1 輸入「sync」選擇「SFTP: Sync Local -> Remote」來上傳程式碼到 Server 上囉,如下:

vscode-sftp-sync

選擇後會出現要同步的 Server Name,選用後就會在背景進行同步,當檔案有變動時,就會即時透過 SFTP 更新到 Server 上,這個過程是單向同步。使用這樣的開發流程,建議就不要上 Server  改 Code 了,不然衝突也很麻煩,畫面如下:

vscode-sftp-select-project VSCode SFTP

如果想要多組 Server 進行同步,只要把 sftp.json 改為 Array 即可,這裡就會出現多組同步資訊可以選擇。超簡單 SFTP 同步教學就到這裡,以後只要有 SSH 就可以在有網路的地方開心 (混怒) 寫扣了。小心不要遠端遙控系統爆炸囉!請謹慎使用啊~~

這是真的廣告

白金贊助

平價童鞋首選