Настройка React-Native и Code-Push с помощью своего сервера

Часть приложения React Native это упакованные JavaScript файлы и контент (например изображения), собранные с помощью metro bundler в бинарные файлы, для каждой платформы. CodePush позволяет отправлять обновлять путем синхронизации JavaScript и изображений с обновлениями, выпущенными на сервер CodePush.

Из-за закрытия работы облака Microsoft CodePush, хорошим решеним будет создать собственный сервер. В статье библиотека для хранения файлов используеться Qiniu из-за простоты и быстрой работы. Но можно использовать [local/s3/oss/Tencent Cloud] хранилище, это все можно настроить в config.js

Настройка собственного сервера Code-Push

Репозиторий вместе с полным руководством по установке вы можете посмотреть здесь; можно установить его как с помощью docker, так и вручную; для простоты будем использовать docker:

Копируем репозиторий

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

Файл конфигурации

Минимум в файле docker-compose.yml замените YOUR_MACHINE_IP в DOWNLOAD_URL на ваш собственный ip-адрес внешней сети или доменное имя.

Запускам Docker

docker-compose up -d

Проверка нашего сервера

Выполните команду:

curl -I http://YOUR_CODE_PUSH_SERVER_IP:3000/

ответ должен быть примерно таким:

HTTP/1.1 200 OK
X-DNS-Prefetch-Control: off
X-Frame-Options: SAMEORIGIN
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Download-Options: noopen
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Content-Type: text/html; charset=utf-8
Content-Length: 592
Date: Sat, 23 Nov 2023 15:45:46 GMT
Connection: keep-alive

На этом будем считать что сервер запущен, и можно перейти к нашему ReactNative приложению

Настройка React-Native приложения для Code-Push

Полное руководство с подробной информацией обо всех функциях можно найти здесь;

Примечание: Чтобы гарантировать, что у ваших конечных пользователей всегда будет рабочая версия вашего приложения, плагин CodePush сохраняет копию предыдущего обновления. В случае, если вы случайно выпустите обновление, содержащее ошибку, которая приводит к сбоям, система автоматически выполнит откат к предыдущей версии. Таким образом, вы можете быть уверены, что ваша новая скорость выпуска обновлений не приведет к блокировке пользователей до того, как вы сможете выполнить откат на сервере. Об этом и других аспектах я расскажу ниже.

Установка react-native-code-push

npm install --save react-native-code-push

Аналогично другим плагинам React Native, процесс интеграции отличается для iOS и Android. Поэтому следуйте шагам настройки ниже, в зависимости от платформы(платформ), на которую вы ориентируетесь. Важно отметить, что при нацеливании на обе платформы рекомендуется создавать отдельные приложения CodePush для каждой из них.

Эта статья предполагает, что вы используете версию RN > 0.6; Если вы используете более старую версию то смотрите документацию, могут быть отличия.

Настройка для iOS

Полное руководство по настройке здесь;

Выполните следующую команду в терминале, чтобы установить все необходимые зависимости CocoaPods:

cd ios && pod install && cd ..

Откройте файл AppDelegate.m и добавьте следующий импорт для CodePush:

#import <CodePush/CodePush.h>

Обновите метод sourceURLForBridge следующим образом:

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [CodePush bundleURL]; //<----
//  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

Добавьте ключ развертывания в Info.plist Откройте файл Info.plist вашего приложения и добавьте новую запись с именем CodePushDeploymentKey, значением которой будет ключ развертывания, который вы хотите настроить. Получите это значение с помощью Code-Push CLI (будет ниже):

<key>CodePushDeploymentKey</key>
<string>DEPLOYMENT_KEY</string>
<key>CodePushServerURL</key>
<string>CODE_PUSH_SERVER_URL</string>

Настройка Android

Полное руководство по настройке здесь;

В файле 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')

В файле android/app/build.gradle включите файл codepush.gradle как дополнительное определение задачи сборки в конце:

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

Внесите изменения в файл MainApplication.java, чтобы интегрировать CodePush:

...
// 1. Импортируйте класс плагина.
import com.microsoft.codepush.react.CodePush

class MainApplication : Application(), ReactApplication {

override val reactNativeHost: ReactNativeHost =
    object : DefaultReactNativeHost(this) {
        ...

        // 2. Переопределите метод getJSBundleFile, чтобы позволить
        // среде выполнения CodePush определять, откуда брать JS
        // местоположение пакета JS при каждом запуске приложения
        override fun getJSBundleFile(): String {
            return CodePush.getJSBundleFile() 
        }
    };
}

Добавьте ключ развертывания в strings.xml:

<resources>
<string name="app_name">AppName</string>
<string moduleConfig="true" name="CodePushDeploymentKey">DEPLOYMENT_KEY</string>  
<string moduleConfig="true" name="CodePushServerUrl">CODE_PUSH_SERVER_URL</string>
</resources>

Конфигурация App.tsx

Теперь, когда вы интегрировали плагин CodePush в свое приложение и установили связь с CodePush для получения соответствующего JS-пакета, оставшаяся задача состоит в реализации необходимого кода в вашем приложении для управления обновлениями.

Оберните ваш корневой компонент в codePush

import codePush from "react-native-code-push";

const MyApp = () =>  {
}

export default codePush(MyApp);

По умолчанию CodePush проверяет наличие обновлений при каждом запуске приложения. Если обновление доступно, оно загружается в фоне и устанавливается при следующем перезапуске приложения, делая все не заметным для пользователей. Чтобы ускорить обнаружение обновлений, вы можете синхронизироваться с сервером CodePush каждый раз, когда приложение возобновляет работу из фона:

const codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME };

const MyApp = () => {
}

export default codePush(codePushOptions)(MyApp);

ReactNative react-native codepush russian