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

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

ก่อนที่จะใช้โปรแกรมจำลอง App Hosting โปรดตรวจสอบว่าคุณ เข้าใจ เวิร์กโฟลว์โดยรวมของ Firebase Local Emulator Suite และ ว่าคุณได้ติดตั้งและกำหนดค่า 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 ตรวจสอบว่าได้เลือก App Hosting Emulator นอกเหนือจากโปรแกรมจำลอง Firebase อื่นๆ ที่ต้องการตั้งค่า CLI จะแจ้งให้คุณป้อนค่าบางอย่างของโปรแกรมจำลอง App Hosting ซึ่งรวมถึง:

  • ไดเรกทอรีรากของแอปเทียบกับโปรเจ็กต์ ซึ่งมีความสำคัญหากคุณ ใช้ Monorepo กับ 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 โดยอัตโนมัติเมื่อเริ่มต้นใช้งานโปรแกรมจำลอง หากไม่ได้ระบุไว้ โปรแกรมจำลองจะตรวจหาและเรียกใช้คำสั่ง dev ของตัวจัดการแพ็กเกจ
  • ระบบจะใช้ rootDirectory เพื่อรองรับการตั้งค่าโปรเจ็กต์ Monorepo หากเว็บแอปอยู่ในไดเรกทอรีย่อย คุณต้องระบุเส้นทางของไดเรกทอรีนั้นเทียบกับราก (ตำแหน่งของ firebase.json)

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

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

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

หากแอปพลิเคชันใช้ข้อมูลลับจำนวนมาก (เช่น คีย์ API สำหรับบริการ 3 รายการที่แตกต่างกัน โดยมีค่าที่แตกต่างกันสำหรับการใช้งานจริง การจัดเตรียม และการพัฒนาในเครื่อง) คุณอาจใช้บริการระดับฟรีของ Cloud Secret Manager เกินขีดจำกัดและต้องชำระเงิน $0.06 ต่อข้อมูลลับเพิ่มเติมต่อเดือน หากต้องการจัดการการกำหนดค่าในเครื่องภายนอกการควบคุมแหล่งที่มาเพื่อหลีกเลี่ยงค่าธรรมเนียมนี้ คุณสามารถใช้ไฟล์ 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
    },
    ...
  }