在VSCode中使用docker開發react

-

在VSCode中使用Docker環境開發react

Development React App with docker in VSCode

嘗試使用過在VSCode在使用Docker環境開發Flutter後，就想到應該我現在所有的開發工作應該都可以docker化了吧! 就開始著手研究起了React部份。

起手使用了nodejs的docker環境，只是跑起來有權限不足的問題，果然轉套一個技術沒這麼簡單，中間琢磨了許久，後面將調整的結果與大家分享。

這裡一開始就放上以完成調整的VSCode開發環境

完成後github

https://github.com/Mirochiu/vscode-remotedev-react

裡頭包含
  • .devcontainer/Dockerfile
    這裡使用node v16作為開發react的docker環境。最近npm有的攻擊所以在build image時有warning，所以就順手加了npm升級到最新版。
  • .devcontainer/devcontainer.json
    VSCode要使用docker開發時的設定
  • .vscode/settings.json
    我只是設定一個不要VSCode跑git的warning才加的
  • .gitignore
    就是一個react常用的git略過檔案

devcontainer.json解說

  1. 前面提到權限的問題，一開始還以為是devcontainer.json必須用到的"runArgs": ["--privileged"]，實際上並沒有，flutter裡面寫這條指令，只是為了讓flutter可以存取usb裝置，但是react裡並不需要usb所以拿掉了。
  2. 而為了讓本機電腦的瀏覽器才能連線到docker內的react app，是需要port映射的，這部份我們是用devcontainer.json來設定，這樣要改port就不需要重建docker，只要重開VSCode就好了。
  3. settings部份如果你有順手的shell可以寫上，不然就套用預設的shell。
  4. extensions部份則是可以寫上你需要的VSCode的外掛套件，我這裡是使用參考資料的套件。

使用方法

  1. 安裝docker，並設定好可執行執行
  2. 安裝VSCode外掛Remote Development
  3. clone下這個github專案
  4. 開啟VSCode，按F1或者是Ctrl+Shift+P，輸入Remote-Containers: Open Folder in Container
  5. 第一次開時，VSCode會開始build docker image，如果進度卡住你可以點開看訊息提示
  6. VSCode提示是否要用Remote Container開啟，按下"Repoen in Container"
  7. 成功進入container shell，如果沒有自動進入shell，請按工具列上的Terminal -> new Terminal或是快捷鍵Ctrl+Shift+`

參考資料

  • Learn how to use Remote Development with VS Code and Docker
    https://morioh.com/p/366e2d54261d
  • VSCode Docs: Advanced Container Configuration
    https://code.visualstudio.com/docs/remote/containers-advanced

留言

張貼留言