ทำให้แอปใช้งานได้รวดเร็วด้วย Application Design Center

1. บทนำ

ใน Codelab นี้ คุณจะได้เรียนรู้วิธีติดตั้งใช้งานแอปพลิเคชันแบบ Full-Stack โดยใช้ Application Design Center (ADC) ของ Google Cloud คุณจะติดตั้งใช้งานแอปพลิเคชัน "The Cymbal London Concierge" ซึ่งมีส่วนหน้า Vue 3, ส่วนหลัง FastAPI และเซิร์ฟเวอร์ MCP ที่เก็บข้อมูลสำหรับแอปพลิเคชัน

ADC ช่วยให้คุณกำหนดสถาปัตยกรรมของแอปพลิเคชันได้ด้วยภาพและทำให้ใช้งานได้เป็นหน่วยเดียว โดยจะจัดการการอ้างอิงและการเชื่อมต่อโดยอัตโนมัติ

สิ่งที่คุณต้องดำเนินการ

  • ตั้งค่า Application Design Center
  • ประกอบคอมโพเนนต์ของแอปพลิเคชันด้วยภาพ
  • ทําให้สถาปัตยกรรมแอปพลิเคชันใช้งานได้
  • ยืนยันแอปพลิเคชันที่กำลังทำงาน
  • ตรวจสอบว่าได้ลงทะเบียนแอปพลิเคชันกับ App Hub แล้ว
  • ยืนยันเมตริก ร่องรอย และบันทึกของแอปพลิเคชันในการตรวจสอบแอปพลิเคชัน

สิ่งที่คุณต้องมี

  • เว็บเบราว์เซอร์ เช่น Chrome
  • โปรเจ็กต์ Google Cloud ที่เปิดใช้การเรียกเก็บเงิน

Codelab นี้มีไว้สำหรับนักพัฒนาซอฟต์แวร์ทุกระดับ รวมถึงผู้เริ่มต้น

ระยะเวลาโดยประมาณ: 45 นาที ค่าใช้จ่ายโดยประมาณ: ไม่เกิน $2.00 USD

2. ตั้งค่า

การตั้งค่าโปรเจ็กต์

สร้างโปรเจ็กต์ Google Cloud

  1. ในคอนโซล Google Cloud ในหน้าตัวเลือกโปรเจ็กต์ ให้เลือกหรือสร้างโปรเจ็กต์ Google Cloud
  2. ตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินสำหรับโปรเจ็กต์ที่อยู่ในระบบคลาวด์แล้ว ดูวิธีตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินในโปรเจ็กต์แล้วหรือไม่

เริ่มต้น Cloud Shell

Cloud Shell คือสภาพแวดล้อมบรรทัดคำสั่งที่ทำงานใน Google Cloud ซึ่งโหลดเครื่องมือที่จำเป็นไว้ล่วงหน้า

  1. คลิกเปิดใช้งาน Cloud Shell ที่ด้านบนของคอนโซล Google Cloud
  2. เมื่อเชื่อมต่อกับ Cloud Shell แล้ว ให้ยืนยันการตรวจสอบสิทธิ์โดยทำดังนี้
    gcloud auth list
  3. ตรวจสอบว่าได้กำหนดค่าโปรเจ็กต์แล้ว
    gcloud config get project
  4. หากไม่ได้ตั้งค่าโปรเจ็กต์ตามที่คาดไว้ ให้ตั้งค่าดังนี้
    export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

3. ตั้งค่า Application Design Center

คุณต้องตั้งค่าพื้นที่ทำงานใน ADC ก่อนจึงจะรวบรวมแอปพลิเคชันได้

  1. ใน คอนโซล Google Cloud ให้ค้นหา Application Design Center แล้วไปที่ส่วนดังกล่าว
  2. หากใช้ ADC ในโปรเจ็กต์นี้เป็นครั้งแรก คุณจะเห็นหน้าจอการตั้งค่า
  3. คลิกไปที่การตั้งค่า

