# VScode Docker container連線教學

:::info
:bulb: 此教學為如何在VScode上建置Docker container的圖文解說，以Python環境做說明
:::

### :small_blue_diamond: 參考網址:
https://realnewbie.com/basic-concent/architecture/docker-beginner-guide-complete-concepts-and-tutorial-from-image-to-container/

https://medium.com/@pingstudio07/%E4%BD%BF%E7%94%A8-vs-code-%E9%80%A3%E6%8E%A5%E5%88%B0%E9%81%A0%E7%AB%AF%E4%BC%BA%E6%9C%8D%E5%99%A8%E4%B8%AD%E7%9A%84-docker-container-%E9%96%8B%E7%99%BC%E7%92%B0%E5%A2%83-e5fb9b98bae6

影片教學: https://www.youtube.com/watch?v=6jjYViLthi8
## :book:解說

:::success
可依照上方參考網址進行建置操作，此流程部分步驟也可以套用在命令提示字元(CMD)
:::

觀念解析:核心概念就是先建立 image，才能啟動 container !!!

而Dockerfile & Docker-Compose 這兩者檔案的關係。

* Dockerfile用於定義單一映像檔(image)的建置流程和配置。
* Docker Compose則用於管理多個容器的編排和配置。 Dockerfile專注於image的構建，而Docker-Compose則專注於容器(container)的編排和管理。兩者結合使用可以更方便地進行容器化應用的開發、測試和部署

### :small_blue_diamond: 步驟一:
請先下載vs code，下載完後到延伸模組裡尋找remote-ssh，找到後並安裝

### :small_blue_diamond: 步驟二:
進行AI主機連線，請按下Ctrl-Shift-P 輸入 remote ssh，找到 Remote-SSH: Add New SSH Host...來新增你要連線的主機IP
之後會要求你輸入「ssh 帳號@主機名稱或 IP」，好了後按下Enter，之後會再請你輸入一次密碼：

>*若覺得輸入密碼很麻煩的可以參考此網站 https://blog.csdn.net/qq_45956730/article/details/137601010 裡面介紹了Vscode ssh 如何免密碼進入的教學

第一次連線應該都會需要選擇系統，請選擇Linux，後續就會進入介面了，即可開啟Linux端資料夾，修改專案並在Linux執行，Terminal出現的也會是Linux的Bash

### :small_blue_diamond: 步驟三:

進入主機後按下紅框的模組，進入到Containers，可以看到先行建置的容器，若專案已存在Docker或docker-compose設定，可直接點擊VS Code左下角的按鈕，選擇「Reopen in Container」以在現有容器中打開專案。

若要自行新建容器的話，vscode 輸入 Ctrl + Shift + P，並輸入以下指令

>Dev Containers: Add Dev Container Configuration Files

接著選 > 來自預先定義的容器設定範本 (如果遇到已經就有devcontainer.json檔的話可以先略過)


(也可使用我另外撰寫的Dockerfile來建立環境，若有需要自訂其他系統或是環境也可以另外複製檔案並更改)
接著這邊有很多 image, 選一個你喜歡的, 這邊我們選 python3
接著會問你需不需要安裝其他的套件, 如果都不需要, 直接選 ok 就好

之後你會看到幫你建立了一個資料夾 .devcontainer/devcontainer.json, 並且做相關設定，如果遇到權限問題, 可以考慮加入 "remoteUser": "root" 這段。

image 這邊可以放自己喜歡的 image, 這邊我們就先用這個範例,customizations 這邊其實就是設定容器裡面的 vscode 要怎麼設定,包含 vscode 個人化, 以及安裝哪些 vscode 套件之類的.mounts 這部份是像 docker 中的 Volumes (可以掛路徑進去)詳細的設定可參考 [[Dev Container - json_reference](https://containers.dev/implementors/json_reference/)]。

啟動容器方式一樣在 vscode 輸入 Ctrl + Shift + P並打上指令:

>Dev Containers: Rebuild and Reopen in Container


接著就要等一下了, 因為它就是在做 docker pull 的事情, 所以如果是第一次都會比較慢.


建立好後可以按下左下角藍色小框，之後按下「連接正在執行的容器」

選擇剛剛我們建立好的容器 infallible_mendeeleev

基本上它會再開啟一個 vscode, 這個 vscode 是已經在容器裡面了.

分別下 docker ps 以及 docker images 查看


正在執行的容器就是我們建立了, images 則是剛剛設定的,你可以在這容器內做任何事情, 基本上它就是一個環境了,也可以進行 debug

而新 Container 就需要自行下載其餘你需要的額外模組了

要退出的話一樣按下左下角藍色小框關閉遠端連線

若需要辨識出來你是哪一個容器的話，可以打上指令 docker ps 查看目前的容器有哪些，找到需要更改名字的容器後輸入 docker rename [old_name][new_name]來更改名稱。

### :small_blue_diamond: 其餘說明:

若未來遇到需要多個 image 需要建置或是 service 必須在同一個虛擬 network 的狀況下，就是 Docker-Compose 出場的時候了~ 未來會再更新Docker-Compose如何建置