ReactNative 搭建自己的熱更新服務(wù)器(code-push-server)

https://github.com/lisong/code-push-server

前言

ReactNative的熱更新服務(wù)，目前開源較好的是微軟的react-native-code-push框架，功能全面，支持增量更新。 但是服務(wù)器在國外，且用別人的服務(wù)器的不確定因素等。。so,我們現(xiàn)在根據(jù)微軟的功能搭建一套屬于自己的熱更新服務(wù)。

簡介

 code-push-server是一個開源項目，基于 nodejs + mysql 搭建自己的熱更新服務(wù)器

環(huán)境

nodejs

mysql 5.6

windows/macOS/Linux
一、安裝mysql（其他環(huán)境自行對應(yīng)mysql安裝）

以windows說明：

  1. 推薦安裝 mysql 5.6 下載地址
  2. cd到解壓后的bin目錄
  3. 向windows注冊mysql服務(wù) mysqld.exe --install MySql --defaults-file="D:/MySql/mysql-5.6.40-winx64/my-default.ini" 后面地址修改自己的
  4. 打開本地服務(wù)，可手動啟動或 net start mysql
二、本地安裝code-push-serve

下載代碼到本地：

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

clone完畢后執(zhí)行，npm需要安裝nodejs(不再闡述)

cd code-push-server && npm install

修改config/config.js 文件，在 db 對象中添加數(shù)據(jù)庫信息，參考如下配置，對應(yīng)自己的用戶名密碼，數(shù)據(jù)庫名稱

db: {
    username: "root",   //
    password: "123456",
    database: "codepush",
    host: "127.0.0.1",
    port: 3306,
    dialect: "mysql"
  }

初始化服務(wù)，項目根目錄（code-push-server）下執(zhí)行命令

node ./bin/db init --dbhost localhost --dbuser root —dbpassword  #初始化mysql數(shù)據(jù)庫
三、配置服務(wù)器-存儲在本地(或者看配置存儲在七牛云或者阿里云等。)

修改config/config.js

將 common 對象中的 storageType改為 local

新建文件存儲目錄 data，storage，并修改配置文件

downloadUrl修改成本地地址

local: {
    // Binary files storage dir, Do not use tmpdir and it's public download dir.
    storageDir: process.env.STORAGE_DIR || "D:/local-data/storageDir",
    // Binary files download host address which Code Push Server listen to. the files storage in storageDir.
    downloadUrl: process.env.LOCAL_DOWNLOAD_URL || "http://192.168.197.143:3000/download",
    // public static download spacename.
    public: process.env.PUBLIC || '/download'
  },
  common: {
    /*
     * tryLoginTimes is control login error times to avoid force attack.
     * if value is 0, no limit for login auth, it may not safe for account. when it's a number, it means you can
     * try that times today. but it need config redis server.
     */
    tryLoginTimes: 0,
    // CodePush Web(https://github.com/lisong/code-push-web) login address.
    //codePushWebUrl: "http://127.0.0.1:3001/login",
    // create patch updates's number. default value is 3
    diffNums: 3,
    // data dir for caclulate diff files. it's optimization.
    dataDir: process.env.DATA_DIR || "D:/local-data/dataDir",
    // storageType which is your binary package files store. options value is ("local" | "qiniu" | "s3")
    storageType: process.env.STORAGE_TYPE || "local",
    // options value is (true | false), when it's true, it will cache updateCheck results in redis.
    updateCheckCache: false
  },

啟動服務(wù)

 node ./bin/www   //無報錯信息即為正常啟動，可以在瀏覽器中輸入 http://127.0.0.1:3000查看，默認用戶名密碼是 admin 123456
下面是客戶端ReactNative代碼
四、項目關(guān)聯(lián)

進入reactnative 項目根目錄執(zhí)行命令查看當(dāng)前是否登錄，先保證沒有別的賬號正在登錄

code-push whoami

如果報錯如下，表示沒有登錄

[Error]  You are not currently logged in. Run the 'code-push login' command to authenticate with the CodePush server.

如果沒有報錯 且顯示郵箱賬號，則表示已經(jīng)登錄賬戶，我們要先注銷當(dāng)前賬號

code-push logout

成功注銷后執(zhí)行登錄指令，登錄服務(wù)器

code-push login http://localhost:3000

