React Native OTA 업데이트: 어플리케이션의 새 버전을 1분 이내에 배치하는 방법은?

이미 생산에 들어간 응용 프로그램에 있어서 가장 큰 도전 중 하나는 고객에게 새로운 버전의 응용 프로그램을 신속하게 납품하는 것이다.특히 즉각적인 시정이 필요한 오류가 발견되면 가능한 한 빨리 오류를 수리하지 않으면 새로운 고객의 유출, 판매 손실, 일부 재무 손실과 부정적인 고객 체험을 초래할 수 있다.개발자가 곧 새 버전의 프로그램을 업데이트했지만, 앱스토어와 플레이스토어는 2~7일이 걸려야 심사할 수 있다.응, 2~7일 후, 새 버전은 플레이스토어에서 제공되지만, 모든 사용자가 업데이트를 설치하는 데 일주일이 걸릴 수 있어.

솔루션

이 문제는 OTA 업데이트를 통해 React Native에서 해결할 수 있습니다.
공중전송(OTA) 업데이트는 앱스토어와 플레이스테이터의 심사 절차를 거쳐 새로운 버전을 신속하게 전달할 수 있는 능력이다.명령 한 줄만 있으면 새로운 버전의 프로그램을 1분 안에 배치할 수 있다.
이게 왜 리얼리티에서 가능한지 설명해 드릴게요.

React 원본 응용 프로그램은 두 부분으로 구성되어 있습니다: 원본 코드와javascript 코드입니다.응용 프로그램을 구축할 때 모든javascript 코드가 컴파일되고 인덱스가 생성됩니다.안드로이드.번들 및 색인.네트워크 운영 체제.패키지 파일은android와ios 플랫폼을 위한 것입니다.
"공중 업데이트"를 통해 색인을 다운로드하고 업데이트할 수 있습니다.안드로이드.번들 및 색인.네트워크 운영 체제.서버에서 직접 파일을 번들입니다.그러나 주의해야 할 것은 본 기기의 코드는ota 업데이트를 통해 업데이트할 수 없다는 것이다.만약 이 컴퓨터의 코드가 변경되었거나 새로운 라이브러리가 추가되었다면, appstore와playstore배치 업데이트를 사용해야 합니다.

구현 방법

Expo를 사용하여 제작된 응용 프로그램의 경우 Expo sdk에 OTA 업데이트가 내장되어 있습니다.
https://docs.expo.io/guides/configuring-ota-updates/
이 앱의 경우 OTA 업데이트를 위해 마이크로소프트 앱센터의 코드푸시라는 무료 서비스를 이용할 수 있다.
App센터는 CI(지속적 통합)/CD(지속적 배치)와 모니터링 서비스로 마이크로소프트의Azure 클라우드에서 데스크톱과 모바일 응용 프로그램에 사용된다.
CodePush는 Cordova에서ota 업데이트를 실현하고 이 프로그램의 응답을 할 수 있는 무료 서비스입니다.

1. Appcenter에 등록

appcenter에 계정을 만듭니다.ms. Github, 마이크로소프트, 구글, 페이스북 계정으로 계정을 쉽게 만들 수 있습니다.

2. appcenter 응용 프로그램 만들기

Appcenter 콘솔에서 android 및 ios에 대한 별도의 응용 프로그램을 만듭니다.프로그램을 만들려면 플랫폼 옵션에서 react native를 선택하십시오.

3. 배포 작성

만든 안드로이드와 ios 프로그램으로 이동해서 배달 메뉴에서 CodePush를 선택하십시오.표준 배포 작성 버튼을 클릭하여 프로덕션 및 임시 배포를 작성합니다.

4. Appcenter cli 설치

Appcenter cli 도구를 로컬 컴퓨터에 설치합니다.npm를 사용하여 터미널에서 이 도구를 설치합니다.

$ npm install -g appcenter-cli

appcenter cli가 설치되어 있으면 로그인하십시오.로그인 명령을 실행하면 브라우저에서 로그인하고 인증 코드를 표시할 수 있습니다.이 코드를 사용하여 cli로 로그인합니다.

$ appcenter login

$ appcenter apps list
d.erdenezaya-gmail.com/example-app-android
d.erdenezaya-gmail.com/example-app-ios
// apps previously created on the appcenter console look like this
// Instead of d.erdenezaya-gmail, there is an organization that created a username or project.

생성된 배치를 검사하고 키를 기록합니다.그리고 react 원본 프로젝트를 설정하려면 이 키가 필요합니다.

$ appcenter codepush deployment list -k --app d.erdenezaya-gmail.com/example-app-android

$ appcenter codepush deployment list -k --app d.erdenezaya-gmail.com/example-app-ios

5.react 본체 코드 전송 라이브러리 설치

react 본체 버전이나android,ios에 따라 이 라이브러리를 설치하는 데는 여러 가지 설정이 있기 때문에 공식 문서를 자세히 읽어 주십시오.
https://docs.microsoft.com/en-us/appcenter/distribution/codepush/rn-get-started
이전 단계에서 언급한 키를 설정해야 합니다.

6. react 기본 응용 프로그램에서 CodePush 라이브러리 사용

CodePush를 구성하는 가장 간단한 방법은 어플리케이션을 포장하는 것입니다.js 구성 요소.이렇게 하면 CodePush는 프로그램이 시작될 때 업데이트가 있는지 확인하고 사용자가 눈치채지 못하도록 백그라운드에서 프로그램을 업데이트합니다.

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

class MyApp extends Component {
}}

MyApp = codePush (MyApp)

업데이트를 수동으로 확인하고 다운로드 진행률을 표시할 수도 있습니다.또한 업데이트 정보에 따라 업데이트 시기를 결정할 수 있습니다.

7. 최종 업데이트

appcenter cli를 설치한react native code push 디렉터리를 설치한 후 현재 필요한 것은 실제 업데이트를 배치하는 것입니다.react 원본 프로젝트의 루트 폴더에서 터미널을 열고 다음 명령을 실행하십시오.

$ appcenter apps list
d.erdenezaya-gmail.com/example-app-android
d.erdenezaya-gmail.com/example-app-ios
// apps previously created on the appcenter console look like this
// Instead of d.erdenezaya-gmail, there will be a name of organization or username that created the project.
// Staging Release (android)
$ appcenter codepush release-react --mandatory -a d.erdenezaya-gmail.com/example-app-android -d Staging
// Staging Release (ios)
$ appcenter codepush release-react --mandatory -a d.erdenezaya-gmail.com/example-app-ios -d Staging
// For production release, just change -d Production.

이 명령들은 자바스크립트 코드 패키지를 만들어서 아날로그 클라우드 저장소 서버에 업로드합니다.따라서 응용 프로그램은 appcenter 서버의 업데이트를 검사하고azure의 저장 서버에서javascript 패키지를 다운로드하여 응용 프로그램을 업데이트합니다.
이렇게위의 명령줄만 사용하면 1분 안에 새 버전의 프로그램을 발표할 수 있습니다.