Improving the development environment for react-native

Slide 1

Slide 1 text

DXΛόΫ্͛͢ΔͨΊʹ   ͍Ζ͍Ζ΍ͬͨ͜ͱ mrtry 2021/05/21

Slide 2

Slide 2 text

ࣗݾ঺հ • ͱΒ͍(@mrtry) • Yamamoto Shinnosuke • v0.56.0͙Β͍͔Β৮ͬͯΔ(4೥ੜ) • AndroidΤϯδχΞͱReact NativeΤϯδχΞΛߦ͖དྷͯ͠Δ

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

͋Β͢͡ • ΞϓϦ಺੡Ϛϯͱͯ͠࠷ۙೖࣾ🥳 • ৭ʑͱ։ൃ؀ڥ͕੔ͬͯͳ͍😇 • DXΛόΫ্͍͖͍͛ͯͨ͠💪

Slide 5

Slide 5 text

DXΛόΫ্͍͖͍͛ͯͨ͠🤞 ͦΕͧΕGistʹࡌͤͯ·͢🥳 • releaseޙॲཧ͘Μ • Α͠ͳʹnpm install͢Δ͘Μ • ͍͍͔Μ͡ʹόʔδϣϯΞήΞή͘Μ • ֤छπʔϧͷόʔδϣϯݻఆ(node/npmɺXcodeɺfastlane)

Slide 6

Slide 6 text

releaseޙॲཧ͘Μ

Slide 7

Slide 7 text

releaseޙॲཧ͘Μ ϦϦʔεޙʹ΍Δޙॲཧ͕໘౗ 😇 (git fl owӡ༻) • tagଧͪ • masterʹmerge • developͷࠩ෼͋Ε͹औΓࠐΜͰɺdevelop΁merge

Slide 8

Slide 8 text

releaseޙॲཧ͘Μ ϦϦʔεޙʹ΍Δޙॲཧ͕໘౗ 😇 (git fl owӡ༻) • tagଧͪ ← ࣗಈԽͰ΍ͬͯ΄͍͠ • masterʹmerge ← ࣗಈԽͰ΍ͬͯ΄͍͠ • developͷࠩ෼͋Ε͹औΓࠐΜͰɺdevelop΁merge

Slide 9

Slide 9 text

releaseޙॲཧ͘Μ GitHub ActionͰࣗಈԽͨ͠🥳 ϦϦʔε͕ऴΘͬͨλΠϛϯάͰPRΛ࡞Δͱɺ PR࡞੒ۦಈͰrelease/x.x.xͷcommit಺༰ͰҎԼΛ࣮ߦ͢Δ x.x.x ͷλάΛଧͭ commitΛmasterʹ൓ө͢Δ

Slide 10

Slide 10 text

releaseޙॲཧ͘Μ jobs: create-tag: steps: - name: Create tag id: create_tag run: | tag=$( release branch͔Βx.x.xൈ͍ͯ͘Δ ) - uses: actions/checkout@v2 - run: | git tag ${{ tag }} git push origin ${{ tag } } merge-to-master: steps: - uses: mtanzi/action-automerge@v1 with: github_token: ${{ github.token }} source: ${{ release branch }} target: 'master λάͱmaster൓ө͕ࣗಈͰ͞ΕΔ ͋ͱ͸ɺdevelop෼Λmergeͯ͠ऴΘΓ🥳

Slide 11

Slide 11 text

Α͠ͳʹ npm install͢Δ͘Μ

Slide 12

Slide 12 text

Α͠ͳʹnpm install͢Δ͘Μ npm͠๨Ε͕ͪ໰୊ɺ͋Δͱ͓΋͍·͢ 😇 • ϦϑΝΫλ͍ͯ͠Δͱ΍Γ͕ͪ😇 • ৽نػೳ࣮૷͍ͯ͠Δͱ΍Γ͕ͪ😇 • ʮcheckout͚ͨ͠Ͳɺಈ͔ͳ͍…ʯͱ΍Γ͕ͪ😇 BranchҠಈͨ͠λΠϛϯάͰɺnpm iͯ͠΄͍͠😭

Slide 13

Slide 13 text

Α͠ͳʹnpm install͢Δ͘Μ huskyΛಋೖ🐶 • GitͷΠϕϯτۦಈͰεΫϦϓτΛ࣮ߦͰ͖ΔΑ͏ʹ͢Δ͘Μ git checkoutͷλΠϛϯάͰεΫϦϓτΛ࣮ߦ͢Δ🤟 • git checkoutલޙͷpackage.jsonͷhashΛऔಘ • ࠩ෼͕͋ͬͨΒnpm i͢Δ

Slide 14

Slide 14 text

