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
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
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
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
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語法給予簡報內容整齊又美觀的排版。