[工具] 使用 VSCode Remote 與 Docker Extension 進行開發

Toki Lee
6 min readFeb 2, 2021

--

早在微軟發佈了 Remote Development 的套件後,這個套件就已是我無法割捨的套件之一,對我來說,這可不只是建議安裝,而是絕對絕對一定要安裝的套件!而最近工作上將會配合上 Container 的環境進行開發,有些同事正好也尚未體驗過 VSCode Remote Development 的便利,說真的實在太可惜了,只好寫篇筆記記錄下,當然傳教也是一定要的!

Remote Development

Remote Development 中包含了所有 Remote 的套件,有了這些套件後就能夠 SSH 到遠端主機進行開發、或進入 Docker Container 內部進行開發、又或是進入 Windows 的 Linux 子系統內進行開發:

Remote Development 包含了每個可以使用到的 Remote ,很建議都安裝起來

首先介面上可以看到左側邊有個電腦圖像的 Icon, 點開後就會看到下方這個介面,而右上方的下拉選單則可以選擇是要使用 Containers、WSL、或是 SSH 進行 Remote。

在右上方可以選擇 Remote 的模式

使用 Remote - WSL

若使用 Windows 時,主機上有安裝好 Linux 的子系統如:

那麼選單選擇 WSL Targets 時自然就會看到可連到的子系統:

跳出來 VSCode 視窗後,就代表已經成功進入 WSL 內了,那麼在 VSCode 上就能直接開始進行開發了。

使用 Remote - Containers

Remote - Container 的部分也很類似,選到 Containers 後,可以看到目前主機上所有的 Container ,選擇 Attach to Container 就能夠直接開啟一個新的 VSCode 視窗進到 Container 裡面進行開發:

使用 Remote - SSH

以我個人來說 SSH 是最常使用到的功能,除了平常要遠端到另一台主機外,我自己也會在多個虛擬機中進行開發。那麼首先可以先設定好 .ssh/config ,可能像是這樣的內容:

Host workspace1
User user1
IdentityFile ~/.ssh/id_rsa_user1
Port 22
HostName xxx.xxx.xxx.xxx
Host workspace2
User user2
IdentityFile ~/.ssh/id_rsa_user2
Port 1022
HostName xxx.xxx.xxx.xxx
Host workspace3
User user3
IdentityFile ~/.ssh/id_rsa_user3
Port 2022
HostName xxx.xxx.xxx.xxx

上方主要就是遠端主機上的使用者名稱、埠號、和金鑰的設定,而設定完後在 SSH Targets 的選項下,就會看到設定好的 Host 可以選擇:

Port Forward

在使用 VSCode Remote Development 時,若跑了一些 service,通常會自動幫你做好 Port Forward,這樣就能直接通過 localhost 連到:

當然你也能自己添加,並且自行定義所要綁定的 Port,只要對已產生的 Port Forward 按下右鍵選擇 Change Local Port 即可:

講到這邊你可能還會有個問題:

如果是想要 Remote 到遠端主機中的 Container 內呢?

這個問題很簡單,其實單純就是 Remote 到 SSH 的主機後,在跳出的 VSCode 視窗下繼續 Remote 到 Container 中:

其實就是順著按下去就對了,不怎麼困難

只是在這個過程,可能會在第二段開啟 Container 時等待比較久的時間,不過等到視窗開啟完後,我在開發並沒感到不順。

Docker Extension

雖然在上面的 Remote - Containers 的部分已經很足夠了,但是也建議可以安裝個 Docker 的套件交互使用看看:

微軟官方的 Docker Extension

安裝完後可以看到以下的介面

在 Containers View 的部分與 Remote - Containers 類似,也是會顯示主機上所有的 Container ,不過這邊多了個 Attach Shell 的功能,可以直接在 VSCode 的 Terminal 下開啟 Container 的 bash,這點其實還蠻實用的:

而其他的功能對我來說就比較像展示用的,如 IMAGES 雖然可以列出所有主機上的 docker image 也能用介面執行 docker run 的指令,但通常這些還是藉由 Cli 來操作比較完整。

結論來說,真的是相當相當方便的工具,雖然在工作上見過一群能夠使用 Vim 開發的鬼畜大神們,但我認為不管使用哪種工具,只要是自己能夠上手、能夠加速開發並且提升品質的工具,那麼都是值得去學習的。

--

--

Toki Lee

沒有技術上不可行,只是時間上做不到⋯