IDE เป็นโค้ดที่มี GitHub Codespaces ใน Visual Studio Code

เผยแพร่แล้ว: 2021-11-24

หนึ่งในสิ่งที่ยากที่สุดสำหรับนักพัฒนาคือการเริ่มโครงการที่กำลังดำเนินการอยู่

บ่อยครั้งที่ข้อกำหนดสำหรับโครงการใหม่บังคับให้เราต้องแก้ไขเวอร์ชันของ SDK และเครื่องมือที่เราได้ติดตั้งไว้ในเครื่องเพื่อแก้ไขจุดบกพร่องของสภาพแวดล้อม ซึ่งทำให้เราเสียเวลาหลายวันจนกว่าทุกอย่างจะทำงานตามที่คาดไว้

หากเราพิจารณาเวอร์ชันที่อยู่ในช่วงเบต้าหรือช่วงแสดงตัวอย่าง สิ่งต่างๆ จะซับซ้อนยิ่งขึ้น เพื่อป้องกันไม่ให้สิ่งนี้เกิดขึ้น ฉันอยากจะแนะนำให้คุณรู้จักกับ GitHub Codespaces ซึ่งไม่เพียงแต่ช่วยให้คุณสร้างสภาพแวดล้อมการพัฒนาที่แอปพลิเคชันของคุณต้องการภายในคอนเทนเนอร์ แต่ยังทำให้สามารถพัฒนาได้ทุกที่และจากอุปกรณ์ใดๆ

เอาล่ะ!

GitHub Codespace คืออะไร?

Github codespaces เป็นสภาพแวดล้อมระบบคลาวด์ที่สามารถเข้าถึงได้จากเบราว์เซอร์และมีคุณสมบัติทั้งหมดที่จำเป็นสำหรับการพัฒนาโค้ดเฉพาะ

คุณอาจเคยเห็นการประกาศของ GitHub ทุกครั้งที่คุณอยู่ใน repo และกดปุ่ม "ช่วงเวลา" โปรแกรมแก้ไขเว็บจะเปิดขึ้นพร้อมกับที่เก็บที่เป็นปัญหา

อย่างไรก็ตาม คุณจะไม่สามารถเรียกใช้เทอร์มินัลได้ เนื่องจากเป็นเพียงตัวแก้ไขเว็บและไม่มีเครื่องแบ็คเอนด์ บางครั้งสิ่งนี้อาจเกินพอ แต่ลองนึกภาพว่าคุณจำเป็นต้องเรียกใช้สภาพแวดล้อมหรือคอมไพล์โปรเจ็กต์ แต่คุณไม่มีระบบที่ตรงตามความต้องการ (iPad, Surface Go ฯลฯ) อยู่ในมือ

GitHub Codespaces แก้ปัญหานี้โดยอนุญาตให้คุณเรียกใช้ IDE ในระบบคลาวด์เพื่อทำงานราวกับว่าคุณกำลังใช้ระบบโลคัลและการกำหนดค่าที่คุณระบุด้วยเช่นกัน

หมายเหตุ: ฟีเจอร์นี้มีให้ใช้งานในบัญชี Team และ Enterprise เท่านั้น

โค้ดตัวอย่าง

