การโฮสต์เนื้อหาแบบคงที่สําหรับแอป Fabric

Fabric Apps มีบริการโฮสต์เนื้อหาแบบคงที่ที่สร้าง แพ็คเกจ และให้บริการแอปพลิเคชันส่วนหน้าของคุณควบคู่ไปกับ API แบ็กเอนด์ของคุณ เมื่อเปิดใช้งานโฮสติ้งแบบคงที่ CLI จะนําทรัพย์สินที่คุณสร้างไปยัง Fabric และให้ URL โฮสติ้ง คุณสามารถกําหนดให้ผู้ใช้ลงชื่อเข้าใช้และมีสิทธิ์ในการดูแอป Fabric หรืออนุญาตให้เข้าถึงทรัพย์สินที่โฮสต์แบบไม่ระบุตัวตน

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

• โปรเจ็กต์ Fabric Apps ที่มีแอปพลิเคชันส่วนหน้า (ตัวอย่างเช่น React, Vue หรือ TypeScript วานิลลา)
• คําสั่งบิลด์ที่สร้างเอาต์พุตแบบคงที่ (ตัวอย่างเช่น npm run build)

วิธีการทํางานของโฮสติ้งแบบคงที่

เมื่อคุณปรับใช้โดยเปิดใช้งานโฮสติ้งแบบคงที่ CLI จะทําตามขั้นตอนเหล่านี้:

1. เรียกใช้คําสั่งบิลด์ที่กําหนดค่าไว้ (เช่น npm run build)
2. ตรวจสอบว่าโฟลเดอร์เอาต์พุตมีอยู่และประกอบด้วยไฟล์
3. จัดแพ็กเกจไฟล์ทั้งหมดลงในไฟล์ ZIP ที่บีบอัด (สูงสุด 100 MB)
4. อัปโหลดไฟล์เก็บถาวรไปยังโฮสต์ Fabric Apps
5. ใช้การตั้งค่าการเข้าถึงที่กําหนดค่าไว้และส่งคืน URL ของโฮสติ้ง

กําหนดค่าโฮสติ้งแบบคงที่

เพิ่ม staticHosting ส่วนใต้ services ไฟล์ของคุณ rayfin/rayfin.yml :

services:
  staticHosting:
    enabled: true
    folder: dist
    buildCommand: npm run build
    indexDocument: index.html
    assetAccess: protected

ตัวเลือกการกําหนดค่า

ตัวเลือก	จำเป็นต้องระบุ	ค่าเริ่มต้น	คำอธิบาย
enabled	ใข่	—	ตั้งค่าเป็น true เพื่อเปิดใช้งานโฮสติ้งแบบคงที่
folder	ใข่	—	โฟลเดอร์เอาต์พุตที่มีไฟล์คงที่ที่สร้างขึ้นสัมพันธ์กับ root.
root	ไม่ใช่	รากของ Project	ไดเรกทอรีรากของโครงการส่วนหน้า สัมพันธ์กับรากของโครงการ
buildCommand	ไม่ใช่	—	คําสั่งเชลล์เพื่อเรียกใช้ก่อนบรรจุภัณฑ์ (ตัวอย่างเช่น npm run build)
indexDocument	ไม่ใช่	—	เอกสารเริ่มต้นเพื่อให้บริการสําหรับการร้องขอไดเรกทอรี (เช่น index.html)
assetAccess	ไม่ใช่	protected สําหรับการติดตั้งแบบไม่โต้ตอบ	ควบคุมการเข้าถึงทรัพย์สินที่โฮสต์ ใช้เพื่อprotectedกําหนดให้ต้องลงชื่อเข้าใช้และขออนุญาตในการดูแอป Fabric หรือpublicใช้เพื่ออนุญาตให้เข้าถึงแบบไม่ระบุตัวตน

กําหนดค่าการเข้าถึงทรัพย์สินที่โฮสต์ไว้

ตั้งค่า assetAccess เป็นค่าใดค่าหนึ่งต่อไปนี้:

• protected- กําหนดให้ผู้ใช้ลงชื่อเข้าใช้และมีสิทธิ์ดูแอป Fabric ก่อนที่จะดึงทรัพย์สินที่โฮสต์ได้
• public - อนุญาตให้ใครก็ตามที่มี URL โฮสติ้งสามารถดึงทรัพย์สินที่โฮสต์ได้โดยไม่ต้องลงชื่อเข้าใช้

