CodePushとReact Nativeで緊急OTAリリース!了解!🚑

CodePushとReact Nativeで緊急OTAリリース!了解!🚑

iOSDC 2018前夜祭での発表内容です。
デモプロジェクト: https://github.com/miyabi/iosdc18example

Dea4bea1e12e19225163ad8b2f5e209b?s=128

Masayuki Iwai

August 30, 2018
Tweet

Transcript

  1. CodePushとReact Nativeで 緊急OTAリリース!了解! Masayuki Iwai@myb #iosdc

  2. CodePushとReact Nativeで 緊急OTAリリース!了解! Masayuki Iwai@myb #iosdc ホットパッチング

  3. 自己紹介 岩井雅幸@myb
 
 モバイル・アプリケーション・エンジニア
 at Unity Technologies Japan
 以前はWebデザイン・開発、Flashコンテ ンツ制作、iOSアプリ、ゲーム制作など

    著書に「uGUIではじめる Unity UIデザイン の教科書」
  4. 自己紹介 岩井雅幸@myb
 
 モバイル・アプリケーション・エンジニア
 at Unity Technologies Japan
 以前はWebデザイン・開発、Flashコンテ ンツ制作、iOSアプリ、ゲーム制作など

    著書に「uGUIではじめる Unity UIデザイン の教科書」
  5. こんなアプリを作っています

  6. Unity Meetup • Unityユーザーのためのイベントアプリ
 イベント検索、タイムテーブル、参加申し
 込み、チェックイン、アンケート回答機能 • フルReact Native
 導入の経緯は昨年のiOSDC

    2017 Reject Conf での発表を参照
 https://www.slideshare.net/MasayukiIwai/ react-native-110226150
  7. トラブルが…

  8. 2018年5月

  9. Unite Tokyo 2018での出来事

  10. Unite Tokyo 2018での出来事 • 毎年開催しているUnity公式のカンファレンス • 今年は5月に3日間開催、2000人以上参加 • このイベントに合わせてチャット機能を実装 •

    海外チームが開発しているAPIを利用する必要があり、
 連携を依頼していたがギリギリになってしまった • 前バージョンでパフォーマンスが悪かったのでリファクタリング
  11. Unite Tokyo 2018での出来事 • イベント3日前に新バージョン完成、申請→翌朝審査通過 • イベント前日の夜、新機能の表示系バグを発見、修正→翌未明審査通過 • イベント初日の夜、重大なバグを発見 →特急審査を依頼して4時間で審査通過

  12. 正直しんどかった

  13. CodePushを導入していれば ホットパッチングできたのに…

  14. なんで導入して いなかったのか…

  15. なんで導入していなかったのか… • なんか面倒そうだったので後回しにしていた • Appleの審査が十分早かったのであまり必要性を感じていなかった

  16. 後悔先に立たず

  17. 時すでにお

  18. What is CodePush?

  19. の前に

  20. ざっくりReact Native

  21. ざっくりReact Native • Reactベースでネイティブアプリ開発のためのフレームワーク • React由来のコンポーネントベースで、reduxとも親和性が高い • JavaScript(JSX)で記述、JavaScriptCore上で動作 https://facebook.github.io/react-native/

  22. ざっくりReact Native UIKitなど React Native Library JavaScriptCore React JS アプリケーションコード

    React Native JS Library
  23. ざっくりReact Native UIKitなど React Native Library JavaScriptCore React JS アプリケーションコード

    React Native JS Library jsbundle
  24. What is CodePush?

  25. What is CodePush? • Microsoft製のクラウドサービス • React NativeやCordovaのJSコードをホットパッチング可能 • ウェブ、SDK、CLIが提供されている

    • 以前は独立したサービス
 →現在はVisual Studio App Centerに統合 https://github.com/Microsoft/code-push
  26. What is CodePush? UIKitなど React Native Library JavaScriptCore React JS

    アプリケーションコード React Native JS Library jsbundle ここの部分 を配信
  27. Visual Studio App Center • CodePushの他にも
 CI、テスト、Analytics、 Push通知など多機能 • 無料から利用可能


    (ビルド回数や時間に制限有) • CodePushは無料で無制限に 利用可能 https://appcenter.ms
  28. Visual Studio App Center • CodePushの他にも
 CI、テスト、Analytics、 Push通知など多機能 • 無料から利用可能


    (ビルド回数や時間に制限有) • CodePushは無料で無制限に 利用可能 https://appcenter.ms
  29. Fantastic

  30. でも…

  31. ホットパッチングって 大丈夫なの?

  32. 終わりなきリジェクト との戦い

  33. Appleのガイドラインを
 振り返る

  34. Appleのガイドラインを振り返る 2.7 Apps that download code in any way or

    form will be rejected 2.8 Apps that install or launch other executable code will be rejected App Store Review Guidelines (2015)
  35. Appleのガイドラインを振り返る 2.7 Apps that download code in any way or

    form will be rejected 2.8 Apps that install or launch other executable code will be rejected App Store Review Guidelines (2015)
  36. Appleのガイドラインを振り返る 2.5.2 Apps should be self-contained in their bundles, and

    may not read or write data outside the designated container area, nor may they download, install, or execute code which introduces or changes features or functionality of the app, including other apps. (抜粋) App Store Review Guidelines (2016)
  37. Appleのガイドラインを振り返る 2.5.2 Apps should be self-contained in their bundles, and

    may not read or write data outside the designated container area, nor may they download, install, or execute code which introduces or changes features or functionality of the app, including other apps. (抜粋) App Store Review Guidelines (2016)
  38. Appleのガイドラインを振り返る 3.3.2 An Application may not download or install executable

    code. Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exception to the foregoing is scripts and code downloaded and run by Apple's built-in WebKit framework or JavascriptCore, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store. Apple Developer Program License Agreement (2016)
  39. Appleのガイドラインを振り返る 3.3.2 An Application may not download or install executable

    code. Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exception to the foregoing is scripts and code downloaded and run by Apple's built-in WebKit framework or JavascriptCore, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store. Apple Developer Program License Agreement (2016)
  40. Appleのガイドラインを振り返る 3.3.2 An Application may not download or install executable

    code. Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exception to the foregoing is scripts and code downloaded and run by Apple's built-in WebKit framework or JavascriptCore, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store. Apple Developer Program License Agreement (2016)
  41. Appleのガイドラインを振り返る 3.3.2 An Application may not download or install executable

    code. Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exception to the foregoing is scripts and code downloaded and run by Apple's built-in WebKit framework or JavascriptCore, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store. Apple Developer Program License Agreement (2016)
  42. Appleのガイドラインを振り返る • アプリは、機能を変えるようなコードをダウンロード、インストール、
 実行してはならない • インタープリテッドコードは、すべてのスクリプトがアプリに含まれて
 いる必要がある • 唯一の例外は、WebKitやJavaScriptCoreによってダウンロード、実行
 される場合のみ

  43. React Nativeは JavaScriptCore上で 動くので-

  44. 現在のAppleのガイドライン 3.3.2 Except as set forth in the next paragraph,

    an Application may not download or install executable code. Interpreted code may be downloaded to an Application but only so long as such code: (a) does not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store, (b) does not create a store or storefront for other code or applications, and (c) does not bypass signing, sandbox, or other security features of the OS. Apple Developer Program License Agreement (Current)
  45. 現在のAppleのガイドライン 3.3.2 Except as set forth in the next paragraph,

    an Application may not download or install executable code. Interpreted code may be downloaded to an Application but only so long as such code: (a) does not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store, (b) does not create a store or storefront for other code or applications, and (c) does not bypass signing, sandbox, or other security features of the OS. Apple Developer Program License Agreement (Current)
  46. 現在のAppleのガイドライン 3.3.2 Except as set forth in the next paragraph,

    an Application may not download or install executable code. Interpreted code may be downloaded to an Application but only so long as such code: (a) does not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store, (b) does not create a store or storefront for other code or applications, and (c) does not bypass signing, sandbox, or other security features of the OS. Apple Developer Program License Agreement (Current)
  47. 現在のAppleのガイドライン 3.3.2 Except as set forth in the next paragraph,

    an Application may not download or install executable code. Interpreted code may be downloaded to an Application but only so long as such code: (a) does not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store, (b) does not create a store or storefront for other code or applications, and (c) does not bypass signing, sandbox, or other security features of the OS. Apple Developer Program License Agreement (Current)
  48. 現在のAppleのガイドライン 3.3.2 Except as set forth in the next paragraph,

    an Application may not download or install executable code. Interpreted code may be downloaded to an Application but only so long as such code: (a) does not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store, (b) does not create a store or storefront for other code or applications, and (c) does not bypass signing, sandbox, or other security features of the OS. Apple Developer Program License Agreement (Current)
  49. 現在のAppleのガイドライン • App Storeに申請されたのと違う機能を提供して、アプリの主目的を
 変えない • 他のコードやアプリのストアやストアフロントを作成しない • 署名やサンドボックスその他OSのセキュリティ機能を迂回しない →以上の条件を満たして入れば、実行可能なコードをダウンロードする


    ことはOK
  50. CodePushによる ホットパッチングは合法 用法・用量を守って正しくお使いください

  51. 同様のサービスは?

  52. 同様のサービスは? • Rollout.io、JSPatch →2017年3月、これらを使用していた開発者にAppleから警告
 Apple Developer Program License Agreementと
 App

    Store Review Guidelinesに抵触 →リジェクト対象に https://forums.developer.apple.com/thread/73640
  53. 同様のサービスは? “This includes any code which passes arbitrary parameters to

    dynamic methods such as dlopen(), dlsym(), respondsToSelector:, performSelector:, method_exchangeImplementations(), and running remote scripts in order to change app behavior or call SPI, based on the contents of the downloaded script. Even if the remote resource is not intentionally malicious, it could easily be hijacked via a Man In The Middle (MiTM) attack, which can pose a serious security vulnerability to users of your app.” https://forums.developer.apple.com/thread/73640
  54. 同様のサービスは? “This includes any code which passes arbitrary parameters to

    dynamic methods such as dlopen(), dlsym(), respondsToSelector:, performSelector:, method_exchangeImplementations(), and running remote scripts in order to change app behavior or call SPI, based on the contents of the downloaded script. Even if the remote resource is not intentionally malicious, it could easily be hijacked via a Man In The Middle (MiTM) attack, which can pose a serious security vulnerability to users of your app.” https://forums.developer.apple.com/thread/73640
  55. 同様のサービスは? “This includes any code which passes arbitrary parameters to

    dynamic methods such as dlopen(), dlsym(), respondsToSelector:, performSelector:, method_exchangeImplementations(), and running remote scripts in order to change app behavior or call SPI, based on the contents of the downloaded script. Even if the remote resource is not intentionally malicious, it could easily be hijacked via a Man In The Middle (MiTM) attack, which can pose a serious security vulnerability to users of your app.” https://forums.developer.apple.com/thread/73640
  56. セキュリティの 観点からダメ

  57. ホットパッチング自体は合法

  58. CodePushを使ってみよう

  59. CodePushを使ってみよう 1. App Centerでアプリを登録する 2. App Center CLIをインストール 3. React

    Native Client SDKをインストール 4. アプリケーションコードの修正
  60. 1. App Centerで
 アプリを登録する

  61. 1. App Centerでアプリを登録する

  62. 1. App Centerでアプリを登録する

  63. 1. App Centerでアプリを登録する

  64. 1. App Centerでアプリを登録する

  65. 1. App Centerでアプリを登録する

  66. 1. App Centerでアプリを登録する

  67. 1. App Centerでアプリを登録する

  68. 1. App Centerでアプリを登録する

  69. 1. App Centerでアプリを登録する

  70. 1. App Centerでアプリを登録する

  71. 2. App Center CLIを
 インストール

  72. 2. App Center CLIをインストール $ brew install node $ npm

    install -g appcenter-cli
  73. 2. App Center CLIをインストール $ appcenter login 
 Opening your

    browser...
 ? Visit https://appcenter.ms/cli-login?hostname=xxx.local and enter the code:
 ? Access code from browser: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Logged in as xxxxxxxx
  74. 2. App Center CLIをインストール $ appcenter codepush deployment list -a

    <ORG>/<APP> 
 !""""""""""""#"""""""""""""""""""""""""""""""""""""""$
 % Name % Key %
 &""""""""""""'"""""""""""""""""""""""""""""""""""""""(
 % Staging % xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx %
 &""""""""""""'"""""""""""""""""""""""""""""""""""""""(
 % Production % xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx %
 )""""""""""""*"""""""""""""""""""""""""""""""""""""""+
  75. 3. React Native Client SDKを インストール

  76. 3. React Native Client SDKをインストール $ cd /path/to/project $ npm

    install --save react-native-code-push
  77. 3. React Native Client SDKをインストール $ react-native link react-native-code-push ...

    ? What is your CodePush deployment key for Android (hit <ENTER> to ignore) ... ? What is your CodePush deployment key for iOS (hit <ENTER> to ignore)
  78. 4. アプリケーションコードの修正

  79. 4. アプリケーションコードの修正 App.js export default class App extends React.Component<Props, State>

    { // ... }
  80. 4. アプリケーションコードの修正 App.js import codePush from ‘react-native-code-push’ class App extends

    React.Component<Props, State> { // ... } App = codePush(App) export default App
  81. 4. アプリケーションコードの修正 App.js import codePush from ‘react-native-code-push’ class App extends

    React.Component<Props, State> { // ... } App = codePush({ checkFrequency: codePush.CheckFrequency.ON_APP_RESUME, installMode: codePush.InstallMode.ON_NEXT_RESUME, )(App) export default App
  82. That’s it!

  83. CodePushで配信してみよう

  84. CodePushで配信してみよう $ appcenter codepush release-react -a <ORG>/<APP> -d Staging

  85. Demo https://github.com/miyabi/iosdc18example

  86. まとめ • CodePushの導入は簡単!デプロイも簡単! • Appleのガイドライン的にもOKなので安心して使える!
 (ガイドラインに従って適切に使いましょう) • JavaScript部分のみの配信なので、適用できるところは限られる
 (既存アプリへの導入も可能)

  87. Thank you!