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

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





留言
avatar-img
愛看電視的小上進的沙龍
8會員
50內容數
每個房間都是一個有趣的主題喔
2023/12/07
切換終端機、更改預設的終端機,詳細且附圖
Thumbnail
2023/12/07
切換終端機、更改預設的終端機,詳細且附圖
Thumbnail
2023/12/06
教大家如何把多個檔案顯示在多個 vscode 的視窗
Thumbnail
2023/12/06
教大家如何把多個檔案顯示在多個 vscode 的視窗
Thumbnail
2023/12/06
教大家怎麼更改/設定快捷鍵
Thumbnail
2023/12/06
教大家怎麼更改/設定快捷鍵
Thumbnail
看更多
你可能也想看
Thumbnail
最近 vocus 開放了一個新福利:考績優異的同事,可以申請遠端工作,公司還直接送一張機票。消息一出,全公司瞬間進入「旅遊準備模式🏖️」: 有人半夜在比價住宿,打開十幾個分頁算平均一晚到底要不要超過 2,000; 有人打開影片看「__城市一日生活費實測」; 也有人開始打開試算表,冷靜的敲著計
Thumbnail
最近 vocus 開放了一個新福利:考績優異的同事,可以申請遠端工作,公司還直接送一張機票。消息一出,全公司瞬間進入「旅遊準備模式🏖️」: 有人半夜在比價住宿,打開十幾個分頁算平均一晚到底要不要超過 2,000; 有人打開影片看「__城市一日生活費實測」; 也有人開始打開試算表,冷靜的敲著計
Thumbnail
前言 上次我們講到 Docker 的功用與好處,今天我們要在講解,如何安裝 Docker 這個容器,讓我們在之後的教學應用更好的實作與練習,現在讓我們開始吧 Docker Engine 與 Docker Desktop 首先在講解怎麼安裝 Docker 時,我們先講解 Docker Engin
Thumbnail
前言 上次我們講到 Docker 的功用與好處,今天我們要在講解,如何安裝 Docker 這個容器,讓我們在之後的教學應用更好的實作與練習,現在讓我們開始吧 Docker Engine 與 Docker Desktop 首先在講解怎麼安裝 Docker 時,我們先講解 Docker Engin
Thumbnail
教大家讓 vscode 連上遠端電腦中的 docker 環境之中,步驟詳細且附圖
Thumbnail
教大家讓 vscode 連上遠端電腦中的 docker 環境之中,步驟詳細且附圖
Thumbnail
切換終端機、更改預設的終端機,詳細且附圖
Thumbnail
切換終端機、更改預設的終端機,詳細且附圖
Thumbnail
用 Vscode 直接連到遠端電腦進行編輯、編譯、執行遠端電腦的程式檔,完整教學
Thumbnail
用 Vscode 直接連到遠端電腦進行編輯、編譯、執行遠端電腦的程式檔,完整教學
Thumbnail
建置 vscode + python 開發環境的完整流程,詳細且附圖
Thumbnail
建置 vscode + python 開發環境的完整流程,詳細且附圖
Thumbnail
使用 Vscode 連線至 WSL 的詳細教學
Thumbnail
使用 Vscode 連線至 WSL 的詳細教學
Thumbnail
本篇大綱:本篇要解決的問題。用 Docker 安裝 Verdaccio。上傳 package。使用 package。刪除 package。修改 config.yml。改變 CSS。
Thumbnail
本篇大綱:本篇要解決的問題。用 Docker 安裝 Verdaccio。上傳 package。使用 package。刪除 package。修改 config.yml。改變 CSS。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News