# **VScode遠端編輯步驟** [TOC] # 1.**VScode 介面** ### **初始介面簡介** 左側列表功能如下圖所示: ![](https://i.imgur.com/BJds1FU.png) --------------------------------- # 2.**監控 docker 與 container** 前置作業:請先安裝Docker、Visual Studio Code ### Step1 下載擴充模組中的`Docker`模組 ![](https://i.imgur.com/oDWgvRY.png =35x35) 點選左邊選單的(1)`Extension`(2)搜尋`Docker`模組並(3)安裝 ![](https://i.imgur.com/wyWy6Ef.png) ### Step2 重啟 VScode 重啟VScode後,即可在左側選單中看到`Docker`圖示![](https://i.imgur.com/cRFAj0b.png =25x25) 點選後即可看到目前`CONTAINERS`狀態與`IMAGES`數量等資訊 ![](https://i.imgur.com/0EypSb1.png) --------------------------------- # 3.**於遠端伺服器的container中編譯** ### Step1 下載擴充模組中的`Remote-Containers`與`Remote-SSH` ![](https://i.imgur.com/eI5Ogy9.png) 完成後請重啟vscode ### Step2 啟動container[於遠程伺服器中] 啟動容器,須注意將容器的`22`端口映射到host端的端口 (容器的`22`端口固定不可更動,host端口可自訂) ```javascript= docker run -p 'container-port':22 ``` ex:```docker run -p 55555:22``` ![](https://i.imgur.com/IrHxas0.png) ### Step3 設定密碼[於伺服器container中] 設置`root`帳戶的密碼 根據提示設計密碼即可,若啟動container時使用`-u`參數指定了一個非root用戶,應設定該帳戶的密碼(建議設定與DGX相同以利管理) ```javascript= passwd root ``` ex: ![](https://i.imgur.com/WPfQnI8.png) ### Step4 安裝ssh服務[於伺服器container中] 由於許多image不會自動安裝ssh,因此需在container中安裝ssh服務 ```javascript= apt update && apt install -y --no-install-recommends openssh-server ``` ### Step5 開啟root帳號登陸權限[於伺服器container中] 一般進入container時以`root`帳號進入,但ssh的預設是禁止`root`帳號使用密碼遠端連線的,因此需要修改`PermitRootLogin`為`yes`。 於路徑`/etc/ssh/sshd_config`以`vim`進行修改(若啟動容器時使用`-u`參數指定了一個非`root`帳戶,即可跳過此步驟) ```javascript= vim /etc/ssh/sshd_config ``` ex:![](https://i.imgur.com/2b2quyQ.png) ### Step6 啟動ssh服務[於伺服器container中] ```javascript= service ssh start ``` ex: ![](https://i.imgur.com/tmi49pt.png) ### Step7 於本機vscode中連線伺服器的container[於本機中] (1)啟動vscode,點選左下角後輸入要連線的遠端伺服器ip與container port ```javascript= root@your-server-ip:container-port ``` ex:```root@172.16.120.13:55555``` ![](https://i.imgur.com/mOrAjWx.png) (2)進入後輸入密碼 ![](https://i.imgur.com/GA2wxjY.png) (3)連線後即可於該頁面進行編輯。左下角可看到連線資訊,點擊左方工具列的`檔案`可設定`開啟資料夾` ![](https://i.imgur.com/1zBM9ZH.png) (4)連線後即可看到伺服器中container裡的檔案 ![](https://i.imgur.com/wQ9hHvC.png) ### :-1: 出現認證key問題 出現以下`WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!`錯誤時 ```javascript= @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! Someone could be eavesdropping on you right now (man-in-the-middle attack)! It is also possible that a host key has just been changed. The fingerprint for the RSA key sent by the remote host is 39:e5:ef:60:f1:ae:08:b9:46:36:7c:7d:61:e8:c9:41. Please contact your system administrator. Add correct host key in /home/ataliba/.ssh/known_hosts to get rid of this message. Offending RSA key in /home/ataliba/.ssh/known_hosts:17 RSA host key for host.host.com.br has changed and you have requested strict checking. Host key verification failed. ``` 可在本機執行以下命令重新生成key解決: ```javascript= ssh-keygen -R [your-server-ip]:port ``` ex:` ssh-keygen -R [172.16.120.13]:55555 ` --------------------------------- # 4.**ssh至伺服器編輯檔案** ### Step1 下載擴充模組中的`SSH FS`模組 ![](https://i.imgur.com/Ys6v7aI.png =35x35) 點選左邊選單的(1)`Extension`(2)搜尋`SSH FS`模組(3)安裝後重啟 ![](https://i.imgur.com/8u6KWDu.png) ### Step2 開起 User Setting File > Preferences > Settings(檔案 > 喜好設定 > 設定) or 使用快捷鍵 "Ctrl + ," ![](https://i.imgur.com/Sd7xUR4.png) ### Step3 搜尋sshfs並選擇Edit in settings.json 於搜尋列輸入`sshfs.configs`,選擇`Edit in settings.json`(在settings.json內編輯) ![](https://i.imgur.com/2fyqzs0.png) ### Step4 編輯遠端連線資訊 以DGX為範例,需輸入以下資訊 : ```javascript= "host": "172.16.120.13", //IP "port": 22, "username": "c95hsp", //帳號 "password": "icrd0000", //密碼 "name": "c95hsp" //暱稱 ``` 輸入完成後儲存("Ctrl + s") ![](https://i.imgur.com/ymPuy6H.png) ### Step5 開始連線 儲存後按鍵盤上的F1鍵,選擇 `SSH FS: Open setting and edit configurations` ![](https://i.imgur.com/eA4IYGz.png) 即可看到剛才建立的SSH遠端連線 ![](https://i.imgur.com/SeKFDxc.png) 對左側`SSH FIKE SYSTEMS`(紅色框線處)中建立的SSH遠端連線 c95hsb(紅色虛線處)點擊右鍵,選擇`Connect as Workspace configuration`即可成功連線 ![](https://i.imgur.com/mWIBqxL.png) 連線後即會出現以下畫面(顯示綠燈),同時在工作區看到伺服器的資料夾與檔案,即可開始遠程編輯 ![](https://i.imgur.com/tJQYC2Q.png) --------------------------------- - 延伸模組:已安裝 @installed -- Chinese (Traditional) Language Pack -- Docker -- Python -- Remote - Containers -- Remote - ssh -- SSH FS - 相關網址 --Visual Studio Code官網: https://code.visualstudio.com/ --Visual Studio Code快捷鍵大全: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf --使用 VSCODE 连接远程服务器上的容器 https://blog.csdn.net/u010099080/article/details/104801858 --vs code insiders for remote ssh by永承哥 https://hackmd.io/UCo4V2nfSXuqIamvhCVpqQ --ssh遠端連線docker中的container https://www.itread01.com/content/1547493514.html --------------------------------- ###### tags: `VScode` `ssh`