Jak poprawnie zautomatyzować aplikacje React Native za pomocą Fastlane?

W tym artykule dowiesz się, jak automatycznie wygenerować aplikację napisaną w React Native i wysłać ją do Firebase (Android) oraz Testflight (iOS) za pomocą Fastlane oraz jak skonfigurować circleCi.

26 sierpnia 2022

Jeśli pisałeś aplikacje React Native, prawdopodobnie zauważyłeś, że proces generowania wersji beta wymaga wykonania wielu powtarzalnych kroków, szczególnie w przypadku aplikacji wieloplatformowych. Istnieje kilka rozwiązań automatyzujących generowanie wersji beta.

Potraktuj ten artykuł jako poradnik, znajdziesz w nim pomocne instrukcje, ale także uwagi, rozwiązania błędów oraz przykładowe pliki konfiguracyjne. Ten artykuł pomoże Ci dodać aplikacje dla testerów wybranych przez Ciebie oraz skonfigurować projekt React Native z Fastlane i CircleCi w celu automatyzowania proces testowania.

Fastlane + TestFlight

Fastlane początkowo było narzędziem dla programistów iOS, które pomagało w zarządzaniu certyfikatami, podpisywaniu i przesyłaniu aplikacji do App Store. Jest to oprogramowanie, które automatyzuje cały proces od kompilacji do wdrożenia. Fastlane oparty na skryptach Ruby, działa z wiersza poleceń bez konieczności interakcji z interfejsem. Jest również oddzielony od systemów CI/CD. Aby korzystać z dalszej części instrukcji musisz posiadać Apple Id oraz Apple Developer Account.

W celu zainstalowania Fastlane polecam dwa poniższe artykuły, które krok po kroku pokazują jak najlepiej to zrobić:
https://thecodingmachine.github.io/react-native-boilerplate/docs/BetaBuild/
https://medium.com/@danielvivek2006/setup-fastlane-match-for-ios-6260758a9a4e


Trudną kwestią w przejściu tej instrukcji może być zrozumienie idei - fastlane match - udostępniania jednej tożsamości w celu podpisywania kodu całemu zespołowi programistów, aby uprościć konfigurację współprojektowania i zapobiec problemom. Tworzy wszystkie wymagane certyfikaty i profile (provisioning profile) i przechowuje je w oddzielnym repozytorium git. Każdy członek zespołu mający dostęp do repozytorium może wykorzystać te dane uwierzytelniające do podpisywania kodu. Fastlane match również automatycznie naprawia uszkodzone i wygaśnięte certyfikaty. To najłatwiejszy sposób udostępniania danych uwierzytelniających do podpisywania między zespołami.

Ewentualne problemy:

  • Error: No profile for team '...' matching '...' found

Należy sprawdzić team_id. Jeżeli w zmiennych środowiskowych zadeklarowane jest id teamu to musi ono być identyczne.

  • Missing Compliance status in TestFlight

Do pliku info.plist należy dodać:

  • Exit status: 128: "Couldn't commit or push changes back to git"

Należy dodać klucz ssh do swojego konta, a nie do repozytorium z certyfikatami.

https://stackoverflow.com/questions/56718830/git-and-bitbucket-unauthorized-when-pushing

Fastlane + Firebase

Firebase umożliwia zainstalowanie aplikacji testowej dla testerów. W celu konfiguracji Firebase z Fastlane należy posiadać konto google oraz założyć konto Firebase. W celu zainstalowania Firebase polecam poniższy artykuł: https://github.com/JesuHrz/distribution-with-firebase-and-fastlane

  1. Musisz posiadać service account key (google cloud platform): Pod tym linkiem znajdziesz informacje jak go wygenerować: https://docs.fastlane.tools/getting-started/android/setup/

  2. Na platformie Google Could należy stworzyć projekt i w obrębie tego projektu nadać role:

  • Cloud Build Service Account
  • Firebase Admin SDK Administrator Service Agent
  • Firebase App Check Admin
  • Firebase App Distribution Admin
  • Service Account Token Creator

    3. Należy wygenerować klucz json(addKey):
google cloud platform


Następnie dodać go do folderu: /android/fastlane/serviceAccountKey. Dodawaj klucz do .gitignore.

.gitignore poza innymi plikami powinien zawierać:

Po zakończonej konfiguracji Firebase i Fastlane zaloguj się w konsoli do Firebase:
firebase login

Następnie stwórz projekt Firebase (w przeglądarce) https://console.firebase.google.com/?pli=1.

