Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Masayuki Iwai

August 30, 2018
Tweet

More Decks by Masayuki Iwai

Other Decks in Technology

Transcript

  1. CodePushとReact Nativeで
    緊急OTAリリース!了解!
    Masayuki [email protected]
    #iosdc

    View Slide

  2. CodePushとReact Nativeで
    緊急OTAリリース!了解!
    Masayuki [email protected]
    #iosdc
    ホットパッチング

    View Slide

  3. 自己紹介
    岩井雅幸@myb


    モバイル・アプリケーション・エンジニア

    at Unity Technologies Japan

    以前はWebデザイン・開発、Flashコンテ
    ンツ制作、iOSアプリ、ゲーム制作など
    著書に「uGUIではじめる Unity UIデザイン
    の教科書」

    View Slide

  4. 自己紹介
    岩井雅幸@myb


    モバイル・アプリケーション・エンジニア

    at Unity Technologies Japan

    以前はWebデザイン・開発、Flashコンテ
    ンツ制作、iOSアプリ、ゲーム制作など
    著書に「uGUIではじめる Unity UIデザイン
    の教科書」

    View Slide

  5. こんなアプリを作っています

    View Slide

  6. Unity Meetup
    • Unityユーザーのためのイベントアプリ

    イベント検索、タイムテーブル、参加申し

    込み、チェックイン、アンケート回答機能
    • フルReact Native

    導入の経緯は昨年のiOSDC 2017 Reject Conf
    での発表を参照

    https://www.slideshare.net/MasayukiIwai/
    react-native-110226150

    View Slide

  7. トラブルが…

    View Slide

  8. 2018年5月

    View Slide

  9. Unite Tokyo 2018での出来事

    View Slide

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

    連携を依頼していたがギリギリになってしまった
    • 前バージョンでパフォーマンスが悪かったのでリファクタリング

    View Slide

  11. Unite Tokyo 2018での出来事
    • イベント3日前に新バージョン完成、申請→翌朝審査通過
    • イベント前日の夜、新機能の表示系バグを発見、修正→翌未明審査通過
    • イベント初日の夜、重大なバグを発見
    →特急審査を依頼して4時間で審査通過

    View Slide

  12. 正直しんどかった

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  16. 後悔先に立たず

    View Slide

  17. 時すでにお

    View Slide

  18. What is CodePush?

    View Slide

  19. の前に

    View Slide

  20. ざっくりReact Native

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. What is CodePush?

    View Slide

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

    →現在はVisual Studio App Centerに統合
    https://github.com/Microsoft/code-push

    View Slide

  26. What is CodePush?
    UIKitなど
    React Native Library
    JavaScriptCore
    React JS
    アプリケーションコード React Native JS Library
    jsbundle
    ここの部分
    を配信

    View Slide

  27. Visual Studio App Center
    • CodePushの他にも

    CI、テスト、Analytics、
    Push通知など多機能
    • 無料から利用可能

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

    View Slide

  28. Visual Studio App Center
    • CodePushの他にも

    CI、テスト、Analytics、
    Push通知など多機能
    • 無料から利用可能

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

    View Slide

  29. Fantastic

    View Slide

  30. でも…

    View Slide

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

    View Slide

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

    View Slide

  33. Appleのガイドラインを

    振り返る

    View Slide

  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)

    View Slide

  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)

    View Slide

  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)

    View Slide

  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)

    View Slide

  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)

    View Slide

  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)

    View Slide

  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)

    View Slide

  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)

    View Slide

  42. Appleのガイドラインを振り返る
    • アプリは、機能を変えるようなコードをダウンロード、インストール、

    実行してはならない
    • インタープリテッドコードは、すべてのスクリプトがアプリに含まれて

    いる必要がある
    • 唯一の例外は、WebKitやJavaScriptCoreによってダウンロード、実行

    される場合のみ

    View Slide

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

    View Slide

  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)

    View Slide

  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)

    View Slide

  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)

    View Slide

  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)

    View Slide

  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)

    View Slide

  49. 現在のAppleのガイドライン
    • App Storeに申請されたのと違う機能を提供して、アプリの主目的を

    変えない
    • 他のコードやアプリのストアやストアフロントを作成しない
    • 署名やサンドボックスその他OSのセキュリティ機能を迂回しない
    →以上の条件を満たして入れば、実行可能なコードをダウンロードする

    ことはOK

    View Slide

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

    View Slide

  51. 同様のサービスは?

    View Slide

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

    Apple Developer Program License Agreementと

    App Store Review Guidelinesに抵触
    →リジェクト対象に
    https://forums.developer.apple.com/thread/73640

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  56. セキュリティの
    観点からダメ

    View Slide

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

    View Slide

  58. CodePushを使ってみよう

    View Slide

  59. CodePushを使ってみよう
    1. App Centerでアプリを登録する
    2. App Center CLIをインストール
    3. React Native Client SDKをインストール
    4. アプリケーションコードの修正

    View Slide

  60. 1. App Centerで

    アプリを登録する

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  71. 2. App Center CLIを

    インストール

    View Slide

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

    View Slide

  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

    View Slide

  74. 2. App Center CLIをインストール
    $ appcenter codepush deployment list -a /

    !""""""""""""#"""""""""""""""""""""""""""""""""""""""$

    % Name % Key %

    &""""""""""""'"""""""""""""""""""""""""""""""""""""""(

    % Staging % xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx %

    &""""""""""""'"""""""""""""""""""""""""""""""""""""""(

    % Production % xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx %

    )""""""""""""*"""""""""""""""""""""""""""""""""""""""+

    View Slide

  75. 3. React Native Client SDKを
    インストール

    View Slide

  76. 3. React Native Client SDKをインストール
    $ cd /path/to/project
    $ npm install --save react-native-code-push

    View Slide

  77. 3. React Native Client SDKをインストール
    $ react-native link react-native-code-push
    ...
    ? What is your CodePush deployment key for Android (hit
    to ignore)
    ...
    ? What is your CodePush deployment key for iOS (hit to
    ignore)

    View Slide

  78. 4. アプリケーションコードの修正

    View Slide

  79. 4. アプリケーションコードの修正
    App.js
    export default class App extends React.Component {
    // ...
    }

    View Slide

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

    View Slide

  81. 4. アプリケーションコードの修正
    App.js
    import codePush from ‘react-native-code-push’
    class App extends React.Component {
    // ...
    }
    App = codePush({
    checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
    installMode: codePush.InstallMode.ON_NEXT_RESUME,
    )(App)
    export default App

    View Slide

  82. That’s it!

    View Slide

  83. CodePushで配信してみよう

    View Slide

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

    View Slide

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

    View Slide

  86. まとめ
    • CodePushの導入は簡単!デプロイも簡単!
    • Appleのガイドライン的にもOKなので安心して使える!

    (ガイドラインに従って適切に使いましょう)
    • JavaScript部分のみの配信なので、適用できるところは限られる

    (既存アプリへの導入も可能)

    View Slide

  87. Thank you!

    View Slide