ตั้งค่า Application Design Center

  1. ระบบจะแจ้งให้คุณเปิดใช้ API ที่จำเป็นหากยังไม่ได้เปิดใช้ คลิกเปิดใช้เพื่อดำเนินการต่อ

เปิดใช้ API

4. สำรวจฟีเจอร์ของ ADC

ในงานนี้ คุณจะได้เรียนรู้คอมโพเนนต์หลักของ ADC ได้แก่ พื้นที่ แคตตาล็อก และเทมเพลต

ADC Spaces

Space เป็นที่สำหรับสร้างเทมเพลตและติดตั้งใช้งานแอป แต่ละพื้นที่ทำงานจะเป็นของโปรเจ็กต์ Google Cloud ADC จะสร้างพื้นที่เริ่มต้นในระหว่างการตั้งค่าครั้งแรก แต่คุณสามารถสร้างพื้นที่อื่นๆ ในภูมิภาคต่างๆ ได้ในภายหลัง

หากต้องการดูพื้นที่ผ่านเทอร์มินัล ให้ทำตามขั้นตอนต่อไปนี้

  1. คลิกเปิดตัวแก้ไขในแถบเครื่องมือ Cloud Shell หรือใช้เทอร์มินัล
  2. เรียกใช้คำสั่งต่อไปนี้
gcloud alpha design-center spaces list \
--project="your PROJECT ID" \
--location=us-central1

คุณควรเห็นเอาต์พุตที่มีลักษณะดังนี้ ซึ่งบ่งบอกว่ามีพื้นที่เริ่มต้นสำหรับภูมิภาค

createTime: '20XXXX-XX-XXT09:19:29.456016967Z'
displayName: default-space
enableGcpSharedTemplates: true
name: projects/your-project-id/locations/us-central1/spaces/default-space

5. ประกอบเทมเพลต

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

1. สร้างดีไซน์ใหม่

  1. ในคอนโซล ADC ให้คลิกเทมเพลต > สร้างเทมเพลต
  2. ตั้งชื่อเทมเพลตว่า simple-3-tier-agentic-app เนื่องจากเทมเพลตนี้จะใช้เพื่อติดตั้งใช้งานแอปพลิเคชัน Cymbal London Concierge และแอปพลิเคชันอื่นๆ ที่คล้ายกันสร้างเทมเพลต

2. เพิ่มเซิร์ฟเวอร์ MCP ของข้อมูล

คอมโพเนนต์นี้จัดการการโต้ตอบกับฐานข้อมูลและการค้นหาเวกเตอร์

  1. คลิกเพิ่มคอมโพเนนต์ > Cloud Run (บริการ) หากคลิกคอมโพเนนต์ดังกล่าว คุณจะเห็นรหัสคอมโพเนนต์ที่มุมขวาบน ซึ่งจะอยู่ในรูปแบบ cloud-run-1 เราสามารถเปลี่ยนเป็น data-mcp-server ได้โดยแก้ไขในมุมมองโค้ด (จะกล่าวถึงในภายหลัง) แต่เราจะปล่อยให้เป็นแบบนี้ก่อนเพิ่มคอมโพเนนต์
  2. ป้อนชื่อบริการ: data-mcp-server
  3. ในส่วนแสดงการตั้งค่าขั้นสูง ให้ตั้งค่าสมาชิกเป็น allUsers (หมายเหตุ: ในสภาพแวดล้อมการผลิต คุณอาจจำกัดการเข้าถึงนี้ แต่เราใช้ที่นี่เพื่อให้ Codelab ทำได้ง่าย)
  4. ในส่วนแสดงการตั้งค่าขั้นสูง ให้ตั้งค่าการเข้าถึง VPC และตั้งค่าขาออกเป็น PRIVATE_RANGES_ONLY
  5. คุณเลือกยกเลิกการเลือกเปิดใช้ Sidecar ของ Prometheus ได้ในส่วนแสดงการตั้งค่าขั้นสูงการเข้าถึง VPC
  6. คลิกบันทึก

3. เพิ่มแบ็กเอนด์ของ Agent

