ทดสอบการติดตั้งใช้งานแอปในเครื่อง

คุณสามารถทำการทดสอบแอปในเครื่องก่อนApp Hostingการทำให้ใช้งานได้ โดยใช้App Hostingโปรแกรมจำลอง ซึ่งเป็นส่วนหนึ่งของชุดโปรแกรมจำลอง Firebase ในเครื่อง

ก่อนใช้App Hostingโปรแกรมจำลอง โปรดตรวจสอบว่าคุณเข้าใจLocal Emulator Suite เวิร์กโฟลว์โดยรวมของ Firebase และติดตั้งและกำหนดค่าLocal Emulator Suite รวมถึงตรวจสอบคำสั่ง CLI

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

ฉันใช้App Hostingโปรแกรมจำลองทำอะไรได้บ้าง

App Hostingโปรแกรมจำลองช่วยให้คุณทดสอบและปรับแต่งเว็บแอปพลิเคชัน ในเครื่องได้ ซึ่งจะช่วยเพิ่มประสิทธิภาพกระบวนการพัฒนาและปรับปรุงคุณภาพ ของเว็บแอปที่สร้างขึ้นโดยใช้ Firebase และติดตั้งใช้งานใน App Hosting

โปรแกรมจำลอง App Hosting

  1. ช่วยให้คุณเรียกใช้เว็บแอปในเครื่องได้โดยใช้ตัวแปรสภาพแวดล้อมและข้อมูลลับ ที่กำหนดไว้ในapphosting.yamlไฟล์กำหนดค่า
  2. สามารถลบล้างตัวแปรสภาพแวดล้อมและข้อมูลลับเพื่อใช้ในโปรแกรมจำลองด้วยไฟล์ apphosting.emulator.yaml
  3. นำมาใช้ควบคู่กับโปรแกรมจำลอง Firebase อื่นๆ ได้ หากคุณใช้ Firestore, Auth หรือโปรแกรมจำลองอื่นๆ Local Emulator Suite จะช่วยให้มั่นใจได้ ว่าโปรแกรมจำลองเหล่านี้จะเริ่มทำงานก่อนโปรแกรมจำลอง App Hosting

กำหนดค่าโปรแกรมจำลอง

หากต้องการเริ่มต้นใช้งาน ให้ติดตั้งและเริ่มต้น Local Emulator Suite ตามที่อธิบายไว้ ในติดตั้ง กำหนดค่า และผสานรวม Local Emulator Suite นอกจากโปรแกรมจำลอง Firebase อื่นๆ ที่ต้องการตั้งค่าแล้ว ให้เลือก App Hosting Emulator ด้วย CLI จะแจ้งให้คุณระบุApp Hostingค่าโปรแกรมจำลอง ซึ่งรวมถึงค่าต่อไปนี้

  • ไดเรกทอรีรูทของแอปที่สัมพันธ์กับโปรเจ็กต์ ซึ่งมีความสำคัญหากคุณใช้ monorepos กับ App Hosting
  • ไม่ว่าคุณจะต้องการลบล้างค่าใดๆ สำหรับการพัฒนาในเครื่องหรือไม่
  • ไม่ว่าคุณจะต้องการให้สิทธิ์เข้าถึงข้อมูลลับแก่เพื่อนร่วมทีมสำหรับการพัฒนาในเครื่องหรือไม่
firebase init emulators
=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ App Hosting Emulator
 ◯ Firestore Emulator
 ◯ Database Emulator
 ◯ Hosting Emulator
 ◯ Pub/Sub Emulator
 ◯ Storage Emulator
 ◯ Eventarc Emulator
(Move up and down to reveal more choices)

? Specify your app's root directory relative to your project (./)

? The App Hosting emulator uses a file called apphosting.emulator.yaml to
override values in apphosting.yaml for local testing. This codebase does not
have one, would you like to create it? (Y/n)

