วิธีปรับใช้แอปพลิเคชัน Flask + React กับ Azure Web Service

Question

ฉันทำงานกับแอพนี้บน localhost ของฉันซึ่งมี Flask เป็นแบ็กเอนด์ ( localhost: 5000 ) และ React เป็นส่วนหน้า ( localhost: 3000 ) และพวกเขาก็สื่อสารกันได้ดี ตอนนี้ฉันควรจะวางมันออนไลน์เพื่อให้คนอื่น ๆ สามารถมองเห็นได้เช่นกัน - ฉันไม่มีประสบการณ์ใน Azure มากนัก แต่ฉันจะปรับใช้ส่วนประกอบทั้งสองนี้ (React & Flask) เป็น URL เดียวบนบริการเว็บแอป Azure ได้อย่างไร (ก่อนหน้านี้ฉันมีประสบการณ์ในการใช้ FTP เพื่ออัปโหลดโฟลเดอร์ ' build ' ไปยังโฟลเดอร์ " site / wwwroot " เพื่อวางแอป React แบบธรรมดาโดยไม่มีแบ็กเอนด์)

Answer 1

ใหม่ล่าสุด

หลังจากการทดสอบโปรเจ็กต์ python จะถูกปรับใช้ใน webapp โปรเจ็กต์ react จะถูกปรับใช้ในแอ็พพลิเคชันเสมือนและโปรเจ็กต์โหนดปกติจะถูกปรับใช้ในแอ็พพลิเคชันเสมือนด้วย

ปรับใช้โครงการ flask python กับสภาพแวดล้อม windows วิธีการปรับใช้ตามปกติจะล้มเหลวโปรดปฏิบัติตามเอกสารบล็อกนี้ (เอกสารของบุคคลที่สาม) เพื่อดำเนินการซึ่งใช้ได้กับฉัน

กำลังเรียกใช้แอพ Flask ด้วย HttpPlatformHandler ใน Azure App Services

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

ขอแนะนำให้ใช้วิธีการปรับใช้แอปพลิเคชันเสมือนเพื่อใช้วิธีการเผยแพร่ที่แสดงในรูปด้านล่าง

เอกสิทธิ์

ขอแนะนำให้เลือก windows เมื่อสร้างเว็บแอปสีฟ้าเนื่องจาก windows รองรับแอปพลิเคชันเสมือนจริง

เราสามารถปรับใช้แอพขวดได้ตามปกติและปรับใช้แอพตอบสนองในแอพเสมือน

ภายใต้สถานการณ์ปกติprocess.env.portเว็บแอปทั้งสองจะเหมือนกันและจะไม่รบกวนกันเนื่องจากเส้นทางเสมือน

โพสต์อ้างอิง:

1. Vue Frontend และ Express backend บนบริการเว็บแอป Azure เดียวกัน

2. Azure Front Door ไม่ได้ดูแลโดเมนที่กำหนดเองในเบราว์เซอร์