นี่คือแอปพลิเคชัน FastAPI ที่จัดระเบียบพฤติกรรมของเอเจนต์

  1. คลิกเพิ่มคอมโพเนนต์ > Cloud Run (บริการ)
  2. ตั้งชื่อว่า agent-backend
  3. ในส่วนแสดงช่องขั้นสูง ให้เลือกสร้างบัญชีบริการ แล้วเพิ่มบทบาทต่อไปนี้ทีละรายการในส่วนบทบาทของโปรเจ็กต์บัญชีบริการ
    • roles/monitoring.metricWriter
    • roles/logging.logWriter
    • roles/cloudtrace.agent
    • roles/telemetry.writer
    • roles/serviceusage.serviceUsageConsumer บทบาทเหล่านี้จะช่วยให้ Agent ใช้ Cloud Monitoring, Cloud Logging และ Cloud Trace ได้ การกำหนดค่าการปฏิบัติตามข้อกำหนด: ทีมแพลตฟอร์มบังคับใช้หลักการให้สิทธิ์ขั้นต่ำที่สุดโดยระบุบทบาทที่จำเป็นอย่างชัดเจน
    บทบาท
  4. ในส่วนแสดงการตั้งค่าขั้นสูง ให้ตั้งค่าสมาชิกเป็น allUsers
  5. ในส่วนแสดงการตั้งค่าขั้นสูง ให้ตั้งค่าการเข้าถึง VPC และตั้งค่าขาออกเป็น PRIVATE_RANGES_ONLY
  6. คุณเลือกยกเลิกการเลือกเปิดใช้ Prometheus Sidecar ในส่วนแสดงการตั้งค่าขั้นสูงได้
  7. เชื่อมต่อ agent-backend กับ data-mcp-server โดยลากการเชื่อมต่อจาก agent-backend ไปยัง data-mcp-server
  8. คลิกบันทึก

4. เพิ่มฟรอนท์เอนด์

UI ส่วนหน้า

  1. คลิกเพิ่มคอมโพเนนต์ > Cloud Run (บริการ)
  2. ป้อนชื่อบริการ: frontend
  3. ในส่วนแสดงการตั้งค่าขั้นสูง ให้ยกเลิกการเลือกสร้างบัญชีบริการ
  4. ในส่วนแสดงการตั้งค่าขั้นสูง ให้ตั้งค่า Ingress เป็น INGRESS_TRAFFIC_INTERNAL_LOADBALANCER การกำหนดค่าการปฏิบัติตามข้อกำหนด: ระบบจะบล็อกการเข้าถึงแบบสาธารณะโดยตรงไปยังคอนเทนเนอร์ฟรอนท์เอนด์ ซึ่งบังคับให้การรับส่งข้อมูลผ่านตัวจัดสรรภาระงาน
  5. ในส่วนแสดงการตั้งค่าขั้นสูง ให้ตั้งค่าสมาชิกเป็น allUsersฟรอนท์เอนด์
  6. คุณเลือกยกเลิกการเลือกเปิดใช้ Prometheus Sidecar ในส่วนแสดงการตั้งค่าขั้นสูงได้
  7. คลิกบันทึก
  8. เชื่อมต่อ frontend กับ agent-backend โดยลากการเชื่อมต่อจาก frontend ไปยัง agent-backend

5. เพิ่มคอมโพเนนต์ Vertex AI

  1. คลิกเพิ่มคอมโพเนนต์ > Vertex AI
  2. ตั้งชื่อว่า vertex-ai
  3. เชื่อมต่อกับ agent-backend และ data-mcp-server โดยลากการเชื่อมต่อ 2 รายการจาก vertex-ai ไปยัง agent-backend และ data-mcp-server ตามลำดับ ระบบจะกำหนดบทบาท aiplatform.user ให้กับบัญชีบริการของ agent-backend และ data-mcp-server อยู่แล้วเนื่องจากมีการเชื่อมต่อกับคอมโพเนนต์ Vertex AI

6. เพิ่มตัวจัดสรรภาระงานส่วนกลาง