輸入賬號和密碼 admin 123456 登錄后點擊按鈕 獲取token 并復(fù)制token到命令行中，并回車確認

Successfully logged-in. //提示此表示登錄成功

ok,codepush和我們自建的服務(wù)器關(guān)聯(lián)起來了.

五、注冊應(yīng)用

項目根目錄下執(zhí)行

code-push app add Stock-android android react-native  //項目名+iOS/android后綴

生成的key

│ Production │ lxJBDwTkl2qE8tsxG4sn7jqzu8nl4ksvPXqog │
├────────────┼───────────────────────────────────────┤
│ Staging    │ nJ3oSQmb64bxRqTP9mwMhZuZLIm94ksvOXqog │

注：Production、Staging表示不同環(huán)境的key。

六、項目中查看對應(yīng)的環(huán)境版本
code-push deployment ls Stock-android
七、ReactNative項目中導(dǎo)入CodePush代碼
npm install --save react-native-code-push

在啟動的js代碼中加入(根據(jù)需求調(diào)整)：

 componentWillMount(){
        CodePush.disallowRestart();//頁面加載的禁止重啟，在加載完了可以允許重啟
    }

    componentDidMount(){
        CodePush.allowRestart();//在加載完了可以允許重啟

        this.syncImmediate();
    }


    syncImmediate() {
        CodePush.sync(
            { installMode: CodePush.InstallMode.IMMEDIATE,//啟動模式三種：ON_NEXT_RESUME、ON_NEXT_RESTART、IMMEDIATE
                updateDialog: {
                    appendReleaseDescription:true,//是否顯示更新description，默認為false
                    descriptionPrefix:"更新內(nèi)容：",//更新說明的前綴。 默認是” Description:
                    mandatoryContinueButtonLabel:"立即更新",//強制更新的按鈕文字，默認為continue
                    mandatoryUpdateMessage:"",//- 強制更新時，更新通知. Defaults to “An update is available that must be installed.”.
                    optionalIgnoreButtonLabel: '稍后',//非強制更新時，取消按鈕文字,默認是ignore
                    optionalInstallButtonLabel: '后臺更新',//非強制更新時，確認文字. Defaults to “Install”
                    optionalUpdateMessage: '有新版本了，是否更新？',//非強制更新時，更新通知. Defaults to “An update is available. Would you like to install it?”.
                    title: '更新提示'//要顯示的更新通知的標(biāo)題. Defaults to “Update available”.
                },
            },
        );
    }
八、Ardoid項目導(dǎo)入CodePush代碼

settings.gradle加入：

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

build.gradle修改：

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

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
    compile project(':react-native-code-push')
}

MainApplication文件下修改

 private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

   @Override
   protected String getJSBundleFile() {
        return CodePush.getJSBundleFile();
   }
    
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
    //第一個參數(shù)是剛剛申請的key（可以根據(jù)環(huán)境配置）
    //第三個參數(shù)是服務(wù)器的URL
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new CodePush(" nJ3oSQmb64bxRqTP9mwMhZuZLIm94ksvOXqog ", MainApplication.this, BuildConfig.DEBUG,"http://你的IP:端口/")
      );
    }
打包發(fā)布(為了熟悉流程我們先本地打包，再上傳)

1.項目根目錄先創(chuàng)建一個bundles文件夾

mkdir bundles

2.打包成bundle文件

react-native bundle --platform 平臺 --entry-file 啟動文件 --bundle-output 打包js輸出文件 --assets-dest 資源輸出目錄 --dev 是否調(diào)試。 

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

3.發(fā)布到code push

code-push release <應(yīng)用名稱> <Bundles所在目錄> <對應(yīng)的應(yīng)用版本> --deploymentName： 更新環(huán)境 --description： 更新描述  --mandatory： 是否強制更新

code-push release Stock-android ./bundles/ 1.0.0 --deploymentName Staging  --description "1.首頁文字修改。" --mandatory true

4.查看歷史版本

測試版本更新：code-push deployment history 應(yīng)用名 Staging/Production

code-push deployment history Stock-android Staging
windows下的問題

發(fā)布后，APP也收到到了版本更新的提示，但是下載地址一直錯誤404，后面嘗試很多方法不行，下載了pm2管理，重啟也無效，后重啟電腦，重新 node ./bin/www 就可以。
好像是在開啟服務(wù)后，再創(chuàng)建storageDir有問題。TODO

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容