วิธีซ้อนสองเว็บไซต์ในบล็อกเซิร์ฟเวอร์ nginx เดียวกัน

ด้วย nginx ฉันกำลังพยายามตั้งค่าเว็บไซต์คงที่สองแห่งในโดเมนเดียวกัน แห่งแรกอยู่ที่ ตัวอย่าง.คอมและอีกอันคือแอป React ขนาดเล็กที่ example.com/haiku. วิธีนี้สามารถทำได้?

ฉันพบปัญหาที่ไฟล์สไตล์ชีตและจาวาสคริปต์สำหรับ example.com/haiku กำลังได้รับการร้องขอจากหลัก ตัวอย่าง.คอม. เนื่องจาก URI ทรัพยากรของหน้าทั้งหมดเริ่มต้นด้วยเครื่องหมายทับ (เช่น /static/style.css) nginx กำลังประมวลผลเป็นของ ตัวอย่าง.คอม มากกว่าที่จะได้รับจาก /ไฮกุ.

เว็บไซต์ทั้งสองมีไดเร็กทอรีแยกกันบนเซิร์ฟเวอร์ ตัวอย่าง.คอม อยู่ที่ /srv/http/โดเมน, และ example.com/haiku อยู่ที่ /srv/http/ไฮกุ

นี่คือส่วนที่เกี่ยวข้องของบล็อกเซิร์ฟเวอร์ของ nginx ของฉัน:

รูท /srv/http;
ที่ตั้ง / {
  รูท /srv/http/โดเมน;
}
สถานที่ /ไฮกุ {
  นามแฝง /srv/http/haiku;
}

ฉันได้ทำการวิจัยเกี่ยวกับโมดูล nginx เหล่านี้แล้ว และฉันเข้าใจว่าเหตุใดจึงไม่ทำงานในขณะนี้ กำลังนำทางไปยัง example.com/haiku/index.html ให้บริการหน้า แต่การอ้างอิงถึง /static/css/style.css และ /static/js/main.js กำลังตี / บล็อกที่ตั้ง ฉันต้องการการเขียนใหม่ภายในบางอย่างที่จะใช้ /static/css/style.css และเปลี่ยนเป็น /haiku/static/css/style.cssซึ่งเป็นที่ตั้งของไฟล์ ฉันไม่พบคำถามที่คล้ายกันใน Google หรือ SE

ฉันรู้ว่าฉันสามารถแก้ปัญหานี้ได้ง่ายๆ ด้วยการซื้อโดเมนอื่น ฉันรู้ว่าฉันยังสามารถตั้งค่าโดเมนย่อยได้ แต่ฉันต้องการทราบเป็นพิเศษว่าสามารถทำได้โดยการซ้อนเว็บไซต์คงที่หนึ่งเว็บไซต์ในคำขอของเว็บไซต์อื่นโดยไม่ต้องกำหนดค่า DNS หรือไม่

ฉันไม่ต้องการเพียงแค่เปลี่ยน URIs สำหรับไฟล์ css และ js เพราะฉันต้องการที่จะปรับใช้แอป React เล็กๆ นี้บนรูทบล็อกเซิร์ฟเวอร์ใดๆ

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

https://skryvets.com/blog/2018/09/20/an-elegant-solution-of-deploying-react-app-into-a-subdirectory/ แสดงแนวทางหนึ่งสำหรับ React เพื่อกำหนดค่า URL ฐานของแอปพลิเคชัน

ไม่ควรเขียน HTML ใหม่บนฝั่ง nginx มันจะใช้ทรัพยากรเพิ่มเติมและอาจทำให้เกิดผลข้างเคียงที่ไม่พึงประสงค์