ตัวจัดสรรภาระงานจะแสดงส่วนหน้าต่ออินเทอร์เน็ตสาธารณะ ใน ADC จะแบ่งออกเป็นคอมโพเนนต์แบ็กเอนด์และคอมโพเนนต์ฟรอนต์เอนด์

ก. เพิ่มแบ็กเอนด์ตัวจัดสรรภาระงาน

  1. คลิก **Add Component > Global Cloud Load Balancing (Backend)
  2. ตั้งชื่อว่า galb-backend
  3. คลิกเพิ่มการเชื่อมต่อและเชื่อมต่อกับ frontend

ข. เพิ่มฟรอนท์เอนด์ของตัวจัดสรรภาระงาน

  1. คลิก **Add Component > Global Cloud Load Balancing (Frontend)
  2. ตั้งชื่อว่า galb-frontend
  3. คลิกเพิ่มการเชื่อมต่อและเชื่อมต่อกับ galb-backend
  4. เชื่อมต่อ galb-frontend กับ galb-backend โดยลากการเชื่อมต่อจาก galb-frontend ไปยัง galb-backend

เทมเพลตแอป

แชร์เทมเพลตในแคตตาล็อก

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

จากนั้นเพิ่มเทมเพลตลงในแคตตาล็อก โดยทำดังนี้

  1. คลิกแท็บแคตตาล็อก
  2. คลิกเพิ่มเทมเพลต แล้วเลือกเทมเพลต simple-3-tier-agentic-app
  3. คลิกเพิ่มลงในแคตตาล็อกเพิ่มลงในแคตตาล็อก

คุณดูเทมเพลตได้ 3 ที่ ได้แก่ เทมเพลตของ Google (รูปแบบที่กำหนดไว้ล่วงหน้า), เทมเพลตที่แชร์ (แชร์ในองค์กร) และเทมเพลต (พิมพ์เขียวที่กำหนดเองในพื้นที่)

6. ติดตั้งใช้งานแอปพลิเคชัน