Α͠ͳʹnpm install͢Δ͘Μ prevPackageHash=$(Ҡಈલͷpackage.jsonͷhash ) nextPackageHash=$(Ҡಈޙͷpackage.jsonͷhash) if [ "$prevPackageHash" != "$nextPackageHash" ]; then npm i els e echo "post-checkout: do nothing " f i npm i͠๨ΕʹΑΔʮͳΜ͔ಈ͔ͳ͍ʯ͕ղফ͞Εͨ🥳

Slide 15

Slide 15 text

͍͍͔Μ͡ʹ ΞϓϦͷόʔδϣϯ ΞήΞή͘Μ

Slide 16

Slide 16 text

͍͍͔Μ͡ʹόʔδϣϯΞήΞή͘Μ ϦϦʔεલͷόʔδϣϯߋ৽͕໘౗🤮 • JavaScript (package.json / package-lock.json) • Android (build.gradle) • iOS (Xcode) ίϚϯυҰൃΩϝͨΒͦΕͧΕΑ͠ͳʹߋ৽͞Εͯ΄͍͠😭

Slide 17

Slide 17 text

͍͍͔Μ͡ʹόʔδϣϯΞήΞή͘Μ Release branchͷόʔδϣϯΛ൓ө͢ΔεΫϦϓτΛ࡞Δ JavaScript • npmʹόʔδϣϯߋ৽ػೳ͋ΔͷͰ࢖͏ Android, iOS • Fastlaneʹόʔδϣϯߋ৽ϓϥάΠϯ͕͋ΔͷͰ࢖͏

Slide 18

Slide 18 text

͍͍͔Μ͡ʹ όʔδϣϯ ΞήΞή͘Μ # package.json·ΘΓΛߋ৽ npm --no-git-tag-version version $versionName # iOS fastlane run increment_build_number fastlane run increment_version_number $versionName # Android fastlane run increment_version_code fastlane run increment_version_name $versionName # diffΛ֬ೝ git add -u git diff --cached ͜ΕΛΩϝΕ͹ղܾ🤟 Android͸Plugin࢖ͬͯΔ

Slide 19

Slide 19 text

֤छπʔϧͷόʔδϣϯݻఆ

Slide 20

Slide 20 text

֤छπʔϧͷόʔδϣϯݻఆ ։ൃ࣌ͷπʔϧଟ͗͢໰୊ɺ͋Δͱࢥ͍·͢ ؀ڥߏஙͰࣄނΔཁҼNo.1 (ಠஅͱภݟ) ʮͳʹ͔͠Βͷπʔϧ͕όʔδϣϯζϨͯͯಈ͔ͳ͍ʯ ͭΒ͍ͷͰɺͦΖ͓͖͍͑ͯͨ

Slide 21

Slide 21 text

֤छπʔϧͷόʔδϣϯݻఆ ͦΕͧΕͷόʔδϣϯΛݻఆ & ࣮ߦ࣌νΣοΫͯ͠ἧ͍͑ͨ • npm/node • Xcode • fastlane • (Android·ΘΓ͸ͦΜͳʹࠔΒͳ͍ؾ͕͢Δ)

Slide 22

Slide 22 text

֤छπʔϧͷόʔδϣϯݻఆ(npm/node) { ... "engines": { "node": "14.16.1", "npm": "6.14.12" }, ... } nvmͰόʔδϣϯἧ͑ͨ .npmrc Ͱ engine-strict=true ͯ͠ɺ࣮ߦ࣌νΣοΫ͔͚ͨ

Slide 23

Slide 23 text

֤छπʔϧͷόʔδϣϯݻఆ(Xcode) # Project rootʹҠಈ cd $(git rev-parse --show-toplevel) # όʔδϣϯνΣοΫ if [ "$(cat .xcode-version)" != "$(xcodebuild -version | awk 'NR==1{print $2}')" ]; then echo 'Invalid Xcode version' exit 1 fi xcode-install (gem) Λಋೖͨ͠ ҎԼͷεΫϦϓτͰɺϏϧυ࣌ʹνΣοΫ͔͚ͨ

Slide 24

Slide 24 text

֤छπʔϧͷόʔδϣϯݻఆ(fastlane) # `fastlane-version` ͱͯ͠Project rootʹఆٛ  gem 'fastlane', ‘2.183.2 '   # `android/` `ios/` ҎԼͷGemfileʹҎԼΛ௥Ճ  # `fastlane-version` ΛಡΈࠐΜͰόʔδϣϯΛἧ͑Δ fastlaneVersion = File.join(File.dirname(__FILE__), '../fastlane-version') eval_gemfile(fastlaneVersion) if File.exist?(fastlaneVersion ) fastlaneͷPluginͷॻ͖ํΛࢀߟʹͨ͠

Slide 25

Slide 25 text

\ we are hiring / ʮ׬ʯ