➣ Reading Time: 9 minutes

前言

有時候我們進行開發會在遠端的 container 進行程式的修改，
但如果純靠 vim 在 terminal 中使用，
有時候不習慣 vim 的使用者，也許開發效率就會大打折扣。

這邊提供的是可以透過 VScode，透過建立 ssh tunnel 的方式，
將遠端的 Docker container 拉到本地端進行編輯。

主要兩大步驟概略說明

要完成利用 VScode 透過 ssh tunnel，
直接連線到遠端 Docker 的 container 中進行開發。

主要有兩大步驟，

  • (step 1) Host terminal 建立遠端 ssh tunnel 連線：建立連線
  • (step 2) VScode 設定的部分：存取資料夾顯示用的介面

(step 1) Host terminal 建立遠端 ssh tunnel 連線

建立一個 ssh tunnel，使我們可以在 local 直接存取遠端 container 內的資料

ssh -nNTL localhost:23750:/var/run/docker.sock ubuntu@192.168.2.XXX

username, ip 請自行修改

  • 示意圖：

輸入完密碼後，「應該會像是卡住一樣，這才是正常的」，
表示現在這個 terminal 已經與遠端建立了連結，
到工作結束前「請勿關閉這個 terminal」，(等於關閉連結)
並繼續執行以下修改 VScode 設定檔的動作。

指令說明

我們透過本地的 localhost:23750 建立 ssh 連線至遠端的 docker daemon (docker.sock)

docker daemon，是一個 service，用來管理 docker image、啟動與停止 container 的 service

建立 ssh tunnel (Local Port Forwarding)

ssh -L [LOCAL_IP:]LOCAL_PORT:DESTINATION:DESTINATION_PORT [USER@]SSH_SERVER

翻譯成上述的指令就是：

  • [LOCAL_IP:]LOCAL_PORT: localhost:23750
  • DESTINATION:DESTINATION_PORT: /var/run/docker.sock
  • [USER@]SSH_SERVER: 很好理解，就是遠端的服務

於是我們就可以把 local 的 23750 port 連接上遠端的 docker daemon service
之後再去 VScode 修改監聽的 “docker.host” 位置，
即可達到在 VScode 直接修改遠端 container 的內容。

這邊分析有點不太確定，有錯請再麻煩通知我更正。

  • 上面說明圖示如下：

更詳細的說明

想更了解這個指令在幹嘛的，這邊推薦一個網站：https://explainshell.com/

個人認為是學習 linux 指令的神器，相關的說明都非常清楚，
只要把指令貼上去給他解析，他就會有詳細說明了。

而且網頁也是可以互動的，是個人學習 linux 指令的神器。

  • 如下圖：

(step 2) VScode 設定的部分

基本的 docker 擴充功能必須先安裝好，
而且 local 也需要具備有 docker 的功能，

如果不知道如何在 windows 中啟用 docker 功能可以參考這篇：

【Docker】在 windows 上使用安裝並使用 Docker (全圖文說明)

step 2.1 打開「設定」，我們準備進行修改

我們打開並修改設定「settings.json」，
點選「檔案」->「喜好設定」中的「設定」。

step 2.2 在上方搜尋「settings.json」(不用全輸入)，打開「settings.json」，我們準備進行修改

step 2.3 在「settings.json」中加入遠端 container port 的設定

在「settings.json」中加入這行

"docker.host": "tcp://localhost:23750"
  • 示意圖：

只需要確保有加入紅框那行即可，
其他行代表的是其他設定，可以不用管。

完成結果

我們可以在 local 自己的 VScode，
可以透過「Docker extension」直接看到遠端 container 內的資料。

(注意：不需要再另外經由 VScode 的 ssh 至遠端)

  • 會顯示遠端的 container

Reference