ตอนนี้ถึงเวลาสวมบทบาทเป็นนักพัฒนาแอปที่ต้องการใช้เทมเพลตนี้เพื่อติดตั้งใช้งานแอปพลิเคชัน cymbal-london-concierge

  1. ในคอนโซล ADC ให้เปิดเทมเพลตอีกครั้งในแท็บเทมเพลต แล้วคลิกปุ่มกำหนดค่าแอปกำหนดค่าแอป
  2. คลิกสร้างแอปพลิเคชันใหม่
  3. กำหนดค่าแอปพลิเคชัน
    • ชื่อแอปพลิเคชัน: cymbal-london-concierge
    • โปรเจ็กต์การติดตั้งใช้งาน: รหัสโปรเจ็กต์
    • ภูมิภาค: us-central1
    • แอตทริบิวต์อินพุต>สภาพแวดล้อม: Development
    • แอตทริบิวต์อินพุต>ความสำคัญ: Low
  4. คลิกสร้างแอปพลิเคชัน สำหรับการติดตั้งใช้งานจริง ให้เลือก "เวอร์ชันที่ใช้งานจริง" สำหรับสภาพแวดล้อม และ "สูง" สำหรับความสำคัญ แท็กเหล่านี้จะช่วยให้ทีม SRE และทีมปฏิบัติการจัดเรียงและจัดลำดับความสำคัญของงานเกี่ยวกับปัญหาที่เกิดขึ้นได้
  5. ซึ่งจะเปิดหน้ารายละเอียดการติดตั้งใช้งานพร้อมเทมเพลตแอปพลิเคชัน เนื่องจากนี่เป็นเพียงเทมเพลต เราจึงยังคงต้องเพิ่มการกำหนดค่าที่เฉพาะเจาะจงกับแอปพลิเคชันของเรา
  6. มากำหนดค่าฟรอนท์เอนด์กัน คลิกคอมโพเนนต์ฟรอนท์เอนด์
    1. คลิกคอนเทนเนอร์ > แก้ไขคอนเทนเนอร์
    2. เราต้องแทนที่อิมเมจคอนเทนเนอร์ทั่วไปด้วยอิมเมจที่เราต้องการใช้กับแอปพลิเคชัน
    3. ตั้งค่าอิมเมจคอนเทนเนอร์เป็น us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/frontend:codelab-c2c6-v1การเปลี่ยนอิมเมจคอนเทนเนอร์
    4. ตั้งค่าพอร์ต http1 เป็น 80
    5. ตั้งค่าตัวแปรสภาพแวดล้อมต่อไปนี้
      • API_BASE_URL: module.cloud-run-2.service_uri (ตรวจสอบว่า cloud-run-2 เป็นชื่อของคอมโพเนนต์แบ็กเอนด์ของ Agent หากไม่ใช่ ให้แทนที่ด้วยชื่อจริงของคอมโพเนนต์)
    6. คลิกบันทึก
  7. มากำหนดค่าแบ็กเอนด์ของ Agent กัน คลิกคอมโพเนนต์ agent-backend
    1. คลิกคอนเทนเนอร์ > แก้ไขคอนเทนเนอร์
    2. เราต้องแทนที่อิมเมจคอนเทนเนอร์ทั่วไปด้วยอิมเมจที่เราต้องการใช้กับแอปพลิเคชัน
    3. ตั้งค่าอิมเมจคอนเทนเนอร์เป็น us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/agent:codelab-c2c6-v1
    4. ตั้งค่าตัวแปรสภาพแวดล้อมต่อไปนี้
    5. GOOGLE_CLOUD_PROJECT:
    6. GOOGLE_CLOUD_LOCATION: us-central1
    7. DATA_BACKEND_URL: module.cloud-run-1.service_uri (ตรวจสอบว่า cloud-run-1 เป็นชื่อของคอมโพเนนต์เซิร์ฟเวอร์ mcp ของข้อมูล หากไม่ใช่ ให้แทนที่ด้วยชื่อจริงของคอมโพเนนต์)
    8. ตั้งค่าพอร์ต http1 เป็น 8000
    9. คลิกบันทึก
  8. มากำหนดค่าเซิร์ฟเวอร์ MCP ของข้อมูลกัน คลิกคอมโพเนนต์ data-mcp-server
    1. คลิกคอนเทนเนอร์ > แก้ไขคอนเทนเนอร์
    2. เราต้องแทนที่อิมเมจคอนเทนเนอร์ทั่วไปด้วยอิมเมจที่เราต้องการใช้กับแอปพลิเคชัน
    3. ตั้งค่าอิมเมจคอนเทนเนอร์เป็น us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/data_mcp:codelab-c2c6-v1
    4. ตั้งค่าตัวแปรสภาพแวดล้อมต่อไปนี้
    5. GOOGLE_CLOUD_PROJECT:
    6. GOOGLE_CLOUD_LOCATION: us-central1
    7. DB_TYPE: sqlite
    8. EMBEDDING_MODEL: text-embedding-005
    9. ตั้งค่าพอร์ต http1 เป็น 8002
    10. คลิกบันทึก
    ในสถานการณ์การใช้งานจริง คุณจะต้องกำหนดค่าฐานข้อมูล เช่น CloudSQL หรือ AlloyDB และระบุสตริงการเชื่อมต่อฐานข้อมูลสำหรับเซิร์ฟเวอร์ mcp ของข้อมูลด้วย แต่สำหรับแล็บนี้ เราจะใช้ฐานข้อมูลในหน่วยความจำ นอกจากนี้ คุณยังทำให้เซิร์ฟเวอร์ mcp และฐานข้อมูลเป็นแบบส่วนตัวและเข้าถึงได้จากแบ็กเอนด์ของตัวแทนหรือภายในเครือข่ายเท่านั้น
  9. คลิกปุ่มโค้ดที่ด้านบนของหน้าเพื่อดูโค้ด Terraform สำหรับแอปพลิเคชัน นอกจากนี้ คุณยังดาวน์โหลดโค้ด Terraform สำหรับแอปพลิเคชันได้โดยคลิกปุ่มรับโค้ดเพื่อจัดเก็บไว้ในฐานของโค้ดเทมเพลตแอป
  10. คลิกปุ่มติดตั้งใช้งานที่มุมขวาบนของหน้าเพื่อติดตั้งใช้งานแอปพลิเคชัน
  11. หน้าการติดตั้งใช้งานจะขอให้คุณสร้างบัญชีบริการสำหรับไปป์ไลน์การติดตั้งใช้งานหรือเลือกบัญชีที่มีอยู่ คลิกสร้างบัญชีบริการ (ระบบจะกรอกชื่อให้โดยอัตโนมัติ) แล้วคลิกดำเนินการต่อ ระบบจะใช้เวลาสักครู่เพื่อสร้างบัญชีบริการใหม่

