ใช้งาน Visual Studio Code Dev Containers: เปิดโปรเจกต์ในสภาพแวดล้อมที่เตรียมไว้

• Dev Containers คืออะไร
• สิ่งที่ต้องเตรียม
• ตัวอย่าง: โปรเจกต์ Python พร้อม pytest
  • ความหมายของค่าหลัก
• เปลี่ยนคอนฟิกและสร้างใหม่
• ปัญหาที่พบบ่อย
• สรุป
• แหล่งอ้างอิง

#Dev Containers คืออะไร

Dev Containers เป็นส่วนขยายของ Visual Studio Code (VS Code) ที่ให้เราเปิดโฟลเดอร์โปรเจกต์และทำงานภายในคอนเทนเนอร์ โดยกำหนดอิมเมจ เครื่องมือ ส่วนขยายของ VS Code และคำสั่งเตรียมสภาพแวดล้อมในไฟล์ .devcontainer/devcontainer.json โค้ดยังอยู่ในโฟลเดอร์โปรเจกต์ แต่ terminal และเครื่องมือพัฒนาใช้สภาพแวดล้อมในคอนเทนเนอร์ จึงสะดวกเมื่อทีมต้องใช้ Python หรือไลบรารีชุดเดียวกัน [1][2]

Dev Container เน้น สภาพแวดล้อมเพื่อพัฒนา ส่วนอิมเมจสำหรับ นำแอปไปใช้งานจริง อาจออกแบบต่างกัน เช่น ตัดเครื่องมือทดสอบและส่วนขยายที่ไม่จำเป็นออก

#สิ่งที่ต้องเตรียม

1. ติดตั้ง Visual Studio Code และส่วนขยาย Dev Containers ของ Microsoft
2. ติดตั้งและเปิด Docker Desktop หรือ Docker Engine ที่ใช้งานได้บนเครื่อง
3. ตรวจสอบจาก terminal บนเครื่องด้วย docker version หากเชื่อมต่อ daemon ไม่ได้ ให้เปิด Docker ก่อน

บน Windows ควรตรวจว่ากำลังใช้งาน Linux containers และตั้งค่า WSL 2 ตามแนวทางของ Docker Desktop หากใช้โปรเจกต์ใน WSL ให้เปิดโฟลเดอร์จากสภาพแวดล้อม WSL [1][3]

#ตัวอย่าง: โปรเจกต์ Python พร้อม pytest

สร้างโฟลเดอร์ hello-devcontainer และจัดไฟล์ดังนี้

hello-devcontainer/
├── .devcontainer/
│   └── devcontainer.json
├── app.py
├── requirements.txt
└── test_app.py

ไฟล์ .devcontainer/devcontainer.json:

{
  "name": "Python Workshop",
  "image": "mcr.microsoft.com/devcontainers/python:3.12-bookworm",
  "postCreateCommand": "python -m pip install -r requirements.txt",
  "customizations": {
    "vscode": {
      "extensions": ["ms-python.python"]
    }
  },
  "forwardPorts": [8000]
}

ไฟล์ requirements.txt:

pytest

ไฟล์ app.py:

def greet(name: str) -> str:
    return f"สวัสดี {name}"


if __name__ == "__main__":
    print(greet("Dev Containers"))

ไฟล์ test_app.py:

from app import greet


def test_greet() -> None:
    assert greet("VS Code") == "สวัสดี VS Code"

เปิดโฟลเดอร์ hello-devcontainer ด้วย VS Code จากนั้นกด F1 (หรือเปิด Command Palette) แล้วเลือก Dev Containers: Reopen in Container การเปิดครั้งแรกอาจต้องดาวน์โหลดอิมเมจและติดตั้งแพ็กเกจ จึงใช้เวลามากกว่าครั้งถัดไป เมื่อหน้าต่างกลับมา ให้เปิด terminal ใหม่ภายใน VS Code แล้วรัน:

python --version
python app.py
python -m pytest -q

ผลที่คาดหวังคือ Python 3.12, ข้อความ สวัสดี Dev Containers และผลทดสอบผ่าน 1 รายการ หากต้องการลอง port forwarding ให้รัน python -m http.server 8000 ใน terminal แล้วเปิดพอร์ต 8000 จากแท็บ Ports ของ VS Code; หยุดเซิร์ฟเวอร์ด้วย Ctrl+C [1][2]

#ความหมายของค่าหลัก

คอนฟิกนี้ใช้ image แทน Dockerfile เพื่อให้เริ่มต้นง่าย ในงานทีมควรควบคุมเวอร์ชัน dependency เช่นใช้ lock file หรือระบุเวอร์ชันที่ตรวจสอบแล้ว และอัปเดตอิมเมจอย่างมีแผน [1][2]

#เปลี่ยนคอนฟิกและสร้างใหม่

เมื่อแก้ devcontainer.json หรือ Dockerfile ให้เรียก Dev Containers: Rebuild Container หรือ Dev Containers: Rebuild and Reopen in Container เพื่อให้คอนฟิกใหม่มีผล การ rebuild อาจทำให้ซอฟต์แวร์หรือไฟล์ที่ติดตั้งไว้เฉพาะในตัวคอนเทนเนอร์หายไป จึงควรเก็บขั้นตอนติดตั้งไว้ในคอนฟิกหรือ Dockerfile ส่วนโค้ดที่อยู่ในโฟลเดอร์โปรเจกต์ยังอยู่ [1]

ถ้าต้องใช้ฐานข้อมูลด้วย ให้ใช้ Docker Compose จัดบริการหลายตัว แล้วชี้ dockerComposeFile และ service ใน devcontainer.json โดย service คือบริการที่ VS Code จะเชื่อมต่อ ไม่ได้หมายความว่า Compose จะเริ่มเพียงบริการนั้น [1][4]

#ปัญหาที่พบบ่อย

อย่าใส่รหัสผ่านหรือ token ลงใน devcontainer.json ที่ commit ไปกับโปรเจกต์ และตรวจไฟล์คอนฟิกของโปรเจกต์ที่ไม่รู้แหล่งที่มาก่อนอนุญาตให้รันคำสั่งอัตโนมัติ

#สรุป

VS Code Dev Containers ทำให้โปรเจกต์ระบุสภาพแวดล้อมพัฒนาไว้เป็นไฟล์: เปิดโฟลเดอร์ → Reopen in Container → เขียนโค้ดและทดสอบด้วยเครื่องมือชุดที่กำหนด เมื่อต้องปรับเครื่องมือ ให้แก้คอนฟิกและ rebuild เหมาะทั้งกับเวิร์กช็อปในชั้นเรียนและงานทีมที่ต้องการขั้นตอนเริ่มต้นแบบเดียวกัน

#แหล่งอ้างอิง

1. Visual Studio Code: Create a Dev Container
2. Dev Container metadata reference
3. Docker: Install Docker Desktop on Windows
4. Development Containers: Using Images, Dockerfiles, and Docker Compose