Khi phát triển ứng dụng chạy đồng thời trên Web và Mobile, việc xử lý biến môi trường (environment variables) và các giá trị nhạy cảm như API key, secret token hay database URL trở thành thách thức lớn. Dưới đây là một quy trình thực tế đã áp dụng thành công trong nhiều dự án monorepo React Web + React Native. 1. Tách cấu hình theo môi trường - Tạo thư mục config/ chứa các file: development.js, staging.js, production.js. - Mỗi file export một object chứa các khóa công khai (API_ENDPOINT, FEATURE_FLAGS) và tham chiếu đến biến bí mật thông qua process.env (Web) hoặc Constants.manifest.extra (Expo/React Native). - Sử dụng script build để copy file phù hợp vào thư mục dist/ trước khi bundle. 2. Lưu trữ bí mật an toàn - Không bao giờ commit file .env chứa secret vào git. - Sử dụng 1Password, Vault hoặc GitHub Secrets để cung cấp giá trị tại runtime CI/CD. - Trên mobile, nạp secret qua EAS Build secrets hoặc Fastlane match, sau đó inject vào Constants.expoConfig.extra khi build. 3. Truy cập thống nhất trong code - Viết một custom hook useConfig() đọc từ config object đã được inject. Hook này hoạt động y hệt trên cả hai nền tảng, giúp component không cần quan tâm nguồn gốc của biến. - Ví dụ: const { apiBaseUrl, enableAnalytics } = useConfig(); 4. Validation sớm - Áp dụng Zod hoặc Yup để validate object config ngay khi ứng dụng khởi động. Nếu thiếu khóa bắt buộc, ném lỗi rõ ràng và dừng khởi động, tránh lỗi runtime khó debug. 5. Quản lý phiên bản cấu hình - Gắn version tag vào file config (ví dụ: configVersion: "2.3.0"). - Khi triển khai, so sánh version hiện tại với version tối thiểu yêu cầu của backend để đảm bảo tương thích. 6. Logging và audit - Ghi log (không chứa secret) mỗi khi config được load, kèm environment và version. - Tích hợp với Sentry hoặc Datadog để theo dõi sự cố cấu hình trên production. Áp dụng quy trình này giúp team giảm thiểu rủi ro rò rỉ secret, đảm bảo tính nhất quán giữa Web và Mobile, đồng thời dễ dàng mở rộng khi thêm môi trường mới.