Khi dự án phát triển song song React Web và React Native trong một monorepo, việc tự động hóa xây dựng, kiểm thử và triển khai trở nên quan trọng để đảm bảo chất lượng và tốc độ phát hành. Bài viết này chia sẻ quy trình CI/CD thực tế đã áp dụng cho một sản phẩm thương mại điện tử đa nền tảng. ## 1. Cấu trúc monorepo - Sử dụng **Nx** hoặc **Turborepo** để quản lý các package: `apps/web`, `apps/mobile`, `libs/ui`, `libs/shared`. - Mỗi app có file cấu hình riêng (`next.config.js`, `metro.config.js`) nhưng chia sẻ typescript config và eslint. ## 2. GitHub Actions workflow ### 2.1. Trigger - `push` và `pull_request` nhánh `main`/`develop`. - `workflow_dispatch` cho việc release thủ công. ### 2.2. Job **lint‑typecheck** ```yaml - name: Install deps uses: actions/setup-node@v4 with: { node-version: '20', cache: 'npm' } - run: npm ci - run: npm run lint && npm run typecheck ``` Chạy ESLint, Prettier và `tsc --noEmit` cho toàn bộ repo. ### 2.3. Job **test** (song song) - **web**: `npm run test:web -- --ci --coverage` (Jest + React Testing Library). - **mobile**: `npm run test:mobile -- --ci` (Jest + @testing-library/react-native). - Sử dụng `matrix` để chạy hai job cùng lúc, giảm thời gian chờ. ### 2.4. Job **build** - **Web**: `npm run build:web` → tạo artifact `web-build`. - **Mobile**: `npm run build:ios` và `npm run build:android` → tạo artifact `ios-build`, `android-build`. - Cache `node_modules` và `~/.gradle`/`~/Library/Caches/CocoaPods` để tăng tốc. ### 2.5. Job **deploy‑staging** (chỉ nhánh `develop`) - Web: deploy lên Vercel Preview qua `vercel-action`. - Mobile: dùng **Fastlane** để upload lên TestFlight (iOS) và Google Play Internal Testing (Android). ```yaml - name: Fastlane iOS run: cd apps/mobile && bundle exec fastlane ios beta - name: Fastlane Android run: cd apps/mobile && bundle exec fastlane android beta ``` ### 2.6. Job **release** (tag `v*`) - Tự động tạo GitHub Release với changelog từ `conventional-changelog`. - Web: promote Vercel production. - Mobile: Fastlane `release` lane để submit lên App Store Connect và Play Console. ## 3. Fastlane cấu hình chính - `Fastfile` chia lane `beta` (internal) và `release` (store). - Sử dụng `match` để quản lý certificates/profiles an toàn trong GitHub Secrets. - `increment_build_number` tự động tăng build number dựa trên `git describe --tags`. ## 4. Bí quyết áp dụng ngay 1. **Cache agresively**: lưu `node_modules`, `~/.npm`, `~/.gradle`, `~/Library/Caches/CocoaPods`. 2. **Parallel matrix** cho lint, test, build để rút ngắn pipeline dưới 10 phút. 3. **Secret management**: lưu Apple ID, Google Service Account, Vercel token trong GitHub Encrypted Secrets, không hard‑code. 4. **Conventional commits** + `semantic-release` để tự động bump version và sinh changelog. 5. **Monitoring**: thêm step `slack-notify` khi pipeline fail hoặc release thành công. Với quy trình này, đội ngũ có thể merge code mỗi ngày, tự động có bản preview web và bản test mobile trong vòng vài phút, giảm thiểu lỗi thủ công và tăng tốc độ đi thị trường.