สร้างบัญชีบริการ

  1. เมื่อสร้างบัญชีบริการแล้ว หน้าเว็บจะรีเฟรชและคุณจะเห็นบัญชีบริการที่เลือกพร้อมเครื่องหมายถูกข้างบัญชี

สร้างบัญชีบริการแล้ว

  1. จากนั้นคลิกติดตั้งใช้งานที่ด้านล่างของหน้า
  2. ซึ่งอาจใช้เวลาดำเนินการสักครู่ เมื่อการติดตั้งใช้งานเสร็จสมบูรณ์แล้ว คุณจะเห็นเครื่องหมายถูกสีเขียวข้างคอมโพเนนต์แต่ละรายการ นอกจากนี้ คุณยังตรวจสอบสถานะการทำให้ใช้งานได้โดยคลิกปุ่มลิงก์ไปยังบันทึก ซึ่งจะเปิดบันทึกการสร้างในระบบคลาวด์ ปุ่มอาจใช้เวลา 2-3 นาทีจึงจะปรากฏ
![Deployment Logs](./img/10b_logs.png)
  1. คุณสามารถดูบันทึกการบิลด์ในระบบคลาวด์เพื่อดูสถานะของการทำให้ใช้งานได้ หรือดูว่ามีข้อผิดพลาดใดๆ ที่อาจเกิดขึ้นขณะทำให้ใช้งานได้แอปพลิเคชันหรือไม่ นอกจากนี้ คุณยังไปที่บันทึกการสร้างใน Cloud ได้โดยตรงโดยค้นหา Cloud Build ในคอนโซล Google Cloud แล้วคลิกประวัติ การติดตั้งใช้งานแอปพลิเคชันจะใช้เวลาประมาณ 5-8 นาที
![Cloud Build](./img/10c_cloudbuild.png)
  1. เมื่อการติดตั้งใช้งานเสร็จสมบูรณ์แล้ว คุณจะเห็นเครื่องหมายถูกสีเขียวข้างช่องสถานะการติดตั้งใช้งาน
![Deployment Complete](./img/11_deployed.png)

7. ยืนยันแอปพลิเคชัน

มาทดสอบกันว่า Agent ยังทำงานอยู่หรือไม่ ในส่วนเอาต์พุตของหน้ารายละเอียดการทำให้ใช้งานได้ คุณจะเห็น URL ของคอมโพเนนต์ฟรอนท์เอนด์ คัดลอก URL ดังกล่าวแล้ววางลงในเบราว์เซอร์ ตรวจสอบว่าคุณใช้ http ไม่ใช่ https นอกจากนี้ ให้ยอมรับคำเตือนใดๆ ที่คุณอาจได้รับในเบราว์เซอร์เนื่องจากส่วนหน้าใช้ http

แชทกับแอปและขอให้แอปสร้างแผนการเดินทางไปลอนดอน

ฟรอนท์เอนด์

8. App Hub และการตรวจสอบแอปพลิเคชัน

  1. ในคอนโซล ADC ให้คลิกปุ่มดูแอปใน App Hub ที่มุมขวาบนของหน้า

