# What is DevContainer? Devcontainer，就是將開發環境打包成image，並run起來在裡面開發，故稱devContainer 怎麼使用？ 這邊介紹的是使用Vscode+Docker的用法 Podman的目前尚有問題，還需測試 1. 在extension下載remote Development，並且啟用 2. ![image](https://hackmd.io/_uploads/ByYOnh0_p.png) 3. 下載Docker desktop並啟用 ![image](https://hackmd.io/_uploads/S1oLtybKa.png) 4. 再次打開vscode，在搜尋欄輸入>add，選擇Add Dev Container Configuration File... ![image](https://hackmd.io/_uploads/B1S9Fk-FT.png) 5. 這邊可以選擇要開發的環境，像我目前是開發vue，所以我選擇node.js ![image](https://hackmd.io/_uploads/Bk7HckbKT.png) ![image](https://hackmd.io/_uploads/HkKI5JWtp.png) ![image](https://hackmd.io/_uploads/r1iR9JbKp.png) 這邊就可以選擇你要安裝的版本，當然，因為試運行在container裡，所以不用擔心會被安裝在電腦的本機 ![image](https://hackmd.io/_uploads/rJoQjJ-Y6.png) 這邊視自己的習慣去選擇要不要安裝。 6. 選擇好後它會自動幫你產一個Devcontainer.json 裡面大概長這樣主要是導入image，也可以用dockerfile代替（這邊我就沒研究了 ![image](https://hackmd.io/_uploads/BymDjJ-YT.png) 7. 點左下角的綠色><按鈕可以開啟連接container的選單 選擇reoopen in container ![image](https://hackmd.io/_uploads/S1zTjk-YT.png) 8. 點一下終端機，發現已經進入這個container，就可以用這個container進行開發 ![image](https://hackmd.io/_uploads/H1GEn1WtT.png) 9. 打開docker Desktop，可以發現這個container已經運行 ![image](https://hackmd.io/_uploads/HJSYh1bFT.png) 10. 開啟vue專案 ![image](https://hackmd.io/_uploads/HkxYpybYa.png) 總結， 雖然我知道寫dockerFile並包成image並運行也可以做到相同的效果，但是如果實際開發的話真的很麻煩，要先寫dockerfile，然後build再run ，而且如果dockerfile寫的不好（就是我， 往往第一次build的時候拉image就開始東錯西錯，要等很久去拉image還佔儲存空間。 而改成不使用容器化的方式去做，運行的話實在是太耗資源，(電腦風扇會狂轉。 所以改成使用container來開發的話，可以在同一台電腦運行好幾個不同版本的程式，要移除也很方便，這也是容器化的優點～ 參考URL: [https://ithelp.ithome.com.tw/articles/10277952 ](https://ithelp.ithome.com.tw/articles/10277952) [https://www.tpisoftware.com/tpu/articleDetails/2575](https://https://www.tpisoftware.com/tpu/articleDetails/2575)