Module 13 — CI/CD & Deployment

🎯 MỤC TIÊU HỌC TẬP

• Hiểu toàn bộ CI/CD pipeline cho React Native: từ lint, test, build đến deploy và monitor
• Thiết lập GitHub Actions workflow hoàn chỉnh cho dự án RN
• Sử dụng Fastlane để tự động hóa build, signing và upload lên store
• Phân biệt CodePush và EAS Update, hiểu OTA update limitations
• Nắm được quy trình submit app lên App Store và Google Play, các lý do bị reject phổ biến
• Triển khai error monitoring với Sentry, so sánh với Crashlytics
• Áp dụng semantic versioning và feature flags cho mobile

📖 HƯỚNG DẪN HỌC

⚡ ÔN NHANH

🧭 Vòng lặp học module này

📚 LÝ THUYẾT CHI TIẾT

1. CI/CD Pipeline cho React Native

2. GitHub Actions cho React Native

name: React Native CI/CD

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

env:
  NODE_VERSION: '18'
  JAVA_VERSION: '17'

jobs:
  lint-and-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'yarn'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Lint
        run: yarn lint

      - name: Type check
        run: yarn tsc --noEmit

      - name: Unit tests
        run: yarn test --coverage

      - name: Upload coverage
        uses: codecov/codecov-action@v4
        with:
          token: ${{ secrets.CODECOV_TOKEN }}

  build-android:
    needs: lint-and-test
    runs-on: ubuntu-latest
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'yarn'

      - name: Setup Java
        uses: actions/setup-java@v4
        with:
          distribution: 'zulu'
          java-version: ${{ env.JAVA_VERSION }}

      - name: Setup Gradle cache
        uses: gradle/actions/setup-gradle@v3

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Decode keystore
        run: echo "${{ secrets.ANDROID_KEYSTORE_BASE64 }}" | base64 -d > android/app/release.keystore

      - name: Build Android Release
        working-directory: android
        run: ./gradlew assembleRelease
        env:
          STORE_PASSWORD: ${{ secrets.ANDROID_STORE_PASSWORD }}
          KEY_PASSWORD: ${{ secrets.ANDROID_KEY_PASSWORD }}
          KEY_ALIAS: ${{ secrets.ANDROID_KEY_ALIAS }}

      - name: Upload APK artifact
        uses: actions/upload-artifact@v4
        with:
          name: android-release
          path: android/app/build/outputs/apk/release/*.apk

  build-ios:
    needs: lint-and-test
    runs-on: macos-latest
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'yarn'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Cache CocoaPods
        uses: actions/cache@v4
        with:
          path: ios/Pods
          key: pods-${{ hashFiles('ios/Podfile.lock') }}

      - name: Install CocoaPods
        working-directory: ios
        run: pod install

      - name: Setup Ruby and Fastlane
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2'
          bundler-cache: true

      - name: Build iOS with Fastlane
        run: bundle exec fastlane ios build
        env:
          MATCH_PASSWORD: ${{ secrets.MATCH_PASSWORD }}
          MATCH_GIT_URL: ${{ secrets.MATCH_GIT_URL }}
          APP_STORE_CONNECT_API_KEY: ${{ secrets.ASC_API_KEY }}

      - name: Upload IPA artifact
        uses: actions/upload-artifact@v4
        with:
          name: ios-release
          path: "*.ipa"

Giải thích các phần quan trọng:

• needs: lint-and-test — đảm bảo build chỉ chạy khi lint và test pass
• --frozen-lockfile — đảm bảo CI dùng đúng phiên bản dependencies như local
• Keystore được encode base64 và lưu trong GitHub Secrets, decode tại runtime
• iOS build phải dùng macos-latest runner vì cần Xcode
• CocoaPods cache giúp giảm đáng kể thời gian build iOS

3. Fastlane

Cấu trúc Fastfile cho iOS:

default_platform(:ios)

platform :ios do
  before_all do
    setup_ci
  end

  lane :certificates do
    match(
      type: "appstore",
      app_identifier: "com.company.myapp",
      git_url: ENV["MATCH_GIT_URL"],
      readonly: is_ci
    )
  end

  lane :build do
    certificates
    increment_build_number(
      build_number: ENV["GITHUB_RUN_NUMBER"]
    )
    gym(
      scheme: "MyApp",
      workspace: "ios/MyApp.xcworkspace",
      export_method: "app-store",
      output_directory: "./build",
      clean: true
    )
  end

  lane :deploy do
    build
    deliver(
      submit_for_review: false,
      automatic_release: false,
      skip_metadata: true,
      skip_screenshots: true
    )
  end

  lane :beta do
    build
    upload_to_testflight(
      skip_waiting_for_build_processing: true
    )
  end
end

Cấu trúc Fastfile cho Android:

default_platform(:android)

platform :android do
  lane :build do
    gradle(
      project_dir: "./android",
      task: "bundle",
      build_type: "Release"
    )
  end

  lane :deploy do
    build
    supply(
      track: "internal",
      aab: "android/app/build/outputs/bundle/release/app-release.aab",
      json_key: "android/play-store-key.json",
      skip_upload_metadata: true,
      skip_upload_images: true
    )
  end

  lane :promote do
    supply(
      track: "internal",
      track_promote_to: "production",
      json_key: "android/play-store-key.json",
      skip_upload_aab: true
    )
  end
end

4. CodePush vs EAS Update

Tiêu chí	CodePush (App Center)	EAS Update
Nhà phát triển	Microsoft (đã deprecated)	Expo
Tương thích	Bare RN, Expo (phức tạp)	Expo managed & bare
Rollback	Tự động rollback khi crash	Manual rollback qua CLI
Branching	Deployment keys (Staging/Production)	Channels & branches
Tương lai	Deprecated (tháng 3/2025)	Được maintain tích cực
Giá	Miễn phí	Free tier, paid cho team
Tích hợp CI	CLI-based	EAS CLI, tích hợp sâu với Expo
Phân phối dần	Percentage rollout	Channels-based targeting

Ví dụ cấu hình EAS Update:

{
  "cli": {
    "version": ">=5.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "channel": "development"
    },
    "preview": {
      "distribution": "internal",
      "channel": "preview"
    },
    "production": {
      "channel": "production"
    }
  },
  "submit": {
    "production": {
      "ios": {
        "ascAppId": "1234567890"
      },
      "android": {
        "track": "internal"
      }
    }
  }
}

Publish OTA update qua EAS CLI:

eas update --branch production --message "Fix login button crash"

eas update --branch preview --message "New onboarding flow"

eas update:rollback --branch production

5. App Distribution

Firebase App Distribution với Fastlane:

lane :distribute do
  build
  firebase_app_distribution(
    app: "1:123456789:android:abcdef",
    groups: "internal-testers",
    release_notes: "Build #{lane_context[SharedValues::BUILD_NUMBER]} - Bug fixes"
  )
end

6. Store Submission — Rejection Reasons

7. Semantic Versioning cho Mobile

Thay đổi	Version bump	Yêu cầu
Breaking changes, redesign lớn	MAJOR (1.x → 2.0)	Full store build + review
Tính năng mới	MINOR (2.1 → 2.2)	Full store build + review
Bug fix, hotfix	PATCH (2.2.0 → 2.2.1)	OTA update hoặc store build

Script tự động bump version:

{
  "scripts": {
    "version:patch": "npm version patch && npx react-native-version --never-amend",
    "version:minor": "npm version minor && npx react-native-version --never-amend",
    "version:major": "npm version major && npx react-native-version --never-amend"
  }
}

Package react-native-version tự động sync version từ package.json sang build.gradle và Info.plist, giúp tránh sai lệch version giữa các platform.

8. Feature Flags

Custom feature flag implementation đơn giản:

type FeatureFlags = {
  newOnboarding: boolean;
  darkMode: boolean;
  betaPayment: boolean;
};

const DEFAULT_FLAGS: FeatureFlags = {
  newOnboarding: false,
  darkMode: false,
  betaPayment: false,
};

class FeatureFlagService {
  private flags: FeatureFlags = DEFAULT_FLAGS;

  async initialize(): Promise<void> {
    try {
      const response = await fetch(
        'https://api.myapp.com/feature-flags'
      );
      const remoteFlags = await response.json();
      this.flags = { ...DEFAULT_FLAGS, ...remoteFlags };
    } catch {
      this.flags = DEFAULT_FLAGS;
    }
  }

  isEnabled(flag: keyof FeatureFlags): boolean {
    return this.flags[flag] ?? false;
  }
}

export const featureFlags = new FeatureFlagService();

Sử dụng feature flag trong component:

function PaymentScreen() {
  const isBetaPayment = featureFlags.isEnabled('betaPayment');

  if (isBetaPayment) {
    return <NewPaymentFlow />;
  }

  return <LegacyPaymentFlow />;
}

9. Error Monitoring

Setup Sentry trong React Native:

import * as Sentry from '@sentry/react-native';

Sentry.init({
  dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
  tracesSampleRate: 0.2,
  environment: __DEV__ ? 'development' : 'production',
  enableAutoSessionTracking: true,
  sessionTrackingIntervalMillis: 30000,
  attachStacktrace: true,
  beforeSend(event) {
    if (__DEV__) {
      return null;
    }
    return event;
  },
});

Giải thích: tracesSampleRate: 0.2 nghĩa là chỉ trace 20% transactions để tránh overhead. beforeSend filter bỏ events trong development. enableAutoSessionTracking cho phép Sentry tính crash-free rate.

Upload source maps trong CI:

npx sentry-cli releases new "com.myapp@2.5.1+142"

npx sentry-cli releases files "com.myapp@2.5.1+142" \
  upload-sourcemaps \
  --dist 142 \
  ./build/sourcemaps

npx sentry-cli releases finalize "com.myapp@2.5.1+142"

10. Error Boundary Patterns

import React, { Component, ErrorInfo, ReactNode } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import * as Sentry from '@sentry/react-native';

interface Props {
  children: ReactNode;
  fallback?: ReactNode;
  onError?: (error: Error, errorInfo: ErrorInfo) => void;
}

interface State {
  hasError: boolean;
  error: Error | null;
}

class ErrorBoundary extends Component<Props, State> {
  state: State = {
    hasError: false,
    error: null,
  };

  static getDerivedStateFromError(error: Error): Partial<State> {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    Sentry.withScope((scope) => {
      scope.setExtra('componentStack', errorInfo.componentStack);
      scope.setLevel('fatal');
      Sentry.captureException(error);
    });

    this.props.onError?.(error, errorInfo);
  }

  handleRetry = (): void => {
    this.setState({ hasError: false, error: null });
  };

  render(): ReactNode {
    if (this.state.hasError) {
      if (this.props.fallback) {
        return this.props.fallback;
      }

      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
          <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 8 }}>
            Đã xảy ra lỗi
          </Text>
          <Text style={{ fontSize: 14, color: '#666', textAlign: 'center', marginBottom: 16 }}>
            {this.state.error?.message}
          </Text>
          <TouchableOpacity
            onPress={this.handleRetry}
            style={{ backgroundColor: '#007AFF', paddingHorizontal: 24, paddingVertical: 12, borderRadius: 8 }}
          >
            <Text style={{ color: '#fff', fontSize: 16 }}>Thử lại</Text>
          </TouchableOpacity>
        </View>
      );
    }

    return this.props.children;
  }
}

Sử dụng nhiều tầng Error Boundary cho granular error handling:

function App() {
  return (
    <ErrorBoundary fallback={<AppCrashScreen />}>
      <NavigationContainer>
        <ErrorBoundary fallback={<ScreenErrorFallback />}>
          <MainNavigator />
        </ErrorBoundary>
      </NavigationContainer>
    </ErrorBoundary>
  );
}

Tầng ngoài cùng bắt lỗi toàn app (navigation crash). Tầng trong bắt lỗi từng screen, cho phép user quay lại screen khác mà không crash toàn bộ app.

❓ CÂU HỎI PHỎNG VẤN + ĐÁP ÁN

🛠️ Debug playbook: release bug

Triệu chứng	Kiểm tra	Fix thường gặp
Store từ chối upload	Version code/build number, bundle id/package name, signing	Tăng build number, kiểm signing/profile đúng app
Crash report không đọc được stack	Sourcemap upload, release name, dist/build number	Upload sourcemap cùng release id và verify trên Sentry
OTA làm app crash	Change có native dependency/permission/config không	Rollback OTA, full build cho native change
CI build chậm/flaky	Cache hit, runner, tests flaky, Pods/Gradle mismatch	Cache đúng key, split jobs, fix flaky test, pin tooling

🏋️ BÀI TẬP

🧩 MINI EXERCISE THỰC TẾ REACT NATIVE

⚠️ LỖI THƯỜNG GẶP

🏢 CASE ĐI LÀM THẬT

🧠 GHI NHỚ NHANH

❔ CÂU HỎI TỰ KIỂM TRA

✅ CHECKLIST TỰ ĐÁNH GIÁ

📎 TÀI NGUYÊN