**Giới thiệu** Khi làm việc với cả React Web và React Native trong cùng một tổ chức, việc duy trì hai kho mã riêng biệt thường dẫn đến lặp lại công việc, đồng bộ hóa khó khăn và quy trình triển khai không nhất quán. Giải pháp phổ biến nhất là kết hợp một kho mã duy nhất (monorepo) với quy trình tích hợp và triển khai liên tục (CI/CD) được tự động hóa. Cách tiếp cận này cho phép bạn chia sẻ các script xây dựng, kiểm thử và xuất bản, đồng thời đảm bảo rằng cả hai nền tảng đều được cập nhật đồng bộ. **Lợi ích chính** - **Chia sẻ mã và script**: Các hook tùy chỉnh, thành phần giao diện người dùng và logic nghiệp vụ có thể được đặt trong các gói riêng biệt nhưng được tham chiếu từ cả hai ứng dụng. - **Đồng bộ CI/CD**: Một quy trình duy nhất thực hiện xây dựng, kiểm thử và xuất bản cho cả hai nền tảng, loại bỏ các lỗi cấu hình. - **Hiển thị nhanh**: Các nhóm có thể thấy các thay đổi ở cả hai phía trong một kho mã duy nhất, giúp việc xem xét mã dễ dàng hơn. - **Tối ưu hóa hiệu suất**: Các công cụ như Nx hoặc Turborepo giúp tăng tốc độ xây dựng bằng cách lưu vào bộ nhớ đệm các kết quả đã tính toán trước đó. **Thiết lập monorepo** Bắt đầu bằng cách tạo một kho mã mới với cấu trúc thư mục giống như sau: ``` my‑repo/ ├─ apps/ │ ├─ web/ │ └─ mobile/ ├─ packages/ │ ├─ shared‑ui/ │ └─ auth‑logic/ ├─ .github/ │ └─ workflows/ │ └─ ci.yml └─ package.json ``` Trong file package.json gốc, sử dụng các không gian tên như "@my‑repo/web" và "@my‑repo/mobile". Cài đặt các script xây dựng thông qua các công cụ như `nx` hoặc `turbo`. Ví dụ, `nx build web` sẽ thực hiện xây dựng ứng dụng web, trong khi `nx build mobile` sẽ thực hiện xây dựng ứng dụng di động. **Tạo quy trình CI/CD** Thêm một file `ci.yml` vào `.github/workflows/`: ```yaml name: CI on: push: branches: [main] jobs: build-and-test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Thiết lập Node.js uses: actions/setup-node@v3 with: node-version: '18' cache: 'npm' - name: Cài đặt phụ thuộc run: npm ci - name: Xây dựng tất cả các ứng dụng run: npm run build:all - name: Kiểm thử đơn vị run: npm run test:ci - name: Kiểm thử end‑to‑end run: npm run e2e - name: Xuất bản env: NPM_TOKEN: ${{ secrets.NPM_TOKEN }} run: npm run publish:packages ``` Quy trình này tự động hóa việc xây dựng, kiểm thử và xuất bản các gói đã được chia sẻ. Nó sử dụng tính năng lưu vào bộ nhớ đệm của GitHub Actions để giảm thời gian thực hiện. **Thực hành tốt nhất** - **Phân chia các gói một cách thông minh**: Giữ các thành phần giao diện người dùng và logic chung trong các gói riêng biệt; chỉ giữ mã đặc thù cho từng nền tảng trong thư mục ứng dụng. - **Tận dụng các script kiểm thử được chia sẻ**: Sử dụng Jest với các cấu hình riêng biệt cho web và di động, nhưng giữ chung script chạy. - **Bảo mật các biến môi trường**: Sử dụng các bí mật của GitHub để lưu trữ các token API, không lưu trữ chúng trong mã nguồn. - **Thường xuyên kiểm tra quy trình CI**: Thực hiện các thay đổi nhỏ và đảm bảo quy trình vẫn thành công sau mỗi lần thực hiện. **Kết luận** Bằng cách kết hợp monorepo với quy trình CI/CD được tự động hóa, các nhóm có thể đồng bộ hóa React Web và React Native một cách hiệu quả, giảm công sức bảo trì và tăng tốc độ triển khai. Hãy bắt đầu với một kho mã nhỏ, sau đó mở rộng quy mô khi bạn thấy kết quả tích cực.