⭐Linux 指令 相關文章整理⭐：
⭐終端機 (terminal) 常用 總整理⭐：
1.(terminal指令 常用總整理)【Linux】linux/ubuntu/mac 基礎終端機 (terminal) 指令 & 基礎知識總整理，初學者/新手 必須知道的基礎指令 & 基礎知識大全（持續更新）
2.(terminal快速鍵 常用總整理)【Linux】linux/ubuntu/mac 基礎終端機 (terminal) 快速鍵/小技巧，初學者/新手 必須知道的一些實用功能！（持續更新）
3.(vim指令 常用總整理)【Linux】linux/ubuntu/mac vim 的 新手/初學者 的基礎使用指令 與 個人常用功能總整理 (持續更新)
4.【MobaXterm】在 Windows 中使用 MobaXterm VPN 連線至遠端系統 (linux, ubuntu) 遠端 ssh 顯示畫面
⭐Linux 基礎指令篇⭐：
1.【Linux】(作業系統基礎知識) 簡單理解「相對路徑」與「絕對路徑」，程式設計 初學者/新手 必須知道的路徑知識總整理
2.【Linux】linux ubuntu 中利用 mkdir 建立資料夾 相關參數總整理 (必定建立資料夾、修改資料夾權限 777)
3.【Linux】linux ubuntu 使用 terminal (終端機) 關機 shutdown、重新開機 reboot 的方法
⭐Linux 網路相關指令篇⭐：
1.【Linux】利用 ifconfig 查詢 ip 並用 scp 傳送資料 – linux, ubuntu 基礎終端機指令學習 sample code (內含範例程式碼)
2.【Linux】使用 sshfs 連線 將遠方磁碟當作像是在自己電腦的硬碟 mount disk on other computer
3.【Linux】使用 curl 將網路上的檔案 透過終端機 terminal 的方式下載 download
⭐Linux 進階指令篇 (檔案處理相關)⭐：
1.【Linux】linux, ubuntu 壓縮檔案常用指令 tar gzip zip 7z 壓縮檔案切割、壓縮檔案加密 與 解壓縮套件安裝方法 (內附圖文說明)
2.【Linux】Linux 查詢資料夾內的檔案數目 ls -1 | wc -l
3.【Linux】linux ubuntu 中利用 tail -f 可以查看 log 並不斷更新
4.【Linux】在終端機 terminal 使用 ln -s 建立如 windows, mac, ubuntu 檔案系統上的捷徑 – 軟連結 (Symbolic Link)
5.【Linux】linux, ubuntu 使用 split 指令檔案切割、檔案合併
6.【Linux】Linux 運用 sed 進行檔案內容的取代 instead 用法
7.【Linux】mac/ubuntu 如何利用 terminal 打開 GUI 資料夾總整理
⭐Linux 進階指令篇 (搜尋相關)⭐：
1.【Linux】linux, ubuntu 使用 ps, grep, pgrep 找到程式碼的 相關資訊 與 pid (ps aux, ps -ef)
2.【Linux】linux ubuntu 使用 grep, awk, xargs 尋找需要的資料，快速濾出/篩選 結果欄位 所需要的資訊 (內附圖文說明) filter column
⭐Linux 特殊應用篇⭐：
1.【Linux】Linux 增加 swap 的虛擬記憶體空間
2.【Linux】在 Ubuntu (Linux 系統) 上透過 / etc/fstab 安裝新的硬碟、新增硬碟容量 (SSD, HDD) (內附圖文說明)
3.【Linux】linux / ubuntu 複製硬碟的方法 copy all disk
4.【Linux】(內附圖文說明) ubuntu 停止自動更新的方法 disable auto update
5.【Linux】linux/ubuntu 下執行 anaconda-navigator 的方法
⭐Bash 自動化程式撰寫⭐：
1.【Bash】echo，bash 的 hello world 基本教學，開始自動化程式的第一堂課 / 撰寫腳本，利用 echo 顯示變數
⭐【喜歡我的文章嗎? 歡迎幫我按讚~ 讓基金會請創作者喝一杯咖啡! 】
如果喜歡我的文章，請幫我在下方【按五下Like】 (Google, Facebook 免註冊)，會由 「LikeCoin」 贊助作者鼓勵繼續創作，讀者們「只需幫忙按讚，完全不用出錢」哦!

likecoin-steps
Post Views: 60