vscode 連線遠端電腦中的 Docker

閱讀時間約 1 分鐘

歡迎各位贊助喔 👍👍👍


簡介

今天來教大家如何讓 vscode 連上遠端電腦中的 docker 環境之中,遠端電腦和本地端電腦各需要先安裝一些東西: (本地端不需安裝 docker)

遠端電腦: docker

本地端電腦: vscode

安裝 vscode 可以先參考以下這篇:

Vscode --- 初探篇



安裝必要的 vscode extension

按 "View" -> "Extensions",然後在搜尋欄輸入 "dev","Dev Containers" 就是我們需要安裝的 extension,如下圖

要注意的是,如果大家還沒安裝過這個 extension 的話,下圖紅框中的齒輪會是一個寫著 "install" 的藍色按鈕,點下它就會進行安裝了,等進度條跑完就安裝好了 🎉🎉🎉

raw-image


連線到遠端電腦

必須要先讓 vscode 連到遠端電腦,可先參考這篇:

Vscode + SSH --- 直接編輯遠端電腦內的檔案



連線到遠端電腦中的 Docker

先點擊左下的藍色按紐,如下圖紅框,就會出現一個小視窗,如下圖,接著點 "Attach to Running Container"

raw-image

點擊 "Attach to Running Container" 之後,就會顯示目前遠端電腦中正在運行的 Docker 容器清單,如下圖紅框,點擊你想要進入的 docker 容器吧

raw-image

接著 vscode 會叫你輸入遠端電腦的密碼,輸入後就會連上了,只是要注意的是如果你是第一次連線的話,會花較多的時間。

連上後左下角會顯示你連到的容器名稱,如下圖紅框

raw-image

如果有問題歡迎發問唷 😁😁😁





每個房間都是一個有趣的主題喔
留言0
查看全部
發表第一個留言支持創作者!
切換終端機、更改預設的終端機,詳細且附圖
教大家如何把多個檔案顯示在多個 vscode 的視窗
教大家怎麼更改/設定快捷鍵
用 Vscode 直接連到遠端電腦進行編輯、編譯、執行遠端電腦的程式檔,完整教學
更改 vscode 程式碼顏色的詳細教學
切換終端機、更改預設的終端機,詳細且附圖
教大家如何把多個檔案顯示在多個 vscode 的視窗
教大家怎麼更改/設定快捷鍵
用 Vscode 直接連到遠端電腦進行編輯、編譯、執行遠端電腦的程式檔,完整教學
更改 vscode 程式碼顏色的詳細教學
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
1. 安裝VS Code 1-1. Ctrl-K-T 換主題顏色 1-2. 加上基本插件(外掛) A. python擴展插件 關鍵字高亮, 智慧指令提示 Python解釋器切換 B. 使用中文插件 C. 使用Code runner才有三角形執行鈕
👨‍💻Intro 為了實現vscode在wsl環境下使用ssh連接到gce的需求,在爬文後找到一篇解法,因此記錄下來,方便日後查詢 🎯setup 建立ssh.bat檔案,並放在windows下任意位置 2. vscode設定ssh.bat路徑 打開vscode的settings -> exte
Thumbnail
不知道為什麼,原本相安無事的兩個人,突然間看對了眼,開始出雙入對、形影不離。這除了讓人看了很不順眼之外,也很浪費時間。雖然想盡辦法要拆散他們,但都沒成功。逼不得已,只好狠下心來,冒險將一切抹除,讓他們走完「成、住、壞、空」最後的階段,輪迴至下一輪的「成、住、壞、空」。只是沒想到
Thumbnail
探索如何在 VS Code 中養一隻療癒的小寵物。本文將指導你安裝和使用 vscode-pets 擴充功能,讓可愛的寵物陪伴你一同寫程式。你可以選擇不同類型和顏色的寵物,甚至改變它們的遊玩場景,為你的編程時光增添樂趣和舒適。
Thumbnail
本篇目標:ftp-simple 連接與使用 本篇適合:需要使用Visual Studio Code 連接伺服器進行程式寫作的朋友 過去因為在實驗室的經驗,所有的程式皆存放在實驗室的伺服器上,因此我們會需要用本機的電腦嘗試連接到伺服器進行寫作。
Thumbnail
Marp是利用Markdown語法編寫簡報的功能,可以簡單的作出俐落的簡報(但沒有什麼花俏的轉場,動畫之類的),不過可以僅用編輯器就生出來,同時可以使用Markdown語法給予簡報內容整齊又美觀的排版。
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
1. 安裝VS Code 1-1. Ctrl-K-T 換主題顏色 1-2. 加上基本插件(外掛) A. python擴展插件 關鍵字高亮, 智慧指令提示 Python解釋器切換 B. 使用中文插件 C. 使用Code runner才有三角形執行鈕
👨‍💻Intro 為了實現vscode在wsl環境下使用ssh連接到gce的需求,在爬文後找到一篇解法,因此記錄下來,方便日後查詢 🎯setup 建立ssh.bat檔案,並放在windows下任意位置 2. vscode設定ssh.bat路徑 打開vscode的settings -> exte
Thumbnail
不知道為什麼,原本相安無事的兩個人,突然間看對了眼,開始出雙入對、形影不離。這除了讓人看了很不順眼之外,也很浪費時間。雖然想盡辦法要拆散他們,但都沒成功。逼不得已,只好狠下心來,冒險將一切抹除,讓他們走完「成、住、壞、空」最後的階段,輪迴至下一輪的「成、住、壞、空」。只是沒想到
Thumbnail
探索如何在 VS Code 中養一隻療癒的小寵物。本文將指導你安裝和使用 vscode-pets 擴充功能,讓可愛的寵物陪伴你一同寫程式。你可以選擇不同類型和顏色的寵物,甚至改變它們的遊玩場景,為你的編程時光增添樂趣和舒適。
Thumbnail
本篇目標:ftp-simple 連接與使用 本篇適合:需要使用Visual Studio Code 連接伺服器進行程式寫作的朋友 過去因為在實驗室的經驗,所有的程式皆存放在實驗室的伺服器上,因此我們會需要用本機的電腦嘗試連接到伺服器進行寫作。
Thumbnail
Marp是利用Markdown語法編寫簡報的功能,可以簡單的作出俐落的簡報(但沒有什麼花俏的轉場,動畫之類的),不過可以僅用編輯器就生出來,同時可以使用Markdown語法給予簡報內容整齊又美觀的排版。