ฉันเพิ่งเรียนรู้วิธีการปรับใช้โปรเจ็กต์ MERN Full-stack ของฉัน และแทบรอไม่ไหวที่จะช่วยคุณปรับใช้โปรเจ็กต์ของคุณเช่นกัน

เมื่อปรับใช้โปรเจ็กต์ฟูลสแต็กของ MERN จำเป็นต้องปรับใช้แบ็กเอนด์และฟรอนต์เอนด์แยกกัน เรามาอธิบายวิธีการปรับใช้แบ็กเอนด์ก่อน:

นี่คือการตั้งค่า repo ที่ฉันปรับใช้กับ Render:

ฉันมีโฟลเดอร์ไคลเอนต์สำหรับส่วนหน้าและโฟลเดอร์เซิร์ฟเวอร์สำหรับส่วนหลัง

ก่อนอื่น:ลงทะเบียนเพื่อ Render สำหรับบัญชีฟรี ฉันแนะนำให้สมัครผ่านบัญชี GitHub เพื่อให้สามารถเข้าถึงโฟลเดอร์ของคุณได้เร็วขึ้น

แบ็กเอนด์:

สำหรับแบ็กเอนด์:

1. คลิกที่ใหม่และเลือกบริการเว็บ

3. ระบุชื่อเฉพาะสำหรับบริการเว็บของคุณ

4. เราสามารถปล่อยให้ 'ภูมิภาค' อยู่คนเดียว

5. ปล่อย 'สาขา' เป็น 'หลัก'

6. สำหรับ 'ไดเรกทอรีราก' ฉันระบุ 'เซิร์ฟเวอร์' เนื่องจากข้อมูลแบ็กเอนด์ทั้งหมดของฉันอยู่ในโฟลเดอร์นี้

7. ปล่อย Runtime ไว้ที่ Node เนื่องจากนั่นคือสิ่งที่เราใช้สำหรับแบ็กเอนด์ของเรา

8. คำสั่ง Build คุณสามารถปล่อยให้มันเป็น 'เส้นด้าย'

9. คำสั่ง Start คุณสามารถใส่ 'npm start'

10. จากนั้น ตรวจ สอบให้แน่ใจว่าได้เลือก ฟรีสำหรับประเภทอินสแตนซ์

11. หลังจากนั้น คลิกปุ่ม 'ขั้นสูง':

หลังจากคลิกที่ปุ่ม คุณจะได้รับตัวเลือกเพิ่มเติมที่ด้านล่างของหน้า

12. คลิกที่ 'เพิ่มตัวแปรสภาพแวดล้อม':

เพิ่มตัวแปร envrionment ชื่อ 'MY_MONGO_URL' และวาง URL การเชื่อมต่อ MongoDB ของคุณลงในค่า

ขั้นตอนนี้เป็นการบอกวิธี Render เพื่อเชื่อมต่อกับฐานข้อมูล MongoDB ของคุณ

13. จากนั้นคลิกที่ 'สร้างบริการเว็บ'

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

หลังจากรันสองสามครั้ง บันทึกควรระบุว่า "เชื่อมต่อกับ db && กำลังฟังบนพอร์ต ###"

การทดสอบว่าแบ็กเอนด์ใช้งานได้หรือไม่:

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

หากคุณไปที่ไฮเปอร์ลิงก์ที่ส่วนท้าย ให้เพิ่ม 'api/(the end point for your route)' ลงในสตริงข้อความค้นหา จากนั้นคุณจะเห็นข้อมูลฐานข้อมูลของคุณในรูปแบบ JSON

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

ส่วนหน้า:

สำหรับส่วนหน้า:

1. คลิกที่ 'ใหม่' และเลือก 'ไซต์คงที่' จากเมนูแบบเลื่อนลง

4. ระบุชื่อเฉพาะสำหรับมัน

5. ปล่อยให้สาขาเป็น 'หลัก'

6. สำหรับ 'Root Directory' ให้พิมพ์ 'client'

7. คำสั่ง Build — การสร้างเส้นด้าย

8. สำหรับ 'เผยแพร่ไดเร็กทอรี' ให้พิมพ์ 'build'

9. คลิก 'สร้างไซต์แบบคงที่' และหน้าใหม่ควรปรากฏขึ้นพร้อมกับบันทึกของคอนโซล ทางด้านซ้าย ให้มองหา "การเปลี่ยนเส้นทาง/เขียนซ้ำ"

10. หลังจากนั้น สร้างกฎสองข้อ

กฎข้อแรกที่จะกล่าวต่อไปคือเขียน '/api/*' ในโค้ดของคุณใหม่ไปยังแบ็กเอนด์ที่ปรับใช้ใหม่

กฎข้อที่สองคือเขียน '/*' ใหม่เป็นไฟล์ 'index.html'

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

โปรดแจ้งให้เราทราบหากคุณมีคำถามหรือปัญหาใดๆ คุณสามารถปรับใช้แอป MERN แบบเต็มสแต็กด้วยวิธีอื่นใดได้อีกบ้าง

โปรดอย่าลังเลที่จะติดต่อฉันบน LinkedIn:https://www.linkedin.com/in/mai-vang-software-engineer/