sdk setup


W panelu dodawania aplikacji znajdziesz AppID, które należy dodać do zmiennych środowiskowych.
Następnie w Release&Monitor → App distribution, dodajemy grupę testerów i id grupy dodaj do zmiennych środowiskowych.

app distibution


Dodajemy 'task' w pliku Fastfile:

Aplikacje można wrzucić z konsoli za pomocą następującej komendy:
fastlane beta env:development


CircleCi


Ogólną konfigurację CircleCi z projektem React Native znajdziesz pod poniższym linkiem: https://circleci.com/blog/ci-for-react-apps/

ANDROID: CircleCi - Firebase - Fastlane
W zakładce “Organization Settingsnależy dodać context (mechanizm zabezpieczania i udostępniania zmiennych środowiskowych w projektach) a w nim dodać zmienne środowiskowe używane w plikach Fastlane oraz config.yml :

  • GROUPS
  • APP_ID
  • SERVICE_ACCOUNT_KEY_PATH
  • PACKAGE_NAME
  • GOOGLE_SERVICE_ACCOUNT (wersja base64 service account key - trzeba zmienić typ z json na base64)

Ważne! Należy zakomentować w pliku build.gradle ‘apply from…’.

IOS: CircleCi - Testflight - Fastlane

Dodanie SSH keys do CircleCi - połączenie CircleCi z repozytorium zawierającym certyfikaty. Najlepiej wygenerować lokalnie ssh key, private key dodać w CircleCi a public key dodać w repozytorium bitbucket z certyfikatami - jako access key.


Zmienną środowiskową host - 'bitbucket.org' należy dodać do contextu CircleCi.

Ważne: Trzeba dodać w CircleCi zmienne środowiskowe - FASTLANE_USER, FASTLANE_PASSWORD. Więcej o dobrych praktykach związanych z doborem zmiennych środowiskowych przeczytasz w:
https://docs.fastlane.tools/best-practices/continuous-integration/

Wrzucanie aplikacji przez CircleCi do TestFlight z użyciem konta, które ma włączoną weryfikację dwuetapową(2FA): upload_to_testflight()- trzeba dodać apple_idm, które znajdziesz w App Store Connect. Wtedy można skorzystać z FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD - hasła ustawionego w App Store Connect, które zastępuje konieczność podania kodu wysłanego na numer telefonu (do wygenerowania tutaj: https://appleid.apple.com/).

Mimo, że mamy ustawione to hasło, to musimy też dodać skip_waiting_for_build_processing, żeby CircleCi nie czekało na podanie kodu przysłanego na numer telefonu.


Więcej o przesyłaniu TestFlighta za pomocą Fastlane i 2FA przeczytasz w poniższych artykułach:
https://dev.to/dumazy/upload-to-testflight-with-fastlane-and-2fa-11k8

https://discuss.circleci.com/t/apple-2fa-login-session-token-lasts-for-few-minutes-not-for-30-days-as-mentioned-in-circleci-documentation/32466/2


Dodatkowo: W celu przyspieszenia budowanie CircleCi z użyciem macOS VM można użyć Gen2 macos resources (trzeba posiadać plan Performance):


Zmienne środowiskowe CircleCi dla Android i IOS:

  • APP_APPLE_ID
  • APP_ID
  • APPLE_ID
  • BUNDLE_ID
  • FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD
  • FASTLANE_PASSWORD
  • FASTLANE_USER
  • GIT_CERT_URL
  • GOOGLE_SERVICES_ACCOUNT
  • GROUPS
  • host
  • ITS_TEAM_ID
  • MATCH_USERNAME
  • SERVICE_ACCOUNT_KEY_PATH
  • PACKAGE_NAME
  • TEAM_ID


Przykładowy config.yml dla IOS i Android:

Ważne: przed każdym budowaniem aplikacji trzeba podnieść wersję aplikacji w dwóch miejscach, należy zmienić wartość ‘APP_VERSION’.

configCircleCi

Podsumowując

Właściwe testowanie może być nawet ważniejsze dla aplikacji mobilnych niż dla aplikacji webowych. Wymaganie od użytkowników instalowania aktualizacji Twojej aplikacji za każdym razem, gdy naprawisz błąd, to łatwy sposób na zniechęcenie ich do korzystania z aplikacji. Co ważniejsze, automatyzujesz proces testowania i upewnisz się, że te błędy nie są w pierwszej kolejności przesyłane do kodu produkcyjnego.

Udanego kodowania!