สำหรับตัวอย่างนี้ ฉันจะใช้แอปพลิเคชัน Node.js ที่ง่ายมาก:

 const express = require('express'); const app = express(); const port = 8080; app.use(express.static('public')); app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`); })

รหัสด้านบนมีโครงสร้างดังต่อไปนี้:

โครงสร้างของรหัส

คุณสามารถเปิดโปรเจ็กต์นี้ในเครื่องได้โดยไม่มีปัญหา ตราบใดที่คุณติดตั้ง Node.js, git และส่วนขยาย VS Code ที่เป็นประโยชน์สำหรับโปรเจ็กต์ในภาษานี้ คุณอาจต้องการใช้เครื่องมือเช่น Nodemon ซึ่งจะรีเฟรชแอปพลิเคชันโดยอัตโนมัติ

ปัญหาเกิดขึ้นเมื่อคุณไม่เพียงแค่ทำงานกับการกำหนดค่านี้เท่านั้น แต่ยังใช้ประโยชน์จากส่วนอื่นๆ อีกมากมาย เช่น การพัฒนาด้วย .NET Core, Python, Docker หรือ Kubernetes และนั่นทำให้คุณติดตั้งเครื่องมือและส่วนขยายเพิ่มเติมที่คุณไม่ต้องการตลอดเวลา และพวกเขา อาจส่งผลเสียต่อประสิทธิภาพของสภาพแวดล้อมการพัฒนาของคุณ

ปัญหาไม่ได้จำกัดอยู่ที่ประสิทธิภาพของคุณเอง หากมีคนอื่นเข้าร่วมทีมและต้องการให้ระบบ "พร้อม" กับเครื่องมือและเฟรมเวิร์กที่จำเป็นในการเริ่มแอปพลิเคชัน พวกเขาจะเสียเวลาหลายชั่วโมงซึ่งจะส่งผลเสียต่อประสิทธิภาพโดยรวมของทีม (จะแย่กว่านี้หากคุณเป็น ทำงานโดยใช้ระบบปฏิบัติการที่แตกต่างกัน)

การทำงานกับคอนเทนเนอร์ระยะไกล

Visual Studio Code มีส่วนขยายที่เรียกว่า Remote Containers หรือ Dev Containers ซึ่งช่วยให้คุณสร้างสภาพแวดล้อมการพัฒนาที่แอปพลิเคชันของคุณต้องการภายในคอนเทนเนอร์ ด้วยวิธีนี้ นักพัฒนาทั้งหมดในทีมของคุณที่ทำงานในโครงการจะมีสภาพแวดล้อมการพัฒนาเดียวกันโดยอัตโนมัติ

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

ฉันจะเริ่มต้นได้อย่างไร

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

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

ในนั้น คุณต้องมีไฟล์อย่างน้อยหนึ่งไฟล์ชื่อ devcontainer.json ซึ่งเป็นไฟล์ที่จะมีการกำหนดค่าสภาพแวดล้อม

สำหรับตัวอย่างนี้ ฉันได้ใช้สิ่งต่อไปนี้:

 { "name": "dev-demo", "dockerFile": "Dockerfile", "forwardPorts": [ 8080 ], "settings": { "workbench.colorTheme": "Visual Studio Light" }, "containerEnv": { "NODE_ENV": "development", }, "extensions": [ "coenraads.bracket-pair-colorizer-2", "eg2.vscode-npm-script", "christian-kohler.npm-intellisense", "dbaeumer.vscode-eslint", "streetsidesoftware.code-spell-checker", "formulahendry.auto-close-tag", "mikestead.dotenv", "christian-kohler.path-intellisense", "davidanson.vscode-markdownlint", "pkief.material-icon-theme", "humao.rest-client" ], "postCreateCommand": "/bin/bash -c .devcontainer/post-create.sh", "postAttachCommand": "nodemon server.js" }

อย่างที่คุณเห็น มันคือ JSON ที่มีส่วนต่างๆ กัน:

  • name : เป็นชื่อที่คอนเทนเนอร์ dev จะมี ตามหลักการแล้ว ชื่อนี้ควรเป็นชื่อที่สื่อความหมาย
  • dockerFile : ใช้เพื่อระบุชื่อของ Dockerfile ที่เราจะใช้สร้างสภาพแวดล้อม ในกรณีของฉัน ในโฟลเดอร์ .devcontainer เดียวกัน ฉันมีรายการดังต่อไปนี้:
 FROM node:12.16.1-alpine WORKDIR /code RUN apk update && apk upgrade \ && apk add git bash curl \ && npm install -g nodemon COPY . .

ในตัวอย่างนี้ ฉันใช้ โหนด: รูปภาพ 12.16.1-alpine เพียงเพื่อแสดงให้เห็นว่าการกำหนดค่าที่ฉันมีภายในสภาพแวดล้อมการพัฒนานี้แตกต่างจากที่ฉันมีในเครื่อง ซึ่งฉันใช้ Node.js เวอร์ชัน 14 ในทางกลับกัน ฉันติดตั้งยูทิลิตี้บางอย่าง เช่น git, bash และ cURL นอกเหนือจากโมดูล Nodemon ที่ฉันจะใช้ระหว่างการพัฒนา

  • fordwardPorts : นี่คือพอร์ตที่แอปพลิเคชันของฉันใช้ เพื่อให้ฉันสามารถเข้าถึงได้จากเครื่องในเครื่อง และการดีบักจึงเป็นเรื่องง่าย
  • การตั้งค่า : สำหรับตัวอย่างนี้ และเมื่อคุณมีหลายสภาพแวดล้อม จะมีประโยชน์มาก ฉันได้แก้ไขธีม Visual Studio Code เพื่อให้ชัดเจนว่าฉันไม่ได้อยู่ในสภาพแวดล้อมท้องถิ่นในอินสแตนซ์ของ IDE ฉันมักจะใช้เวอร์ชันมืดและที่นี่ฉันได้ตั้งค่าเวอร์ชันสว่างแล้ว
  • containerEnv : ฉันได้เพิ่มตัวแปรสภาพแวดล้อมซึ่งมักจะมีประโยชน์มากเมื่อพัฒนา
  • postCreateCommand : ฉันได้เพิ่มคุณสมบัตินี้เพื่อให้คุณเห็นว่าเป็นไปได้ที่จะรันคำสั่งหรือสคริปต์ระหว่างวงจรชีวิตของคอนเทนเนอร์ dev ในกรณีนี้ สคริปต์นี้จะเปิดตัวเมื่อการสร้างเสร็จสิ้น เนื้อหาของเรื่องนี้คือ:
     #!/bin/bash # this runs in background after UI is available #Remove node_modules folder echo "Remove node_modules folder first" rm -rf node_modules #Install npm dependencies echo "Install dependencies" npm install
  • postAttachCommand: ในที่สุด ฉันได้เพิ่มคำสั่ง nodemon server.js ให้กับคุณสมบัตินี้ เพื่อที่ทุกครั้งที่คุณเชื่อมต่อกับคอนเทนเนอร์ มันจะเป็นการยกแอปพลิเคชันโดยค่าเริ่มต้น

มีตัวเลือกอื่นๆ อีกมากมายที่จะเพิ่มในไฟล์ devcontainer.json นี่เป็นเพียงตัวอย่างเล็กๆ น้อยๆ ของสิ่งที่คุณทำได้

เมื่อคุณทราบทุกอย่างที่อยู่ในโฟลเดอร์นี้แล้วและการกำหนดค่าที่กำหนดไว้ทำงานอย่างไร เราจะเปิดใช้สิ่งนี้ได้อย่างไร

วิธีที่ง่ายที่สุดคือผ่านปุ่มนี้ที่นี่:

เลือกตัวเลือก เปิดใหม่ในคอนเทนเนอร์ แล้วกระบวนการจะเริ่มสร้างคอนเทนเนอร์และ IDE ที่คุณกำหนดเอง ผลลัพธ์ควรมีลักษณะดังนี้:

ในท้ายที่สุด ผลลัพธ์ในกรณีนี้ จะเป็นหน้าต่าง Visual Studio Code ที่มีธีม Light โดยมีเวอร์ชันเฉพาะของ Node.js ส่วนขยายหลายตัวที่ได้รับเลือกให้พัฒนาอย่างสะดวกสบายยิ่งขึ้น และแอปพลิเคชันของฉันทำงานและเปิดเผยโดยพอร์ต 8080 แล้ว

และส่วนที่ดีที่สุดคือ: การกำหนดค่านี้มีการกำหนดเวอร์ชันใน repo ของโปรเจ็กต์ เพื่อให้สมาชิกทุกคนสามารถใช้งานได้ งดงามเพียง!

ตอนนี้เราได้เห็นทั้งหมดนี้แล้ว และเข้าใจขั้นตอนทั้งหมดแล้ว ให้ลบโฟลเดอร์ .devcontainer เลือกไอคอนที่ด้านล่างซ้ายอีกครั้ง เลือก Reopen in Container อีกครั้ง และคุณจะเห็นว่าครั้งนี้ให้คุณเลือกระหว่างหลายรายการก่อน - การกำหนดค่าที่สร้างขึ้น

คุณไม่จำเป็นต้องเริ่มการกำหนดค่าตั้งแต่เริ่มต้น และคุณรู้อยู่แล้วว่าต้องแตะจุดไหนเพื่อสิ้นสุดการแตะต้องแบบเนิร์ด

กลับไปที่ Github Spaces

ตอนนี้เราจะใช้โปรเจ็กต์เดียวกับที่ใช้ใน Visual Studio Remote Containers แต่คราวนี้ใช้กับ GitHub เมื่อเสร็จสิ้นในส่วน รหัส คุณจะมีตัวเลือกใหม่ที่เรียกว่า Codespaces:

ที่นี่คุณสามารถเลือกประเภทของเครื่องที่คุณต้องการทำงานกับที่เก็บเฉพาะนี้:

เลือกขนาดเครื่อง

เมื่อเลือกแล้ว กระบวนการสร้างจะเริ่มขึ้น จะใช้การกำหนดค่าของโฟลเดอร์ .devcontainer ที่เราสร้างขึ้นสำหรับ Remote Containers เพื่อกำหนดค่าสภาพแวดล้อม

เมื่อกระบวนการเสร็จสิ้น คุณจะเห็นว่า Visual Studio Code จะปรากฏในรูปแบบเว็บโดยที่แอปพลิเคชันทำงานในลักษณะเดียวกับที่เราทำในระบบท้องถิ่นของเรา

คำพูดสุดท้าย

ดังที่คุณเห็นในตัวอย่างข้างต้น Github Codespaces โดยใช้ Remote Containers เป็นวิธีแก้ปัญหาที่ยอดเยี่ยมสำหรับปัญหาการจำลองการกำหนดค่าและสภาพแวดล้อมการพัฒนาของเรา และยังเป็นวิธีที่ยอดเยี่ยมในการปรับปรุงประสิทธิภาพการทำงานของทีมของเราอีกด้วย

แท็ก:
  • DevOps