บทช่วยสอนนี้จะอธิบายวิธีกำหนดค่าแอป MERN ให้ทำงานบน Azure Web Services และวิธีการปรับใช้ผ่าน GitHub + การผสานรวมอย่างต่อเนื่อง บทช่วยสอนนี้ใช้งานได้กับแอป MERN ที่พร้อมใช้ Azure ที่ฉันสร้างขึ้น

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

แหล่งข้อมูลเพิ่มเติมที่ยอดเยี่ยม

หากคุณต้องการเรียนรู้เกี่ยวกับการสร้างแอป CRUD MERN เต็มรูปแบบหรือการพัฒนาใน React ฉันขอแนะนำแหล่งข้อมูลต่อไปนี้ ถ้าไม่ ให้ข้ามไปยังส่วนถัดไป

บทความที่ยอดเยี่ยมจริงๆ เกี่ยวกับการปรับใช้แอป MERN กับ Azure ผ่าน CI (ครอบคลุมมากกว่าบทความนี้ แต่จะแตกต่างออกไปเล็กน้อย)



การสร้างแอป MERN Stack และการโฮสต์ใน Microsoft Azure โดยใช้ Create-React-App w/ Continuous…
บทความนี้จะกล่าวถึงวิธีการโฮสต์เซิร์ฟเวอร์ NodeJS Express ที่ให้บริการ Create- ของคุณ เว็บไซต์ React-App และมี API…medium.com



บทช่วยสอน MERN Azure ของ Microsoft



บทช่วยสอน MongoDB, React และ Node.js สำหรับ Azure
วิดีโอบทช่วยสอนแบบหลายส่วนนี้สาธิตวิธีสร้างแอปติดตามฮีโร่ด้วยส่วนหน้าของ React แอปที่ใช้ Node…docs.microsoft.com



สำหรับแอป React ที่พร้อมใช้งานเต็มรูปแบบ



DaveVoyles/react-boilerplate
fire: รากฐานแบบออฟไลน์ที่ปรับขนาดได้สูงพร้อมประสบการณ์นักพัฒนาที่ดีที่สุด และมุ่งเน้นไปที่ประสิทธิภาพและ...github.com



มาเริ่มกันเลย

ข้อกำหนดเบื้องต้น

  1. บัญชีสีฟ้า
  2. บัญชี Git + GitHub (สำหรับการรวมอย่างต่อเนื่อง)
  3. บัญชี MongoDB Atlas (ระดับฟรี) (คุณสามารถใช้ CosmosDB ของ Azure แทน MongoDB Atlas ได้ แต่บทช่วยสอนนี้ไม่ครอบคลุม)

