It’s now or never

IT系の技術ブログです。気になったこと、勉強したことを備忘録的にまとめて行きます。

【ReactNative】【参考】ReactNativeのバージョンアップ手順

ReactNativeのライブラリのバージョンアップはなかなかつらい作業です。
現在のプロダクトは、0.54.3を使用していて、0.59.0まで上げることを目標に作業しています。

その時のバージョンアップ作業を行うにあたり参考にした資料や手順を記載しています。

前提として、作業手順についてはあくまで私が個人的に考えて行っているものであり正規の手順に従っているかは保証できませんので、あくまで参考程度として考えていただいてもらえると幸いです。

公式のガイドページ

https://facebook.github.io/react-native/docs/upgrading

react-native-git-upgrade

  • react-native upgradeを安定させたツールとして react-native-git-upgrade というものがあるらしいです
  • これを使って0.1ずつ上げていくのが、一番安全なバージョンアップ方法とのことです
  • 一応公式でもこれ使えという案内があるので、とりあえずこれ使えば良さそう?
    • 今回はこのコマンドを使っています
    • インストール方法「npm install -g react-native-git-upgrade」

バージョンアップ手順(暫定)

色々と模索した結果一番効率が良さそうで、影響範囲を少しずつ確認できる方法を記載しています。

プロジェクト全体のアップデート

  • 1.CHANGELOGを確認して、上げる対象のバージョンにどんな変更が入っているかを把握する
    • 確実に上げる必要があるバージョンやbreaking changeの変更なども記載されているため必ず確認した方がよい
  • 2.https://pvinis.github.io/purge-web/ でdiffをなんとなく確認
    • 必要に応じて確認する
  • 3.react-native-git-upgradeコマンドでバージョンを上げる
    • % react-native-git-upgrade <対象バージョン>
  • 4.git statusでどのファイルが変更されていて、どのファイルがコンフリクトしているか確認

iOSのアップデート

  • 1.関連ファイルのコンフリクトを修正(.mファイル、.hファイル、.pbxprojファイルなど)
  • 2.iosのpodを更新して依存ライブラリを修正する
    • まず pod update を実行する
      • pod installするとReactNativeの関連ライブラリ関係でエラーになることが多いため一度updateする
      • ※ pod updateするとその他の関係ないライブラリもアップデートされるので注意
    • Podfile.lockを編集し、関係のある変更(ReactNative、yogaなど関連ライブラリ)のみ差分を更新し、その他はリバートする
    • Podsディレクトリを削除し、pod installを実行
      • これで必要なライブラリのみ更新される
  • 3.react-native run-ios を実行し、アプリがビルドできるか確認
  • 4.(ビルド時にエラーが発生している場合は、内容確認して修正する)

Androidのアップデート

  • 1.関連ファイルのコンフリクトを修正(.javaファイル、build.gradleファイルなど)
  • 2.Android Studioを起動し、gradle syncを行う
  • 3.androidのgradleビルドを確認してエラーがあったら修正する
  • 4.react-native run-android を実行し、アプリがビルドできるか確認

その他、動作確認

  • 1.iOSAndroidの実機(シミュレータ)でアプリの機能が正しく動いているか確認
  • 2.code_pushが正しく動くか確認
  • 3.jestが正しく動くか確認

感想/注意点

  • .pbxprojファイルあたりがコンフリクトする場合は、特に慎重に内容を確認した方がいいです
  • マイナーアップデートでもカジュアルにビルドに失敗するので辛いです
    • ReactNative自体のコンポーネントにバグが合ったりして、それが外部モジュール内(npmパッケージ)で発生していたりするので問題の切り分けが難しいです
    • npmパッケージ側のissueにめぼしいものがなければ、ReactNative自体で問題を探してみるといいかもしれません。
  • 確認時に発生した問題はメモとして列挙しておくとあとで解析が捗るかもしれません。

参考リンク