แบบฝึกหัด - เพิ่มคอนเทนเนอร์ dev ลงในโครงการที่มีอยู่

เมื่อคุณกําลังตั้งค่าคอนเทนเนอร์นักพัฒนาสําหรับโครงการ คุณจะต้องเพิ่มการกําหนดค่าคอนเทนเนอร์ลงในโครงการก่อน การกําหนดค่าคอนเทนเนอร์ตั้งค่าสภาพแวดล้อมของคุณใน Visual Studio Code

ในแบบฝึกหัดนี้ คุณจะเพิ่มคอนเทนเนอร์นักพัฒนาและเปิดโครงการแดชบอร์ดผลิตภัณฑ์ในคอนเทนเนอร์

เพิ่มคอนเทนเนอร์นักพัฒนา

1. กลับไปยัง VS Code และโครงการที่คุณลอกแบบไว้ก่อนหน้านี้

2. กด F1 เพื่อเปิด Command Palette

3. พิมพ์ เพิ่ม คอนเทนเนอร์ dev และเลือก Dev Containers: เพิ่มแฟ้มการกําหนดค่าคอนเทนเนอร์การพัฒนา ซึ่งแสดงรายการ เทมเพลตคอนเทนเนอร์ Dev เทมเพลตประกอบด้วยไฟล์ต้นฉบับที่จําเป็นในการกําหนดค่าสภาพแวดล้อมการพัฒนาที่สมบูรณ์สําหรับสแตกเทคโนโลยีที่ระบุ

4. เลือก เพิ่มการกําหนดค่าไปยังพื้นที่ทํางาน

5. เลือกตัวเลือกต่อไปนี้:

   ทางเลือก	ค่า
   เลือกเทมเพลตการกําหนดค่าคอนเทนเนอร์	งูหลาม 3
   เวอร์ชัน Python	3.11
   เลือกคุณลักษณะเพิ่มเติมเพื่อติดตั้ง	เลือก ตกลง

การกําหนดค่า Dev Container จะถูกเพิ่มไปยังโครงการของคุณ Visual Studio Code จะแจ้งให้คุณทราบว่า ตอนนี้คุณสามารถเปิดโครงการในคอนเทนเนอร์ได้ ในตอนนี้ ยกเลิกการแจ้งเตือนนี้

ตรวจสอบไฟล์การกําหนดค่า

1. โปรดสังเกตว่ามีการเพิ่มโฟลเดอร์ใหม่ที่เรียกว่า '.devcontainer' ลงในโครงการแล้ว
2. ขยายโฟลเดอร์นั้น และสังเกตว่าโฟลเดอร์ประกอบด้วยไฟล์ devcontainer.json

เปิดโครงการในคอนเทนเนอร์

1. กด F1 เพื่อเปิด Command Palette
2. พิมพ์ เปิดใหม่ในคอนเทนเนอร์
3. เลือก Dev Containers: เปิดอีกครั้งใน คอนเทนเนอร์ จากรายการของตัวเลือกที่พร้อมใช้งาน

คอนเทนเนอร์จะเริ่มสร้าง รุ่นเริ่มต้นอาจใช้เวลาสักครู่เนื่องจากต้องดึงรูปภาพใหม่ลงและสร้างขึ้นบนเครื่องของคุณ หลังจากที่มีการสร้างคอนเทนเนอร์เป็นครั้งแรก การสร้างในภายหลังจะเร็วขึ้นมาก

ดูตัวบ่งชี้ระยะไกล

เมื่อการสร้างคอนเทนเนอร์เสร็จสมบูรณ์ คุณสามารถยืนยันว่า คุณกําลังเชื่อมต่อกับคอนเทนเนอร์ โดยตรวจสอบตัวบ่งชี้ระยะไกล ตอนนี้คุณควรเห็นไฟล์โครงการของคุณที่โหลดใน VS Code

• ตรวจสอบตัวบ่งชี้ระยะไกลโดยดูที่มุมซ้ายล่างของรหัส VS โปรดสังเกตว่าในตอนนี้จะแสดง "Dev Container: Python 3"

  ภาพหน้าจอ

ตรวจสอบคอนเทนเนอร์

1. กด Ctrl + ` เพื่อเปิดเทอร์มินัลแบบรวมใน Visual Studio Code หากยังไม่ได้เปิด

2. โปรดสังเกตว่าพร้อมท์เทอร์มินัลอาจมีลักษณะแตกต่างจากพร้อมท์เทอร์มินัลปกติของคุณ

   VS Code integrated terminal promptVS Code integrated terminal promptพร้อมท์เทอร์มินัลรวมVS Code

3. เรียกใช้คําสั่งต่อไปนี้เพื่อตรวจสอบให้แน่ใจว่ามีการติดตั้ง Python แล้ว:

   python --version
   

   ผลลัพธ์ของเทอร์มินัลควรเป็น Python เวอร์ชันที่ใช้ในคอนเทนเนอร์

ติดตั้งการขึ้นต่อกันของโครงการ

• เรียกใช้คําสั่งต่อไปนี้ในเทอร์มินัลเพื่อติดตั้งการขึ้นต่อกันของ Flask ที่คุณจําเป็นต้องเรียกใช้โครงการ:

  pip3 install --user -r requirements.txt
  

เรียกใช้โครงการ

1. ป้อนคําสั่งต่อไปนี้ในเทอร์มินัลเพื่อเริ่มต้นโครงการ:

   python app.py
   

2. เปิดโครงการในเบราว์เซอร์โดยนําทางไปยัง http://127.0.0.1:5000

   

ทํางานได้ยอดเยี่ยม! คุณมีแอปพลิเคชันเว็บ Python ที่มี Flask ทํางานบนเครื่องของคุณ และคุณอาจไม่ทราบว่าสิ่งเหล่านั้นเป็นอะไร ไม่เป็นไร! คุณไม่จําเป็นต้องทําหรอก คอนเทนเนอร์ดูแลการตั้งค่าสภาพแวดล้อมทั้งหมด

ในส่วนถัดไป คุณจะได้เรียนรู้วิธีการใช้ไฟล์ devcontainer.json เพื่อทําให้การติดตั้งแบบขึ้นต่อกันเป็นอัตโนมัติและกําหนดรหัส VS สําหรับโครงการ Python นี้