โฮสติ้งแบบป้องกันควบคุมการเข้าถึงไฟล์คงที่ที่ Fabric Apps ให้บริการ มันไม่ได้มาแทนที่การตรวจสอบสิทธิ์และการอนุญาตในแอปพลิเคชันหรือ API ของคุณ

การปรับใช้แบบโต้ตอบ npx rayfin up ครั้งแรกจะขอให้คุณเลือกการตั้งค่าการเข้าถึงหาก assetAccess ยังไม่ได้กําหนดค่า การปรับใช้แบบไม่โต้ตอบจะใช้protectedและบันทึกการตั้งค่านั้นเป็นrayfin.yml

หากต้องการเปลี่ยนการตั้งค่าการเข้าถึงหลังจากการปรับใช้ ให้อัปเดต assetAccessและรันการปรับใช้เต็มรูปแบบ:

npx rayfin up

คําสั่งนี้จะ npx rayfin up staticapp deploy อัปเดตเฉพาะเนื้อหาเท่านั้น มันไม่ได้เพิ่มค่าใหม่assetAccess

ตัวอย่างที่มีไดเรกทอรีส่วนหน้าแยกต่างหาก

หากโค้ดส่วนหน้าของคุณอยู่ในไดเรกทอรีย่อย:

services:
  staticHosting:
    enabled: true
    root: frontend
    folder: dist
    buildCommand: npm run build
    indexDocument: index.html
    assetAccess: protected

การกําหนดค่านี้จะแก้ไขเส้นทางเอาต์พุตเป็น<project-root>/frontend/dist

ปรับใช้เนื้อหาแบบคงที่

การปรับใช้เต็มรูปแบบ

เมื่อคุณเรียกใช้ npx rayfin upเนื้อหาแบบคงที่จะปรับใช้โดยอัตโนมัติโดยเป็นส่วนหนึ่งของการปรับใช้สแต็กเต็มรูปแบบ:

npx rayfin up

CLI สร้างส่วนหน้าของคุณ จัดแพ็คเกจเอาต์พุต และอัปโหลดควบคู่ไปกับการกําหนดค่าแบ็กเอนด์ของคุณ หลังจากปรับใช้ CLI จะพิมพ์ URL ของโฮสติ้งและเขียนลงในไฟล์ของคุณ.env.fabric-*เป็นVITE_RAYFIN_HOSTING_URL

การปรับใช้แบบคงที่แบบสแตนด์อโลน

ใช้ staticapp deploy คําสั่งย่อยเพื่อปรับใช้เฉพาะเนื้อหาแบบคงที่ของคุณใหม่โดยไม่ต้องรันการปรับใช้แบบเต็มอีกครั้ง:

npx rayfin up staticapp deploy

คําสั่งนี้มีประโยชน์เมื่อคุณเปลี่ยนเฉพาะโค้ดส่วนหน้าและต้องการรอบการวนซ้ําที่เร็วขึ้น

ข้ามขั้นตอนการสร้าง

หากคุณสร้างส่วนหน้าของคุณแล้วและต้องการปรับใช้เอาต์พุตที่มีอยู่โดยไม่ต้องสร้างใหม่:

npx rayfin up staticapp deploy --skip-build

เปิดใช้งานการบันทึกแบบอย่างละเอียด

แสดงผลลัพธ์โดยละเอียดระหว่างการปรับใช้:

npx rayfin up staticapp deploy --verbose

การกําหนดค่าการเรียกกลับการรับรองความถูกต้อง

เมื่อเปิดใช้งานทั้งการโฮสต์แบบคงที่และการรับรองความถูกต้อง Rayfin CLI จะลงทะเบียน URI การเรียกกลับการรับรองความถูกต้องโดยอัตโนมัติตาม URL โฮสติ้งของคุณ

ตัวอย่างเช่น หาก URL โฮสติ้งของคุณคือ https://example.webapp.comCLI จะเพิ่ม URI การเรียกกลับนี้:

services:
  auth:
    allowedRedirectUris:
      - http://localhost:5173
      - http://localhost:5173/auth/callback
      - https://example.webapp.com/auth/callback

คุณไม่จําเป็นต้องกําหนดค่า URI การเรียกกลับการตรวจสอบสิทธิ์ด้วยตนเอง CLI จะอัปเดตการกําหนดค่าและพุชระหว่างการปรับใช้