? Which environment variables would you like to override? (Press <space> to
select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ MEMCACHE_ADDR
 ◯ API_KEY

? What new value would you like for plaintext MEMCACHE_ADDR?

? What would you like to name the secret reference for API_KEY? (test-api-key)

? What new value would you like for secret TESTKEY [input is hidden]? [input is hidden]

? Your config has secret values. Please provide a comma-separated list of users
or groups who should have access to secrets for local development:

✔  Successfully set IAM bindings on secret test-api-key.

ระบบจะใช้ค่าที่คุณระบุในขั้นตอนการตั้งค่านี้เพื่ออัปเดต App Hostingการกำหนดค่าโปรแกรมจำลองใน firebase.json นอกจากนี้ คุณยัง กำหนดค่าโปรแกรมจำลอง App Hosting ได้โดยการอัปเดต firebase.json โดยตรง สคีมาสำหรับโปรแกรมจำลอง App Hosting มีดังนี้

{
  ...
  "emulators": {
    "apphosting": {
      "startCommand": <command> [optional],
      "rootDirectory": <path> [optional]
    }
  }
}
  • ระบบจะสร้างและตั้งค่า startCommand โดยอัตโนมัติเมื่อเริ่มต้นโปรแกรมจำลอง หากไม่ได้ระบุไว้ โปรแกรมจำลองจะตรวจหาและเรียกใช้คำสั่งสำหรับนักพัฒนาซอฟต์แวร์ของ เครื่องมือจัดการแพ็กเกจ
  • rootDirectory ใช้เพื่อรองรับการตั้งค่าโปรเจ็กต์ Monorepo หากเว็บแอปอยู่ในไดเรกทอรีย่อย คุณต้องระบุเส้นทางของไดเรกทอรีนั้น เทียบกับรูท (ตำแหน่งของ firebase.json)

จัดการการจำลอง

การเริ่มต้นโปรแกรมจำลองจะสร้างไฟล์ apphosting.emulator.yaml ใน ไดเรกทอรีรากของแอป ไฟล์การกำหนดค่านี้มีสคีมาเดียวกันกับไฟล์ apphosting.yaml ที่ใช้ใน การผลิต แต่มีไว้สำหรับการพัฒนาในเครื่องโดยเฉพาะ โดยค่าเริ่มต้น โปรแกรมจำลองจะอ่านการกำหนดค่าจากไฟล์ apphosting.yaml แต่หากมีไฟล์ apphosting.emulator.yaml ระบบจะจัดลำดับความสำคัญและให้สิทธิ์การกำหนดค่าในไฟล์นั้น

apphosting.emulator.yaml ไฟล์นี้ออกแบบมาให้ปลอดภัยต่อการคอมมิตและแชร์ กับเพื่อนร่วมงาน ตัวแปรสภาพแวดล้อมใดๆ ที่เป็นข้อมูลลับใน apphosting.yaml จะต้องเป็นข้อมูลลับใน apphosting.emulator.yaml ด้วย เพื่อช่วยให้มั่นใจว่าคุณจะไม่ส่งข้อมูลที่ละเอียดอ่อนไปยัง ที่เก็บแหล่งที่มาโดยไม่ได้ตั้งใจ หากไม่จำเป็นต้องเปลี่ยน Secret ระหว่างการใช้งานจริงกับการพัฒนาในเครื่อง (เช่น คีย์ API ของ Gemini) คุณก็ไม่จำเป็นต้องเพิ่ม Secret ลงใน apphosting.emulator.yaml แต่ให้ให้สิทธิ์เข้าถึง Secret แก่ทีมแทน

หากแอปพลิเคชันใช้ Secret จำนวนมาก (เช่น คีย์ API สำหรับบริการ 3 รายการที่แตกต่างกัน โดยมีค่าที่แตกต่างกันสำหรับแต่ละการผลิต การจัดเตรียม และการพัฒนาในเครื่อง) คุณอาจใช้เกินระดับฟรีของ Cloud Secret Manager และต้องจ่าย $0.06 ต่อ Secret เพิ่มเติมต่อเดือน หากต้องการจัดการการกำหนดค่าในเครื่อง ภายนอกการควบคุมแหล่งที่มาเพื่อหลีกเลี่ยงค่าธรรมเนียมนี้ คุณสามารถใช้ไฟล์ apphosting.local.yaml เดิมได้ ซึ่งต่างจาก apphosting.emulator.yaml ไฟล์นี้ ได้รับอนุญาตให้ระบุค่าข้อความธรรมดาสำหรับตัวแปรสภาพแวดล้อมที่เป็นค่าลับ ใน apphosting.yaml

ให้สิทธิ์ผู้ใช้หรือกลุ่มเข้าถึงข้อมูลลับ

ระบบจะอ่านข้อมูลลับที่จัดเก็บไว้ใน apphosting.emulator.yaml เมื่อโปรแกรมจำลองเริ่มทำงาน ซึ่งหมายความว่าทีมพัฒนาของคุณต้องมีสิทธิ์เข้าถึงข้อมูลลับ คุณสามารถใช้คำสั่ง apphosting:secrets:grantaccess เพื่อให้สิทธิ์เข้าถึงข้อมูลลับแก่ผู้ใช้หรือกลุ่มทางอีเมลได้

firebase apphosting:secrets:grantaccess test-api-key --emails my-team@my-company.com

หากเป็นไปได้ ให้พิจารณาใช้คีย์ทดสอบเท่านั้นใน apphosting.emulator.yaml ที่ไม่มีสิทธิ์เข้าถึงข้อมูลการผลิต ไม่มีผลข้างเคียงทั่วโลก (ส่งอีเมล เรียกเก็บเงินจากบัตรเครดิต) หรือมีโควต้าต่ำกว่า ซึ่งจะช่วย ให้มั่นใจว่าโค้ดที่ยังไม่ได้รับการตรวจสอบจะส่งผลกระทบในโลกจริงน้อยลง

พิจารณาใช้ Google Groups เพื่อจัดการสิทธิ์เข้าถึงข้อมูลลับแทนการให้สิทธิ์เข้าถึงแก่ผู้ใช้แต่ละราย ซึ่งจะช่วยให้การเริ่มต้นใช้งานสำหรับสมาชิกใหม่ในทีมพัฒนาซอฟต์แวร์ของคุณง่ายขึ้น เนื่องจากเมื่อเพิ่มสมาชิกใหม่ลงในกลุ่ม สมาชิกใหม่จะได้รับสิทธิ์เข้าถึงข้อมูลลับทั้งหมดที่จำเป็น คุณอาจมีกลุ่มที่เหมาะสมอยู่แล้วซึ่งนักพัฒนาแอปใช้สื่อสารกัน การควบคุมการเข้าถึงด้วย Google Groups ยังช่วยให้มั่นใจได้ว่านักพัฒนาแอปที่ออกจากทีมจะเสียสิทธิ์เข้าถึงข้อมูลลับทั้งหมดเมื่อถูกนำออกจากกลุ่มอีเมล หากข้อมูลลับมีสิทธิ์เข้าถึงข้อมูลการผลิต หรือผลข้างเคียงในโลกแห่งความเป็นจริง คุณอาจยังคงต้องหมุนเวียนคีย์และ กำหนดค่าใหม่ด้วย firebase apphosting:secrets:set

เรียกใช้โปรแกรมจำลอง

firebase emulators:start

ซึ่งจะเริ่มโปรแกรมจำลองทั้งหมดที่กำหนดไว้ในไฟล์ firebase.json รวมถึง โปรแกรมจำลอง App Hosting

กำหนดค่าคำสั่ง start สำหรับแอป Angular

หากคำสั่ง start ของโปรแกรมจำลองหมดเวลา แสดงว่าเซิร์ฟเวอร์การพัฒนา Angular อาจให้บริการแอปในพอร์ตอื่นที่ไม่ใช่พอร์ตที่โปรแกรมจำลอง App Hosting คาดไว้ คุณแก้ปัญหานี้ได้โดยการเพิ่มการกำหนดค่าเพิ่มเติมบางอย่างใน firebase.json ดังนี้

  • ตั้งค่า emulators.apphosting.startCommand เป็น ng serve
  • หากต้องการใช้พอร์ตที่ไม่ใช่ค่าเริ่มต้น ให้ตั้งค่าด้วย emulators.apphosting.port (แทนการเพิ่มแฟล็ก --port ไปยัง ng serve ใน emulators.apphosting.startCommand)

เช่น

"emulators": {
    "apphosting": {
      "port": 5002,
      "rootDirectory": "./test-app",
      "startCommand": "ng serve"
    },
    "ui": {
      "enabled": true
    },
    ...
  }