ฮับแอป

  1. ซึ่งจะเปิดแอปใน App Hub App Hub เป็นศูนย์กลางสำหรับดูและจัดการแอปพลิเคชันทั้งหมด ซึ่งจะเปลี่ยนจากมุมมองที่เน้นทรัพยากรเป็นมุมมองที่เน้นแอปพลิเคชัน การสร้างแอปโดยใช้ ADC จะสร้างแอปใน App Hub โดยอัตโนมัติ คุณควรเห็นภาระงานและบริการทั้งหมดที่ประกอบกันเป็นแอปพลิเคชันแสดงอยู่ที่นี่ คุณสามารถดูทรัพยากรในระบบคลาวด์เป็นส่วนหนึ่งของแอปพลิเคชันเดียวแทนที่จะดูเป็นทรัพยากรแต่ละรายการ ซึ่งจะช่วยให้การจัดการและการกำกับดูแลง่ายขึ้น

ฮับแอป

  1. คลิกปุ่มดูใน Observability ซึ่งควรเปิดแอปพลิเคชันในคอนโซลความสามารถในการสังเกตได้
  2. เปิดมุมมองแดชบอร์ด แดชบอร์ดจะแสดงภาพรวมประสิทธิภาพและสถานะของแอปพลิเคชันโดยให้เมตริกต่างๆ เช่น สัญญาณทอง 4 อย่าง ได้แก่ อัตราการส่งคำขอ อัตราข้อผิดพลาด เวลาในการตอบสนอง และความอิ่มตัว การตรวจสอบที่เน้นแอปพลิเคชันนี้มีความสำคัญอย่างยิ่งต่อการรักษาความน่าเชื่อถือ นอกจากนี้ คุณยังดูบันทึกและการติดตามของแอปพลิเคชันได้ด้วย ซึ่งจะช่วยให้คุณเชื่อมโยงสัญญาณและระบุคอขวดได้ ซึ่งมีความสำคัญอย่างยิ่งในแอปพลิเคชันแบบเอเจนต์ที่ซับซ้อนเช่นนี้ ซึ่งการตอบกลับที่ช้าจาก Vertex AI หรือเซิร์ฟเวอร์ MCP ข้อมูลอาจทำให้ประสบการณ์ของผู้ใช้แย่ลง

หน้าแดชบอร์ด

  1. การสำรวจแบบมีคำแนะนำ: ถามคำถามที่เฉพาะเจาะจงกับตัวแทนในแอป (เช่น "สถานที่ที่ดีที่สุดในการเยี่ยมชมในลอนดอนคือที่ใด") จากนั้นกลับไปที่คอนโซลการสังเกตการณ์ แล้วดูรายการการติดตาม ค้นหาร่องรอยที่สอดคล้องกับคำขอของคุณ คลิกเพื่อดูมุมมองน้ำตกแบบละเอียด โปรดสังเกตว่าคุณจะเห็นเวลาที่ใช้ในส่วนหน้า ส่วนหลังของ Agent และการเรียกไปยัง Vertex AI ได้อย่างไร ซึ่งจะช่วยให้คุณระบุได้อย่างแม่นยำว่าเกิดเวลาในการตอบสนองที่ใด

9. ขอแสดงความยินดี

ยินดีด้วย คุณได้ติดตั้งใช้งานสถาปัตยกรรมแอปพลิเคชัน 3 ระดับโดยใช้ ADC

สิ่งที่คุณได้เรียนรู้

  • วิธีประกอบสถาปัตยกรรมระบบคลาวด์ด้วยภาพโดยใช้ ADC
  • วิธีกำหนดค่า ADC และเปิดใช้ API ผ่าน UI
  • วิธีติดตั้งใช้งานแอปพลิเคชันโดยใช้ ADC
  • วิธีใช้ App Hub เพื่อดูมุมมองที่เน้นแอปพลิเคชันเป็นหลักของทรัพยากร
  • วิธีตรวจสอบสถานะของแอปพลิเคชันโดยใช้แดชบอร์ดการสังเกตการณ์

เอกสารอ้างอิง