หากคุณเป็นวิศวกรซอฟต์แวร์การวิจัยมาระยะหนึ่งแล้ว เรื่องราวนี้คงจะคุ้นเคยมาก:

นักวิชาการต้องการเว็บไซต์ แต่พวกเขาไม่แน่ใจว่าพวกเขาต้องการอะไร และพวกเขาไม่ได้เชี่ยวชาญด้านเทคโนโลยีเป็นพิเศษ นั่นคือเหตุผลที่พวกเขาจ้างคุณ! คุณมีความคิดที่คลุมเครือว่าคุณคิดว่าพวกเขากำลังขออะไร แต่นั่นอาจไม่ใช่สิ่งที่พวกเขาต้องการจริงๆ ดังนั้น คุณจึงตัดสินใจสร้างต้นแบบอย่างรวดเร็วเพื่อให้พวกเขาสามารถเห็นสิ่งที่คุณมีในใจ และคุณสามารถทำงานร่วมกันเพื่อทำซ้ำในการแก้ปัญหาขั้นสุดท้าย

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

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

อย่างแรก ข้อมูลเบื้องหลังอย่างรวดเร็ว

เชิงมุม

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

GitHub Pages

GitHub Pagesเป็นส่วนหนึ่งของแพลตฟอร์มGitHubช่วยให้คุณสามารถโฮสต์แอปพลิเคชันของคุณจากภายในที่เก็บ GitHub ของคุณ รวมถึงการปรับใช้อัตโนมัติเมื่อคุณพุชเวอร์ชันใหม่ไปยังที่เก็บ (และฟรี!)

กำลังตั้งค่า

ดังนั้น ฉันคิดว่าคุณได้ติดตั้งแอปพลิเคชัน Angular ใน GitHub repo แล้ว - บางทีคุณอาจใช้งานในเครื่องเพื่อแสดงให้ลูกค้าเห็นด้วยตนเอง (หรือผ่าน Zoom!) แต่ตอนนี้คุณต้องการโฮสต์ ที่ไหนสักแห่ง บางทีเพื่อให้ลูกค้าของคุณสามารถโต้ตอบกับมันและให้ข้อเสนอแนะที่ละเอียดยิ่งขึ้นแก่คุณได้

ขั้นตอนที่ 1: กำหนดค่า GitHub Pages

ขั้นแรก คุณต้องเปิดใช้งาน GitHub Pages สำหรับที่เก็บของคุณ ในการดำเนินการนี้ ไปที่ repo GitHub ของคุณ จากนั้นไปที่ การตั้งค่า → หน้า คุณควรเห็นตัวเลือกที่มีลักษณะดังนี้:

จากนั้นคุณสามารถเลือกสาขาที่คุณต้องการใช้ อาจเป็นสาขาการปรับใช้/การผลิตเฉพาะ (ฉันเพิ่งใช้ "หลัก" สำหรับตัวอย่างนี้) จากนั้น คุณต้องเลือกตำแหน่งที่จะจัดเก็บไฟล์สำหรับแอปของคุณ และด้วยเหตุผลบางประการ คุณสามารถเลือกได้เฉพาะ “(root)” หรือ “/docs” ฉันตัดสินใจใช้ “/docs”

ขั้นตอนที่ 2: สร้างใบสมัครของคุณ

สิ่งต่อไปที่คุณต้องทำคือเรียกใช้บริการบิลด์ของ Angular เพื่อสร้างโค้ดสำหรับไซต์ของคุณ และใส่โค้ดที่สร้างลงในโฟลเดอร์ "docs" ใน repo ของคุณ ในการดำเนินการนี้ เราต้องเปลี่ยนการกำหนดค่าเชิงมุม

เปิด “angular.json” (ในรูทของโปรเจ็กต์ของคุณ) และเปลี่ยน “outputPath” เป็น “docs” ดังที่แสดงในภาพหน้าจอด้านล่าง

ตอนนี้ เมื่อคุณสร้างโครงการโดยใช้:

ng build --prod ⠀⠀⠀⠀⠀⠀ // “prod” = “production”

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

หมายเหตุ: จะมีข้อความระบุว่า “เว็บไซต์ของคุณพร้อมที่จะเผยแพร่…” ในขณะที่กำลังดำเนินการ (หมายความว่ายังไม่ได้ปรับใช้จริง) แต่จะใช้เวลาไม่นาน

