Bạn có thể kiểm thử ứng dụng của mình ở môi trường cục bộ trước khi App Hosting triển khai bằng App Hosting trình mô phỏng (thuộc Bộ trình mô phỏng cục bộ Firebase) Suite.
Trước khi sử dụng trình mô phỏng App Hosting, hãy đảm bảo rằng bạn hiểu quy trình tổng thể của Firebase Local Emulator Suite workflow, đồng thời cài đặt và định cấu hình Local Emulator Suite cũng như xem các lệnh CLI của bộ này.
Chủ đề này giả định rằng bạn đã quen thuộc với App Hosting. Nếu cần, hãy xem phần giới thiệu về App Hosting và các tài liệu khác để giúp bạn hiểu cách App Hosting hoạt động.
Tôi có thể làm gì với trình mô phỏng App Hosting?
Trình mô phỏng App Hosting cho phép bạn kiểm thử và tinh chỉnh các ứng dụng web của mình ở môi trường cục bộ. Điều này có thể giúp bạn đơn giản hoá quy trình phát triển và nâng cao chất lượng của các ứng dụng web được tạo bằng Firebase và triển khai trên App Hosting.
Trình mô phỏng App Hosting:
- Cho phép bạn chạy ứng dụng web của mình ở môi trường cục bộ, với các biến môi trường và bí mật được xác định trong tệp cấu hình
apphosting.yaml. - Có thể ghi đè các biến môi trường và bí mật để sử dụng trong trình mô phỏng bằng tệp
apphosting.emulator.yaml. - Có thể được sử dụng cùng với các trình mô phỏng Firebase khác. Nếu bạn đang sử dụng Firestore, Auth hoặc bất kỳ trình mô phỏng nào khác, Local Emulator Suite đảm bảo rằng các trình mô phỏng này được khởi động trước trình mô phỏng App Hosting.
Định cấu hình trình mô phỏng
Để bắt đầu, hãy cài đặt và khởi động Local Emulator Suite như mô tả
trong Cài đặt, định cấu hình và tích hợp Bộ trình mô phỏng cục bộ
Suite. Ngoài mọi trình mô phỏng Firebase khác mà bạn muốn thiết lập, hãy nhớ chọn App Hosting
Emulator. CLI sẽ nhắc bạn nhập một số giá trị cho trình mô phỏng App Hosting emulator values,
bao gồm:
- Thư mục gốc của ứng dụng so với dự án; điều này rất quan trọng nếu bạn đang sử dụng monorepo với App Hosting.
- Bạn có muốn ghi đè bất kỳ giá trị nào cho quá trình phát triển ở môi trường cục bộ hay không.
- Bạn có muốn cấp cho các thành viên trong nhóm quyền truy cập vào các bí mật cho quá trình phát triển ở môi trường cục bộ hay không.
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.
Mọi giá trị mà bạn cung cấp trong quy trình thiết lập này đều được dùng để cập nhật cấu hình trình mô phỏng
App Hosting trong firebase.json. Bạn cũng có thể định cấu hình trình mô phỏng App Hosting bằng cách trực tiếp cập nhật firebase.json. Lược đồ cho trình mô phỏng App Hosting là:
{
...
"emulators": {
"apphosting": {
"startCommand": <command> [optional]
"rootDirectory": <path> [optional]
}
}
}
startCommandsẽ tự động được tạo và thiết lập khi trình mô phỏng được khởi động. Nếu không được cung cấp, trình mô phỏng sẽ phát hiện và chạy lệnh dev của trình quản lý gói.rootDirectoryđược dùng để hỗ trợ thiết lập dự án monorepo. Nếu ứng dụng web của bạn nằm trong một thư mục con, bạn cần cung cấp đường dẫn của thư mục đó so với thư mục gốc (vị trí củafirebase.json).
Quản lý quá trình mô phỏng
Quá trình khởi động trình mô phỏng sẽ tạo một tệp apphosting.emulator.yaml trong thư mục gốc của ứng dụng. Tệp cấu hình này có cùng lược đồ với tệp
apphosting.yaml được dùng trong
quá trình phát hành công khai, nhưng chỉ dành riêng cho quá trình phát triển ở môi trường cục bộ. Theo mặc định, trình mô phỏng sẽ đọc cấu hình từ tệp apphosting.yaml, nhưng nếu có tệp apphosting.emulator.yaml, thì các cấu hình trong tệp đó sẽ được ưu tiên và có quyền ưu tiên.
Tệp apphosting.emulator.yaml được thiết kế để bạn có thể cam kết và chia sẻ với đồng nghiệp một cách an toàn. Để giúp đảm bảo rằng bạn không vô tình cam kết dữ liệu nhạy cảm với kho lưu trữ nguồn, mọi biến môi trường là bí mật trong apphosting.yaml cũng phải là bí mật trong apphosting.emulator.yaml. Nếu một
bí mật không cần thay đổi giữa quá trình phát hành công khai và phát triển ở môi trường cục bộ (ví dụ: khoá API Gemini), thì bạn không cần thêm bí mật đó vào apphosting.emulator.yaml;
thay vào đó, hãy cấp cho nhóm của bạn quyền truy cập vào bí mật đó.
Nếu ứng dụng của bạn sử dụng nhiều bí mật (ví dụ: khoá API cho 3 dịch vụ khác nhau, với các giá trị khác nhau cho từng dịch vụ trong quá trình phát hành công khai, thử nghiệm và phát triển ở môi trường cục bộ), thì bạn có thể vượt quá gói miễn phí của Cloud Secret Manager và phải trả 0, 06 USD cho mỗi bí mật bổ sung mỗi tháng. Nếu bạn muốn quản lý cấu hình ở môi trường cục bộ bên ngoài hệ thống kiểm soát nguồn để tránh khoản phí này, bạn có thể sử dụng tệp apphosting.local.yaml cũ. Không giống như apphosting.emulator.yaml, tệp này được phép cung cấp các giá trị văn bản thuần tuý cho các biến môi trường là giá trị bí mật trong apphosting.yaml.
apphosting.local.yaml
Cấp cho người dùng hoặc nhóm quyền truy cập vào các bí mật
Các bí mật được lưu trữ trong apphosting.emulator.yaml sẽ được đọc khi trình mô phỏng khởi động. Điều này có nghĩa là nhóm phát triển của bạn cần có quyền truy cập vào bí mật đó. Bạn có thể sử dụng lệnh apphosting:secrets:grantaccess để cấp quyền truy cập vào một bí mật cho người dùng hoặc nhóm theo email.
firebase apphosting:secrets:grantaccess test-api-key --emails my-team@my-company.com
Nếu có thể, hãy cân nhắc sử dụng các khoá chỉ dành cho hoạt động kiểm thử trong apphosting.emulator.yaml mà không có quyền truy cập vào dữ liệu phát hành công khai, không thể gây ra các tác dụng phụ trên toàn cầu (gửi email, tính phí thẻ tín dụng) và/hoặc có hạn mức thấp hơn. Điều này giúp đảm bảo rằng mã chưa được xem xét sẽ ít gây ra hậu quả trong thế giới thực hơn.
Hãy cân nhắc sử dụng Google Groups để quản lý quyền truy cập vào các bí mật thay vì cấp quyền truy cập cho từng người dùng. Điều này sẽ giúp đơn giản hoá quá trình giới thiệu thành viên mới vào nhóm nhà phát triển của bạn vì việc thêm họ vào nhóm sẽ cấp cho họ quyền truy cập vào tất cả các bí mật mà họ cần. Bạn có thể đã có một nhóm phù hợp để các nhà phát triển giao tiếp với nhau. Việc kiểm soát quyền truy cập bằng Google Groups cũng giúp đảm bảo rằng các nhà phát triển rời khỏi nhóm của bạn sẽ mất quyền truy cập vào tất cả các bí mật khi họ bị xoá khỏi nhóm email. Tuy nhiên, nếu bí mật có quyền truy cập vào dữ liệu phát hành công khai hoặc các tác dụng phụ trong thế giới thực, thì bạn vẫn có thể xoay vòng khoá và gán cho khoá đó một giá trị mới bằng firebase apphosting:secrets:set.
Chạy trình mô phỏng
firebase emulators:start
Thao tác này sẽ khởi động tất cả các trình mô phỏng được xác định trong tệp firebase.json, bao gồm
trình mô phỏng App Hosting.
Định cấu hình lệnh start cho các ứng dụng Angular
Nếu lệnh start của trình mô phỏng hết thời gian chờ, thì có thể máy chủ phát triển Angular
đang phân phát ứng dụng của bạn trên một cổng khác với cổng mà trình mô phỏng
App Hosting mong đợi.
Bạn có thể giải quyết vấn đề này bằng cách thêm một số cấu hình bổ sung trong firebase.json:
- Đặt
emulators.apphosting.startCommandthànhng serve. - Để sử dụng một cổng không phải là cổng mặc định, hãy đặt cổng đó bằng
emulators.apphosting.port(thay vì thêm cờ--portvàong servetrongemulators.apphosting.startCommand).
Ví dụ:
"emulators": {
"apphosting": {
"port": 5002,
"rootDirectory": "./test-app",
"startCommand": "ng serve"
},
"ui": {
"enabled": true
},
...
}