小程故事

通常在製作 WordPress 網站時會建議你在本地端製作並編輯好後，再上傳到正式機上。這樣做的原因，除了速度比較快之外，也可以避免因為編輯錯誤而導致網站出錯無法運行。

如果你要在本機端製作網站，首要工作就是在自己的電腦建立網站運行的環境。關於如何在本機建立網站執行環境，可以參考我之前寫的相關文章：

• 使用 Local by Flywheel 進行 WordPress 本地端開發
• 透過 DesktopServer 快速建構本機端 WordPress 架站環境

但有時候就是比較懶惰一點，不想要那麼麻煩，或是這個網站還在開發中，就算出錯無法運行也沒關係，那麼直接改主機上的檔案也是一個選擇。通常我們會將檔案透過 FTP 從主機下載下來，修改好後再透過 FTP 上傳到主機，不過這樣子做還是稍嫌麻煩。

如果你平常習慣的編輯器是 VS Code，那麼就可以透過 VS Code 直接連線到遠端的主機來修改檔案(如果你是高手都直接 SSH 到主機用 vi/vim 修改程式就略過此文吧！)，你可以維持平常在電腦上使用 VS Code 的編輯體驗，又可以省去 FTP 下載上傳的動作，修改網站的速度瞬間大幅提升！以下就跟大家說明要怎麼使用 VS Code 來直接修改遠端的網站檔案。

前置作業與需求

1.你的電腦必須要有 VS Code (這不是廢話嗎？)
2.遠端的主機必須支援 SSH 連線：這邊以 Cloudways 主機當範例。

安裝 Remote Development 套件包

這個套件包會包含三個套件：

• Remote – SSH ：本文的主角，讓你可以透過 SSH 連線到遠端機器
• Remote – Containers：讓你可以連線到 Container
• Remote – WSL ：讓你可以連線到 Windows 上的 Linux 環境

如果你選擇安裝 Remote Development 套件包，上述這三個套件會同時安裝，你也可以選擇單獨安裝某一個套件。安裝的方式很簡單，在 Code 開啟套件視窗，搜尋 remote development，就可以找到此套件。

安裝好後，在你的編輯器左下方，會有一個新的 icon (下圖紅色框框標示)，顯示連線狀態(下圖顯示的狀態為本機環境)。

遠端連線狀態會顯示你目前連線的環境是本機還是遠端，點擊會開啟 Remote SSH 命令視窗。你也可以透過 Command Palette (Command+Shift+P 或是 Function+F1 on Mac)來快速開啟 Remote SSH 命令視窗。

選擇 Remote-SSH: Connect to Host 來進行連線，並輸入主機的連線資料，格式為 user@host。這邊以 Clooudways 為例，你可以在你的 Cloudways 找到主機的 Master Credentials，user 就是下圖中的 Username，而 host 則是下圖中的 Public IP。

在連線資訊中輸入主機的連線資料，輸入完畢後按下 Enter，即會嘗試連線到你的遠端主機。

如果你是透過帳號密碼的方式登入，會出現密碼輸入的提示視窗，要求你輸入密碼。輸入密碼後按下 Enter，來完成連線。

當透過 Remote SSH 來連線到遠端主機，VS Code 會開啟一個新的視窗。連線成功後，在左下方的連線狀態，就會顯示你連線的 hostname。

成功連線到主機後，預設是不會開啟任何資料夾的，你可以在 Explorer 視窗來開啟資料夾。

點擊 Open Folder 會開啟資料夾瀏覽視窗，你可以點擊要開啟的資料夾，選擇完成後，按下 OK，即會嘗試開啟遠端的資料夾內容。如果你是透過帳號密碼的方式連線，這邊可能會再次要求你輸入密碼來完成連線。

連線成功後，即會顯示遠端的資料夾和檔案內容了，你就可以開始編輯網站的檔案囉！

在遠端開發的狀態下，你也可以直接在 Terminal 執行一些指令，例如查看主機的資源使用狀況。

在開啟命令列的狀態下輸入 top 來顯示主機資源使用狀況，是不是很方便呢？

以上說明介紹了如何透過 VS Code 來編輯遠端主機檔案。如果你希望省去每次連線都要輸入帳號密碼的麻煩，你也可以透過 SSH Key 的方式來進行連線。

使用 SSH Key 來進行連線

在 Cloudways 的 Master Credentials 中，你可以設定你的 SSH Publick Keys。如果你還沒有SSH Public Key，你可以參考這篇文章。

新增一個 SSH Keys。輸入一個方便辨識的標籤，並在 SSH Key 的內容輸入你的 SSH Public Key，並按下 Submit 來儲存內容。之後連線時就不用重複輸入密碼囉！

如果你連線的主機是經常連線的主機，每次要輸入連線資訊也是很麻煩的一件事。這時候你可以考慮將連線資訊儲存起來，這樣就不用每次都要手動輸入了。

儲存 SSH Host 資料

在原本輸入連線資料的視窗，點擊 Add New SSH Host，來輸入連線資訊。

輸入 SSH 連線指令。

選擇你要儲存到哪一個 SSH Config

之後開啟 SSH 連線視窗時，就會出現先前儲存的 hostname，點擊後就可以直接連線了。

使用心得

使用 VS Code Remote Development 讓你可以直接在遠端的機器上開發，省去建置本機端的開發環境，這在開發環境建置不易的狀況下會很有幫助。個人覺得有一些情境還蠻適合使用的：

1. 自己的網站或部落格：反正掛了也沒關係，再趕快改好就好了。
2. 公司新同事onboarding，避免因為光建置環境就花去新同事一堆時間，讓他心生挫折。直接做一個現有的開發環境給他，讓他透過 VS Code 連線到遠端的開發環境，快速開始進行開發或是學習的工作。
3. 實體架站或是程式設計課程：若對象是新手，或是開發環境比較難建置，可以考慮直接將開發環境建置好，然後複製好幾份，學生只要安裝好 VS Code，就可以連線到遠端的環境進行程式的修改或是開發，大大省去前期環境架設的時間。而且通常上課的學生電腦環境不一，有些人是 Mac 或 Linux，有些人用 Windows，有時光要把環境架設起來就花掉一堆時間了。這時候如果有一個統一的遠端環境相信會方便許多。
4. 程式的執行環境比較特殊一點，例如國外有人透過 VS Code 遠端連線到 Raspberry Pi 來編寫程式。

相關參考資料

• VS Code Remote Development
• Remote Development FAQ