ขั้นตอนที่ 3: แก้ไขข้อผิดพลาดในการกำหนดเส้นทาง

อย่างไรก็ตาม หากคุณพยายามเยี่ยมชมไซต์ของคุณ (โดยใช้ URL ที่ GitHub ให้คุณ โปรดดูด้านบน) คุณอาจได้รับข้อผิดพลาดเนื่องจากเบราว์เซอร์ไม่สามารถค้นหาไฟล์ที่เกี่ยวข้อง (เช่น CSS/JavaScript) ในการแก้ไขปัญหานี้ เราต้องตรวจสอบให้แน่ใจว่า Angular ทราบว่าไฟล์นั้นถูกโฮสต์ไว้ที่ใดในหน้า GitHub

หมายเหตุ — อาจมีวิธีที่ดีกว่าในการทำเช่นนี้ (เช่น โดยการแก้ไขไฟล์กำหนดค่าในโครงการ Angular ของคุณ) แต่นี่เป็นวิธีแก้ปัญหาเดียวที่ดูเหมือนว่าจะใช้งานได้

คุณสามารถระบุพารามิเตอร์ “baseHref” ให้กับคำสั่ง Angular build ดังที่แสดงด้านล่าง:

ng build --prod --baseHref=/my-app-url/

โดยที่ “my-app-url” เป็นข้อความเพิ่มเติมที่ส่วนท้ายของ URL ที่ GitHub ให้มา (“turing-diabetes-classification” ในตัวอย่างด้านบน)

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

เคล็ดลับโบนัส: กำหนดเอง 404

เป็นที่น่าสังเกตว่ากลไกการกำหนดเส้นทางของ Angular ทำงานในโหมดที่ใช้งานจริงแตกต่างไปจากเมื่อทำงานในพื้นที่ หากคุณพยายามไปที่[my-app-url]/welcomeโดยตรง เช่น อาจใช้งานไม่ได้และคุณจะเห็นหน้า 404 วิธีหนึ่งในการดำเนินการนี้คือการสร้างหน้า 404 ที่กำหนดเองและตั้งค่าให้เปลี่ยนเส้นทางไปยังที่อยู่ที่ถูกต้อง คำอธิบายเต็มรูปแบบของวิธีการทำเช่นนี้สามารถพบได้ที่นี่

หมายเหตุ: อย่าลืมใส่ไฟล์สำหรับหน้า 404 ของคุณในโฟลเดอร์ "docs"

ในกรณีของเรา ไฟล์ 404.html มีโค้ดต่อไปนี้เพื่อเปลี่ยนเส้นทางไปยังรูทของไซต์ ซึ่งจะโหลดหน้า "ยินดีต้อนรับ" ของไซต์อย่างถูกต้อง:

<head>
<meta http-equiv=”รีเฟรช” เนื้อหา=”0; URL='https://newcastlerse.github.io/turing-diabetes-classification/'" />
</head>

หมายเหตุ: ตรวจสอบให้แน่ใจว่าหน้า 404 ไม่ถูกลบเมื่อคุณสร้างโครงการใหม่ โดยส่วนตัวแล้ว ฉันใช้ GitHub Desktop และ "ย้อนกลับ" การเปลี่ยนแปลงหากไฟล์ถูกลบ

ความคิดสุดท้าย

และนั่นคือวิธีง่ายๆ ในการโฮสต์เว็บแอปพลิเคชัน Angular ฟรีโดยใช้หน้า GitHub คุณไม่จำเป็นต้องมี URL ที่เป็นมิตรกับผู้ใช้มากที่สุด แต่โฮสติ้งนั้นฟรีและช่วยให้คุณทำงานร่วมกันในโครงการของคุณกับ PI/ไคลเอนต์ได้ คุณยังสามารถให้สิทธิ์เข้าถึงที่เก็บเพื่อให้พวกเขาเพิ่มปัญหาและอื่นๆ ได้

อย่างไรก็ตาม ฉันหวังว่าคุณจะพบว่าสิ่งนี้มีประโยชน์ ขอบคุณที่อ่าน.

ตรวจสอบบล็อก Newcastle RSE Teamสำหรับโพสต์เพิ่มเติมเกี่ยวกับหัวข้อที่เกี่ยวข้องกับซอฟต์แวร์ที่น่าสนใจทั้งหมด