ขีดจํากัดขนาดการปรับใช้

• ไฟล์ ZIP ที่บีบอัดต้องมีขนาดไม่เกิน 100 MB
• CLI ใช้การบีบอัดสูงสุดเพื่อลดขนาดการอัปโหลด
• หากเอาต์พุตบิลด์ของคุณเกินขีดจํากัด ให้เพิ่มประสิทธิภาพเนื้อหาของคุณโดย:
  • การยกเว้นแผนที่ต้นทางจากบิลด์ที่ใช้งานจริง
  • การบีบอัดหรือลบรูปภาพและวิดีโอขนาดใหญ่
  • ย้ายไฟล์ไบนารีไปยังที่เก็บข้อมูล Fabric Apps แทนการรวมกลุ่ม

ตัวอย่างที่สมบูรณ์

การกําหนดค่าเต็มรูปแบบ rayfin.yml พร้อมเปิดใช้งานโฮสติ้งแบบคงที่ การรับรองความถูกต้อง และบริการข้อมูล:

id: my-app
name: my-app
version: 1.0.0
services:
  auth:
    enabled: true
    allowedRedirectUris:
      - http://localhost:5173
      - http://localhost:5173/auth/callback
    fabric:
      enabled: true
  data:
    enabled: true
    dialect: mssql
  staticHosting:
    enabled: true
    folder: dist
    buildCommand: npm run build
    indexDocument: index.html
    assetAccess: protected

ทดสอบในระบบท้องถิ่น

ก่อนปรับใช้ ให้ตรวจสอบว่าบิลด์แบบคงที่ทํางานในเครื่อง:

1. สร้างส่วนหน้าของคุณ:

   npm run build
   

2. ตรวจสอบว่าโฟลเดอร์เอาต์พุตมีไฟล์ที่คาดไว้:

   ls dist
   

3. ให้บริการไฟล์ที่สร้างขึ้นด้วยเซิร์ฟเวอร์แบบคงที่ในเครื่อง:

   npx serve dist
   

4. เปิด URL ที่พิมพ์โดยเซิร์ฟเวอร์และยืนยันว่าแอปพลิเคชันของคุณโหลดอย่างถูกต้อง

แก้ไขปัญหาการปรับใช้

ไม่พบโฟลเดอร์แบบคงที่

ถ้า CLI รายงานว่าไม่มีโฟลเดอร์แบบคงที่:

• ตรวจสอบว่า folder เส้นทางเข้า rayfin.yml ถูกต้องและสัมพันธ์กับ root (หรือรากของโปรเจ็กต์หาก root ไม่ได้ตั้งค่าไว้)
• ตรวจสอบให้แน่ใจว่าคําสั่งบิลด์ของคุณทํางานได้สําเร็จและสร้างผลลัพธ์ในไดเร็กทอรีที่คาดไว้

โฟลเดอร์คงที่ว่างเปล่า

โฟลเดอร์เอาต์พุตที่ว่างเปล่ามักจะหมายความว่าคําสั่งบิลด์ล้มเหลวหรือไม่สร้างเอาต์พุต เรียกใช้คําสั่งบิลด์ด้วยตนเองเพื่อตรวจสอบข้อผิดพลาด:

npm run build

การปรับใช้เกินขีดจํากัดขนาด

หาก ZIP เกิน 100 MB:

• ตรวจสอบผลลัพธ์บิลด์เพื่อหาไฟล์ที่ไม่จําเป็น (แผนที่ต้นทาง เนื้อหาการพัฒนา)
• กําหนดค่าบันเดิลของคุณเพื่อยกเว้นแผนที่ต้นทางในบิลด์ที่ใช้งานจริง
• ย้ายไฟล์ไบนารีขนาดใหญ่ไปยังที่เก็บข้อมูล Fabric Apps

ไม่มีการกําหนดค่าปลายทางระยะไกล

npx rayfin up staticapp deployคําสั่งต้องการการปรับใช้ระยะไกลที่มีอยู่ เรียกใช้ npx rayfin up ก่อนเพื่อกําหนดค่าปลายทางระยะไกล จากนั้นใช้สําหรับ staticapp deploy การอัปเดตในภายหลัง

เนื้อหาที่เกี่ยวข้อง

• ปรับใช้กับ Fabric
• กําหนดค่าการรับรองความถูกต้อง
• สร้างโปรเจ็กต์แรกของคุณ