ทำให้การปรับใช้ UI ที่คุณปรับแต่งเองเป็นอัตโนมัติด้วย GitHub Actions Workflow

ภูมิหลัง#

Logto เป็นตัวเลือกที่ดีกว่าของคุณสำหรับโซลูชันการจัดการตัวตนและการเข้าถึงของลูกค้า (CIAM) เมื่อไม่นานมานี้ เราได้เปิดตัวฟีเจอร์ "นำ UI ของคุณมาเอง" บน Logto Cloud ทำให้นักพัฒนาสามารถปรับแต่ง UI การลงชื่อเข้าใช้ได้อย่างเต็มที่

ใน บล็อกโพสต์ก่อนหน้านี้ เราได้ให้คำแนะนำทีละขั้นตอนในการสร้าง UI การลงชื่อเข้าใช้ของคุณเอง ซึ่งรวมถึง:

• การพัฒนาหน้าลงชื่อเข้าใช้ที่คุณปรับแต่งเองพร้อมตัวอย่างโค้ด
• การตั้งค่า @logto/tunnel CLI สำหรับดีบักในท้องถิ่น
• การสร้างและบีบอัดสินทรัพย์ UI ที่คุณปรับแต่งเอง
• การอัปโหลดแพ็กเกจซิปและปรับใช้ไปยัง Logto Cloud ผ่าน Console UI

อย่างไรก็ตาม ในฐานะนักพัฒนาซอฟต์แวร์ที่มีแนวคิด DevOps คุณอาจพบว่ากระบวนการนี้น่าเบื่อเมื่อต้องเปลี่ยนแปลงหน้าลงชื่อเข้าใช้ที่คุณปรับแต่งเอง มีวิธีใดที่ทำให้กระบวนการทั้งหมดเป็นอัตโนมัติหรือไม่?

เราได้ฟังข้อเสนอแนะของคุณ และยินดีที่จะแนะนำคำสั่งใหม่ deploy ใน @logto/tunnel คำสั่งนี้ช่วยให้คุณสามารถทำให้กระบวนการปรับใช้เป็นอัตโนมัติโดยการดำเนินการคำสั่งในเทอร์มินัล หรือผสานรวมมันเข้ากับ GitHub Actions Workflow ซึ่งมีประโยชน์อย่างยิ่งสำหรับการสร้าง CI/CD Pipeline ของคุณ มาดำดิ่งกันเถอะ!

สิ่งที่ต้องเตรียม#

ก่อนที่เราจะดำดิ่งสู่การตั้งค่า ให้แน่ใจว่าคุณมีสิ่งต่อไปนี้:

1. บัญชี Logto Cloud พร้อมแผนการสมัครสมาชิก
2. แอปพลิเคชันแบบ Machine-to-Machine ที่มีการอนุญาต Management API ในผู้เช่าของ Logto ของคุณ
3. โค้ดต้นฉบับของโครงการของคุณควรโฮสต์บน GitHub
4. ติดตั้งเครื่องมือ CLI @logto/tunnel เป็นการขึ้นต่อการพัฒนาในโครงการของคุณ

ขั้นตอนที่ 1: สร้าง GitHub Actions Workflow#

ในเก็บของ GitHub ของคุณ สร้างไฟล์ Workflow ใหม่ คุณสามารถทำได้โดยไปที่ .github/workflows/ และสร้างไฟล์ชื่อ deploy.yml.

คำอธิบายของ GitHub Actions Workflow#

• ทริกเกอร์: Workflow ถูกทริกเกอร์ทุกการพุชไปยังสาขาหลัก
• งาน: งาน Deploy ทำงานบนสภาพแวดล้อม Ubuntu ล่าสุด และจะดำเนินขั้นตอนดังต่อไปนี้
• ขั้นตอน:
  • เช็กเอาต์โค้ด: ขั้นตอนนี้จะทำการเช็กเอาต์โค้ดของที่เก็บของคุณ
  • ตั้งค่า Node.js: ขั้นตอนนี้ทำการตั้งค่าสภาพแวดล้อม Node.js
  • ติดตั้งการขึ้นต่อกัน: ขั้นตอนนี้ทำการติดตั้งการขึ้นต่อกันของโครงการของคุณ
  • สร้าง: ขั้นตอนนี้สร้างโค้ดต้นฉบับของโครงการของคุณให้เป็นสินทรัพย์ html. มาลองสมมุติว่าชื่อของโฟลเดอร์เอาต์พุตคือ dist ในไดเรกทอรีหลัก
  • ปรับใช้ไปยัง Logto Cloud: ขั้นตอนนี้ดำเนินคำสั่ง CLI ของ Tunnel เพื่อปรับใช้สินทรัพย์ html ในไดเรกทอรี ./dist ไปยังสมาชิก Logto Cloud ของคุณ. ใช้ตัวแปรสิ่งแวดล้อมสำหรับข้อมูลที่ละเอียดอ่อน

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ GitHub Actions ดูที่ เอกสาร GitHub Actions.

ขั้นตอนที่ 2: กำหนดค่าความลับของ Action ใน GitHub#

เพื่อความปลอดภัยของข้อมูลรับรองของคุณ คุณควรเก็บมันไว้เป็นความลับในที่เก็บของ GitHub ของคุณ:

1. ไปที่ที่เก็บ GitHub ของคุณ
2. คลิกที่ "การตั้งค่า"
3. ไปที่ "ความลับและตัวแปร > การดำเนินการ"
4. คลิกที่ความลับของที่เก็บใหม่และเพิ่มความลับต่อไปนี้:

• LOGTO_AUTH: ข้อมูลรับรองแอปพลิเคชัน M2M ของ Logto ของคุณในรูปแบบ <m2m-app-id>:<m2m-app-secret>.
• LOGTO_ENDPOINT: ปลายทาง URI ของ Logto Cloud ของคุณ
• LOGTO_RESOURCE: ตัวบ่งชี้ทรัพยากร API การจัดการ Logto ของคุณ สามารถพบได้ใน "API resources -> Logto Management API" ต้องการถ้าเปิดใช้งานโดเมนที่กำหนดเองในผู้เช่า Logto Cloud ของคุณ

ขั้นตอนที่ 3: ทดสอบ Workflow ของคุณ#

เมื่อคุณตั้งค่า Workflow และกำหนดค่าความลับแล้ว คุณสามารถทดสอบได้โดยการรวม PR เข้ากับสาขาหลัก Workflow ของ GitHub Actions จะถูกทริกเกอร์โดยอัตโนมัติ และ UI การลงชื่อเข้าใช้ที่คุณปรับแต่งเองจะถูกปรับใช้ไปยัง Logto Cloud

บทสรุป#

ด้วยการผนวกคำสั่ง CLI @logto/tunnel เข้ากับ Workflow ของ GitHub Actions ของคุณ คุณสามารถทำให้การปรับใช้งาน UI การลงชื่อเข้าใช้ที่คุณปรับแต่งเองไปยัง Logto Cloud รวดเร็วขึ้นได้ การทำให้กระบวนการเป็นอัตโนมัติช่วยให้คุณมุ่งเน้นไปที่การพัฒนา ในขณะที่มั่นใจว่าการเปลี่ยนแปลงของคุณได้รับการทดสอบอย่างต่อเนื่องในสภาพแวดล้อมจริง

เขียนโค้ดให้สนุกนะ!