Hướng dẫn Code Push cho React Native

Thiết lập server Code Push

Tải code-push server:

git clone https://github.com/shm-open/code-push-server.git

Sửa file src/core/config:


db: {
    username: process.env.RDS_USERNAME || 'beoxiupr_autoUpdateApp',
    password: process.env.RDS_PASSWORD || 'Vuhai2112$',
    database: process.env.RDS_DATABASE || 'beoxiupr_autoUpdateApp',
    host: process.env.RDS_HOST || 'cookie.pro.vn',
    port: toNumber(process.env.RDS_PORT, 3306),
    dialect: 'mysql',
    logging: false,
},
local: {
    storageDir: process.env.STORAGE_DIR || '/Users/vuhai/codepush-storage',
    downloadUrl: process.env.LOCAL_DOWNLOAD_URL || process.env.DOWNLOAD_URL || 'http://192.168.110.62:8888/download',
    public: '/download',
},
redis: {
    host: process.env.REDIS_HOST || 'redis-14978.c228.us-central1-1.gce.redns.redis-cloud.com',
    port: toNumber(process.env.REDIS_PORT, 14978),
    password: 'pxOlc4yZWNbsDTMgPPHLCtdmmDObjvY4',
    db: toNumber(process.env.REDIS_DB, 0),
},

Sửa file src/db.ts:


const argv = yargs
    .usage('Usage: $0  [options]')
    .command('init', '初始化数据库', {
        dbpassword: { alias: 'dbpassword', type: 'string' },
    })
    .command('upgrade', '升级数据库', {
        dbpassword: { alias: 'dbpassword', type: 'string' },
    })
    .example('$0 init --dbname beoxiupr_autoUpdateApp --dbhost cookie.pro.vn --dbuser beoxiupr_autoUpdateApp --dbpassword Vuhai2112$ --dbport 3306 --force', '初始化code-push-server数据库')
    .example('$0 upgrade --dbname beoxiupr_autoUpdateApp --dbhost cookie.pro.vn --dbuser beoxiupr_autoUpdateApp --dbpassword Vuhai2112$ --dbport 3306', '升级code-push-server数据库')
    .default({
        dbname: 'beoxiupr_autoUpdateApp',
        dbhost: 'cookie.pro.vn',
        dbuser: 'beoxiupr_autoUpdateApp',
        dbpassword: 'Vuhai2112$',
    })
    .help('h')
    .alias('h', 'help')
    .parseSync();

Build server:
```
npm run build
```

Get code-push-server from NPM

 npm install @shm-open/code-push-server@latest -g

Init Database

code-push-server-db init --dbhost "your mysql host" --dbport "your mysql port" --dbuser "your mysql user" --dbpassword "your mysql password" --dbname "codepush"

Khởi tạo database:
```
node ./bin/db.js init --force
```

Tải code-push CLI:

npm install @shm-open/code-push-cli@latest -g

Sửa port file src/www.ts :

 const port = normalizePort(process.env.PORT || '8888');

Chạy server:
```
npm start
```
Đăng nhập vào Code Push:
```
code-push login http://localhost:8888
```
Redirect đến trang HTML (admin/123456), lấy mã token và dán vào console để tiếp tục.

Tạo ứng dụng trên máy chủ Code Push:

Cho iOS:

code-push app add chipchipClass-ios ios react-native

Cho Android:

code-push app add chipchipClass-android android react-native

Cấu hình React Native cho Android

Tải thư viện Code Push:

npm install react-native-code-push@9.0.1

Định dạng version phải là x.y.z.

Thêm vào android/settings.gradle:


include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

Thêm vào cuối android/app/build.gradle:

apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

Thêm vào android/app/src/main/res/values/strings.xml bên trong thẻ <resources>:


<resources>
    <string name="app_name">ChipChip Class</string>
    <string moduleConfig="true" name="CodePushServerUrl">http://192.168.110.62:8888</string>
    <string moduleConfig="true" name="CodePushDeploymentKey">OXf0lqwY2ScNSREo1z7oLcPZeAhc4ksvOXqog</string>
    <string moduleConfig="true" name="CodePushAppVersion">1.0.0</string>
</resources>

Thêm vào android/app/src/main/java/com/chipchipclass/MainApplication.kt:


import com.microsoft.codepush.react.CodePush
override fun getJSBundleFile(): String {
    return CodePush.getJSBundleFile()
}

Thêm đoạn mã này bên trong object : DefaultReactNativeHost(this) {}.

Cấu hình React Native cho iOS

Thêm vào Info.plist:


<key>CodePushServerURL</key>
<string>http://192.168.110.62:8888/</string>
<key>CodePushDeploymentKey</key>
<string>xciNRzzUA0y7cnkfP9TTSz2F5rsp4ksvOXqog</string>
<key>CFBundleShortVersionString</key>
<string>1.0.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>1</string>

Thêm vào AppDelegate.mm:


#import <CodePush/CodePush.h>
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
#ifdef DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
    return [CodePush bundleURL];
#endif
}

Tạo và đẩy bundle lên server

Tạo bundle cho Android:

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output ./code-push/index.android.bundle --assets-dest ./code-push

Đẩy bundle cho ChipChip Class Android lên server:

code-push release chipchipClass-android ./code-push 1.1.19 --deploymentName Staging

Đẩy bundle cho ChipChip Teacher Android lên server:

code-push release chipchipTeacher-android ./code-push 1.0.1 --deploymentName Staging

Đẩy bundle cho ChipChip Class Parent Android lên server:

code-push release chipchipClassParent-android ./code-push 1.0.0 --deploymentName Staging

Tạo bundle cho iOS:

npx react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ./code-push-ios/main.jsbundle --assets-dest ./code-push-ios

Đẩy bundle cho ChipChip Class iOS lên server:

code-push release chipchipClass-ios ./code-push-ios 1.21.0 --deploymentName Staging

Đẩy bundle cho ChipChip Teacher iOS lên server:

code-push release chipchipTeacher-ios ./code-push-ios 1.0.2 --deploymentName Staging

Đẩy bundle cho ChipChip Class Parent iOS lên server:

code-push release chipchipClassParent-ios ./code-push-ios 1.0.0 --deploymentName Staging

Kiểm tra thông tin phiên bản hiện tại:

Cho iOS:

code-push deployment list chipchipClass-ios

Cho Android:

code-push deployment list chipchipClass-android

Xoá phiên bản hiện tại:

Cho iOS:

code-push deployment clear chipchipClass-ios Staging

Cho Android:

code-push deployment clear chipchipClass-android Staging