Thiết lập quy trình CI/CD thống nhất cho monorepo React Web (Next.js) và React Native (Expo)

7 lượt xem · 1 trả lời

1. 12:19 14/10/2026
Khi làm việc với monorepo chứa cả ứng dụng web (Next.js) và mobile (Expo), một pipeline CI/CD duy nhất giúp giảm thiểu sai sót, tiết kiệm thời gian review và đảm bảo chất lượng code trên mọi nền tảng. Dưới đây là các bước thiết thực đã áp dụng thành công trong nhiều dự án thực tế. ## 1. Cấu trúc workflow cơ bản - **Lint & format**: chạy ESLint + Prettier cho toàn bộ repo trước khi build. Sử dụng `turbo run lint` để song song hóa. - **Type‑check**: `tsc --noEmit` cho từng package; Next.js và Expo đều hỗ trợ TypeScript out‑of‑the‑box. - **Unit test**: Jest + React Testing Library cho web, `@testing-library/react-native` cho mobile. Chạy `turbo run test` để tận dụng cache. - **Integration/E2E**: Cypress cho web, Detox cho mobile. Chạy trên môi trường container (GitHub Actions, GitLab CI) với matrix OS (ubuntu‑latest, macos‑latest). ## 2. Build artifacts riêng biệt - **Web**: `next build` → output `/.next` và static export nếu cần. Upload artifact `web-build`. - **Mobile**: `expo export` (hoặc `eas build --profile preview`) → tạo `.apk`/`.ipa` hoặc bundle JS. Upload artifact `mobile-build`. ## 3. Deploy preview tự động - **Vercel/Netlify** cho web: mỗi PR tạo deployment preview, URL được comment lại PR. - **Expo Preview / EAS Update** cho mobile: publish OTA update đến channel `preview-{prNumber}`. Tester chỉ cần quét QR code từ comment PR. ## 4. Gating & approval - Yêu cầu **required status checks**: lint, type‑check, unit test, e2e pass. - **Code owners** review cho thay đổi cấu hình CI/CD hoặc native code (Podfile, Gradle). - Tự động **semantic‑release** khi merge vào `main`: bump version, generate changelog, publish npm packages (nếu có shared UI lib) và trigger production deploy. ## 5. Mẹo tối ưu hiệu suất - Bật **TurboRepo remote caching** (Vercel, GitHub Actions) để tái sử dụng kết quả build/test giữa các run. - Chia **matrix jobs** theo nền tảng: web chạy trên Ubuntu, mobile build iOS chạy trên macOS runner. - Sử dụng **artifact retention** 7 ngày để debug nhanh mà không tốn storage. ## 6. Checklist trước khi push - [ ] `pnpm lint && pnpm typecheck` pass locally. - [ ] Tất cả unit test xanh. - [ ] Chạy `detox test -c ios.sim.debug` / `cypress run` trên máy dev. - [ ] Cập nhật `CHANGELOG.md` theo conventional commits. Với quy trình này, team có thể phát hành tính năng mới cho cả web và mobile chỉ trong vài phút sau khi merge, đồng thời giữ được độ tin cậy cao nhờ các gate tự động hóa. Hãy bắt đầu bằng một workflow nhỏ (lint + test) rồi mở rộng dần – cách tiếp cận lặp lại (iterative) luôn hiệu quả hơn việc cố gắng xây dựng toàn bộ pipeline một lần.
0 Facebook
2. 06:32 26/10/2026
Trả lời Quản Trị Viên Khi làm việc với monorepo chứa cả ứng dụng web (Next.js) và mobile (Expo), một pipeline CI/CD duy nhất giúp giảm thiểu s…
Mình đồng ý với hướng làm từng bước: bắt đầu bằng lint + type-check + unit test rồi mới thêm E2E. Kinh nghiệm thực tế khi làm monorepo Next.js + Expo là cần khai báo thật rõ cache key và biến môi trường cho Turbo, vì nếu đổi env ho
0
Vui lòng đăng nhập để tham gia trả lời chủ đề này.
Điều hướng nhanh

Bạn muốn khám phá điều gì?

Tìm chủ đề, bài viết hoặc đi thẳng đến một khu vực của cộng đồng.

Esc để đóng Ctrl K để mở lại