ใช้ monorepos กับโฮสติ้งแอป

เมื่อใช้โมโนรีโป คุณจะจัดระเบียบและจัดการโปรเจ็กต์หลายรายการได้ในไดเรกทอรีเดียว คำแนะนำนี้จะอธิบายวิธีเริ่มต้นใช้งานแอปที่ใช้ Nx ด้วย App Hosting

เผยแพร่โมโนรีโพซิทอรีด้วย Firebase CLI

การรองรับ Monorepo อยู่ในขั้นตอนการตั้งค่าแบ็กเอนด์ที่เรียกใช้โดยคำสั่ง Firebase CLI apphosting:backends:create หลังจากเข้าสู่ขั้นตอนนี้และระบุที่เก็บ GitHub ที่เลือกแล้ว ระบบจะแจ้งให้คุณระบุไดเรกทอรีรูทของแอปซึ่งสัมพันธ์กับที่เก็บของคุณ เมื่อได้รับข้อความแจ้งนี้ ให้ส่งเส้นทางไปยังแอปพลิเคชันที่คุณต้องการทำให้ใช้งานได้ภายใน Monorepo

$ firebase apphosting:backends:create --project [project-name] --location us-central1
i  === Import a GitHub repository
✔  Connected with GitHub successfully

? Which GitHub repo do you want to deploy? gh-username/nx-monorepo
? Specify your app's root directory relative to your repository path/to/app

ต่อไปนี้คือชิ้นงานที่จะใช้กับโครงสร้างโปรเจ็กต์ Nx และ "target-app" ต่อไปนี้เป็นแอปพลิเคชันที่ต้องการสร้างและนำไปใช้งาน

.
    ├── lib
    ├── apps
    │   └── target-app
    │       ├── project.json
    │       └── src
    │           └── ...
    ├── nx.json
    ├── package-lock.json
    └── package.json

ไดเรกทอรีรูทของแอปซึ่งสัมพันธ์กับที่เก็บของคุณคือ apps/target-app

ติดตั้งใช้งานโมโนรีโพซิทอรีด้วยคอนโซล Firebase

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

ภาพหน้าจอของมุมมองการสร้างแบ็กเอนด์คอนโซล

การแก้ปัญหาการติดตั้งใช้งาน Monorepo

  • หากคุณปล่อยช่อง "ไดเรกทอรีรูท" ว่างไว้ระหว่างการตั้งค่าแบ็กเอนด์ App Hosting อาจยังสร้างและติดตั้งใช้งานโปรเจ็กต์เป้าหมายของผู้ใช้ได้หากระบุไว้ใน defaultProject ของไฟล์การกำหนดค่า nx.json ที่เกี่ยวข้อง
  • หากคุณไม่ได้ระบุฟิลด์ "ไดเรกทอรีรูท" หรือ defaultProject บิลด์จะดำเนินการไม่สำเร็จและแสดงข้อความว่า App Hosting ไม่พบโปรเจ็กต์ที่จะกำหนดเป้าหมายภายใน Nx Monorepo
  • สําหรับแอปพลิเคชัน Nx + Angular คุณต้องใช้เครื่องมือสร้างแอปพลิเคชัน Angular เพื่อสร้างแอปพลิเคชัน ระบุเครื่องมือสร้างแอปพลิเคชัน Angular ใน project.json