ก้าวแรก

  1. โคลน repo ที่ [https://github.com/Sogutt/Azure-MERN-Boilerplate] นี่คือตัวอย่างแอป Azure ที่พร้อมใช้งาน MERN
  2. เรียกใช้ "การติดตั้ง npm" ในไดเรกทอรีราก
  3. เรียกใช้ "การติดตั้งเส้นด้าย" ในไดเร็กทอรีไคลเอนต์
  4. ปรับ URL การเชื่อมต่อ MongoDB ใน new-index.js เป็น URL การเชื่อมต่อที่คุณได้รับจาก MongoDB Atlas หากคุณไม่ทราบวิธีดำเนินการนี้ ให้ไปที่คลัสเตอร์ของคุณบน MongoDB Atlas คลิกปุ่ม “เชื่อมต่อ” แล้วทำตามขั้นตอนด้านล่าง

รายการ MongoDB สุดท้ายที่ต้องแก้ไขคือชื่อฐานข้อมูลในบรรทัดที่ 12

เมื่อคุณแก้ไข MongoDB URL + ชื่อฐานข้อมูล และติดตั้งแพ็คเกจทั้งในไดเร็กทอรีรูทและไคลเอนต์ คุณก็พร้อมแล้วที่จะพัฒนาจากเทมเพลตนี้ เพียงตรวจสอบให้แน่ใจว่าได้รัน “npm run build” หลังจากการเปลี่ยนแปลงใดๆ ในไดเร็กทอรีไคลเอ็นต์ก่อนที่คุณจะปรับใช้กับ Azure มิฉะนั้นการเปลี่ยนแปลงจะไม่สะท้อนให้เห็นบน Azure

1. โครงสร้างโครงการและตรรกะ

โครงสร้างเป็นเพียงแอปเดียว (ส่วนหน้า - React) ภายในอีกแอปหนึ่ง (แบ็กเอนด์ - โหนด / Express) ไดเร็กทอรีรากประกอบด้วยตรรกะแบ็กเอนด์ของเราพร้อมกับโมดูลที่จำเป็นทั้งหมด ไดเร็กทอรีไคลเอนต์ประกอบด้วยแอปส่วนหน้าทั้งหมดพร้อมแพ็คเกจทั้งหมดที่จำเป็นสำหรับแอป React ของเราในการทำงาน เพื่อเน้นย้ำว่าโดยพื้นฐานแล้วทั้งสองโปรเจ็กต์แยกจากกัน ฉันใช้ npm เพื่อจัดการแอปแบ็กเอนด์ และใช้เส้นด้ายเพื่อจัดการแอปโต้ตอบ

เนื่องจากการเพิ่มมูลค่าของเทมเพลตนี้ทำให้มีสภาพแวดล้อมที่พร้อมใช้งาน Azure ตรรกะ API (การสื่อสารแบ็กเอนด์-ฟรอนต์เอนด์) จึงตรงไปตรงมามาก MongoDB ของเรามีพจนานุกรมง่ายๆ (ดังที่แสดงด้านล่าง) เราดึงข้อมูลนี้และส่งไปยังแอป React ส่วนหน้าของเราเพื่อแสดงผล

2. สภาพแวดล้อม Dev และ Prod

มีความแตกต่างหลัก 3 ประการระหว่างสภาพแวดล้อมการพัฒนาท้องถิ่นและเวอร์ชันที่ใช้งานจริงของ Azure

อันดับแรก เราต้องแน่ใจว่าเราไม่ได้เขียนโค้ดพอร์ตของเราใน server.js อย่างหนัก เนื่องจากสิ่งนี้จะไม่ทำงานบน Azure แต่เรากำหนดพอร์ตในลักษณะต่อไปนี้แทน

app.set('port', process.env.PORT || 5000);
console.log("++++++++++++++++" + app.get('port'));

ข้อแตกต่างประการที่สองคือใน Azure ส่วนหน้าของเราทำหน้าที่เป็นโครงสร้าง React แบบคงที่ ซึ่งหมายความว่าเราจำเป็นต้องเรียกใช้ “npm run build” ในไดเร็กทอรีไคลเอนต์ของเรา จากนั้นรวมบรรทัดโค้ดต่อไปนี้ใน server.js ของเรา สิ่งนี้ทำให้ Express สามารถให้บริการงานสร้างที่เราเพิ่งสร้างขึ้นได้ ซึ่งเป็นวิธีที่เราให้บริการส่วนหน้าบน Azure

app.use(express.static('./client/build'));

ประการที่สาม เราต้องชี้ GET/ เส้นทางของเราใน server.js ไปที่ index.html ในบิลด์ของเรา

app.get("*", (req, res) => {
   res.sendFile(path.resolve(__dirname, "client", "build",     
   "index.html"));
});

ตอนนี้เราสามารถปรับใช้ได้แล้ว

3. การตั้งค่าการรวมอย่างต่อเนื่อง

หมายเหตุ: คุณต้องตั้งค่า Azure Web App ก่อนขั้นตอนนี้ มันเป็นกระบวนการที่ตรงไปตรงมามาก ดังนั้นฉันไม่คิดว่าจะมีอะไรให้ครอบคลุมมากนัก อย่างไรก็ตาม ตรวจสอบให้แน่ใจว่ารันไทม์ของคุณคือ Node 12.0 LTS หากคุณได้ตั้งค่าเว็บแอปด้วยรันไทม์อื่นแล้ว คุณสามารถเปลี่ยนได้ในการกำหนดค่า -> การตั้งค่าทั่วไป

เมื่อคุณตั้งค่าเว็บแอปแล้ว ให้ไปที่ "Deployment Center"

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

มาทำการสาธิตอย่างรวดเร็วเพื่อทดสอบ CI ของเรา เราจะเพิ่มข้อความเล็กๆ น้อยๆ “การสาธิตการรวมระบบอย่างต่อเนื่องครั้งแรก” ในบรรทัดที่ 40 ใน App.js เนื่องจากเราได้เปลี่ยนแอปโต้ตอบ เราจึงต้องเรียกใช้ "npm run build" ภายในไดเร็กทอรีไคลเอ็นต์ของเรา หากคุณจำได้ โครงสร้างคงที่นี้คือสิ่งที่เราให้บริการด้วย Express บน Azure

เมื่อเรามี build ใหม่แล้ว เราก็สามารถ push ไปที่ repo ของเราได้ตามปกติ เมื่อการพุชเสร็จสมบูรณ์ Azure จะปรับใช้แอปอีกครั้งโดยอัตโนมัติ (แม้ว่าคุณอาจต้องรีเฟรชเพื่อดูการเปลี่ยนแปลงก็ตาม) ในภาพหน้าจอสองภาพด้านล่างนี้ คุณจะเห็นว่าหน้า Azure Deployment Center ซิงค์กับ repo GitHub ของเราอย่างไร ข้อความที่เรามุ่งมั่นด้วย “การสาธิตการรวมอย่างต่อเนื่อง” จะแสดงขึ้นเพื่อให้เราสามารถติดตามเวอร์ชันล่าสุดของแอปของเราที่มีการปรับใช้และใช้งานบน Azure

ในที่สุดเราก็เห็นว่าการเปลี่ยนแปลงของเราสะท้อนให้เห็นในแอปจริงของเราแล้ว!

ฉันหวังว่าคุณจะพบว่าบทช่วยสอนนี้มีประโยชน์ หากคุณมีคำถามใด ๆ แจ้งให้เราทราบในความคิดเห็น!