มา Developing inside a Container ด้วย Remote Containers กัน! Python Flask

ให้ Docker ช่วยจัดการ enviorment ต่างๆให้กัน!

ดียังไง?

ปกติเวลาเราพัฒนาอะไรก็ตามด้วย python แล้วคงหนีไม่พ้นการหยิบแพ็คเกจมาใช้ด้วย pip ใช้ไหม แต่ถ้าทำงานหลายโปรเจคเราที่ใช้แพ็คเกจต่างเวอร์ชั่นกันละ แน่นอนว่ามีปัญหาครับ โดยปกติแล้วก็สามารถแก้ไขได้ด้วย Virtual Enviorment ซึ่งก็ยังมีปัญหาตามมาเช่น เข้าใจยาก เกิดอาการพังแบบในรูป(ต้องลบลงใหม่) ซึ่งปัญหาพวกนี้ก็สามารถแก้ได้ด้วยการที่ให้ Docker จัดการ enviorment ให้ซึ่งเราจะเข้าไปแก้ไขพัฒนาใน container นั้นๆได้จะต้องใช้ vscode extension ที่ชื่อว่า Remote Containers นั้นเองโดยการสร้าง config ไฟล์แนวๆ docker ขึ้นมาจัดการ enviorment ให้เราแทน

ซึ่ง 1 project ก็จะกลายเป็น 1 container ไปเลย (ใช้คู่กับ wsl ได้ด้วยนะ)

enviorment พัง

โดยเราจะใช้ Extension ตัวนึงที่ชื่อว่า Remote Containers ในการเข้าไปพัฒนางานใน conatiner นั้น แถมยังเอา vscode-extension เข้าไปได้ด้วย เพราะถ้าไม่มีพวก intellisense หรือตัวเสริมที่ใช้ประจำคงแย่เลย

Remote-Containers extension

ซึ่งเมื่อติดตั้งเสร็จซ้ายล้างจะมีสัญลักษณ์แบบนี้นะครับ
(ใครที่ลง vscode-extension เกี่ยวกับ Remote ตัวใดตัวหนึ่งก็คงจะมีอยู่แล้ว)

ใช้ยังไงมาดูกันครับ

ก่อนอื่นผมได้สร้าง flask web ง่ายๆเอาไว้เรียบร้อยแล้ว
ใน requirement มีแค่ flask

จากนั้นกดที่ปุ่ม Remote Extension ด้านซ้ายล่างได้

เลือก “Add Development Container Configuration Files…” เพื่อสร้างไฟล์ config แบบง่ายๆครับ ประมาณว่ามี template ให้มาอยู่แล้วไม่ต้องเริ่มตั้งแต่ 0

แล้วก็เลือก image ครับในที่นี้ผมเลือก python3 (เวอร์ชั่น 3.9) ขึ้นกับโปรเจคได้เลยครับ

เราก็จะได้ไฟล์ .devcontainer มาซึ่งข้างในจะมี devcontainer.json และ Dockerfile แล้วมันคืออะไรบ้าง?

Dockerfile เหมือนเป็นตัวไว้ build image นั้นแหละครับ แต่ devcontainer.json จะเหมือนตัวจัดการ enviorment ให้เราใน container อีกทีเช่น ติดตั้ง requirement, vscode-extension โดยมี Dockerfile เป็น base (จะเขียนเป็นตัว dockerfile ใน devcontainer เองก็ได้แต่ผมว่าอย่าเลยดึงจาก Dockerfile ในโปรเจคที่มีดีกว่า)

name คือชื่อ container นี้ที่จะให้ Remote เชื่อมต่อ
settings พวกค่า default พวก path ต่างๆในที่นี้คือให้เราสามารถใช้ pylint กับ formatter ต่างๆได้
extensions ก็จะเป็นส่วนที่เราสามารถเลือกว่าจะเอา vscode-extensions อะไรมาใช้ใน container นี้ได้บ้าง

เราสามารถไปที่ extension tab แล้วกดเพิ่มตามรูปได้นะครับหากต้องการจะเพิ่ม

postCreateCommand คือจะรัน command ตอนสร้าง container ซึ่งเราก็จะให้มันทำการ ติดตั้ง requirements นั้นเอง
ให้เอา comment ออกแล้ว Rebuild container รอบหนึ่งครับ

devcontainer.json ิbottom

เมื่อเสร็จแล้วกดปุ่มซ้ายล่าเหมือนเดิมแต่ให้เลือกเป็น “Reopen in Container”

รอโหลดแปปนึง ซ้ายล่างก็จะกลายเป็นประมาณนี้ หมายความว่าเราอยู่ใน container แล้ว!

ลองทดสอบ pip freeze โอเค flask มาแล้วจากนั้นลอง
python app.py หรือ flask run ก็จะเปิดเว็บได้ปกติเลยยย

สุดท้ายนี้ เราสามารถเพิ่มประมาณว่า Debug file Config ได้ด้วย
เพื่อที่กดปุ่ม Debug F5 แล้วให้ทำตามที่เราต้องการเลยเช่น run web บน host … ,port … , reload หรือไม่ , … debugger เปิดหรือปิด ฯลฯ ได้ทันที

โดยวิธีการเพิ่มให้ไปที่ แถบ Debug จากนั้นกดปุ่ม “create a launch.json” ขึ้นมา

vscode จะถามว่า อยากได้ config แบบไหนละ
เลือก Flask เลย

ไฟล์ launch.json ก้จะถูกสร้างขึ้นมาในโฟลเดอร์ .vscode ประมาณนี้ อันนี้ผมมีเพิ่มให้รันที่ Port 9000 กับ no reload ด้วย
พอกด debug ปุ้บก็จะได้ผลลัพท์ตามที่เขียนไปเลย (รัน arugment ต่างๆ)

เรายังสามารถเขียน docker-compose เพิ่มเติมได้ด้วยนะครับ เพราะยังไงเราก็ต้องการ container มากกว่าหนึ่งต่อแอปอยู่แล้ว และยังมีความสามารถอื่นๆอีกสามารถเข้าไปศึกษาเพิ่มเติมได้ที่

Developing inside a Container using Visual Studio Code Remote Development

สรุป

ให้ docker เป็นตัวจัดการ enviorment ให้ซึ่งดีกว่าปกติ และพัฒนาโปรแกรมใน container นั้นๆได้ด้วย Remote-Containers ที่สามารถทำให้เราเข้าไป Test Debug และใช้ vscode-extension ใน container ได้เลย สามารถเปลี่ยนแปลงแก้ไขเพิ่มเติม module ได้ตามต้องการเลือกทั้งยัง Rebuild container ได้ภายใน vscode ได้อีกด้วย