關注留言點讚，帶你了解最流行的軟體開發知識與最新科技行業趨勢。
本文介紹了如何為 React Native 項目設置 CI/CD 管道。這減少了編寫代碼和向用戶交付代碼之間的時間。
React Native 是一個流行的框架，用於使用 JavaScript 和 React 庫開發跨平台移動應用程式。本文將教授如何為 React Native 項目設置 CI/CD 管道。
持續集成和持續交付/部署 (CI/CD) 是一種軟體開發方法，旨在減少編寫代碼和將代碼交付給用戶之間的時間。這包括自動構建、測試和部署代碼更改。這種做法允許開發人員快速輕鬆地將新功能和錯誤修復推送給他們的用戶，而無需手動構建和部署代碼。
您可以使用各種工具為您的 React Native 項目設置 CI/CD 管道。流行的選擇是：
- CircleCI
- Jenkins
- TravisCI
- GitLab CI/CD
- Github Actions
在本文中，我們將只關注 CircleCI。但是，您可以將此處討論的所有原則應用於任何其他 CI/CD 工具。此外，我們將使用 yarn，但您可以使用 npm 執行相同的操作。
設置 CircleCI
您必須先在 CircleCI 網站上註冊才能使用 CircleCI 設置 CI/CD 管道。之後，您必須將 config.yml 文件添加到您剛剛在 React Native 應用程式根目錄下創建的 circleci 目錄中。構建和測試代碼的說明將在此文件中。您可以使用以下示例 config.yml 文件作為起點。
構建作業是此 config.yml 文件中唯一定義的作業，它執行以下操作：
- 首先，下載存儲庫的代碼。
- 接下來，使用 yarn 安裝項目要求。
- 第三，使用 yarn test 運行測試套件。
- 最後，使用 yarn build 創建應用程式的生產版本。
這個 config.yml 文件是可以修改的。
jobs: build: docker: -image: circleci/node:12 steps: -checkout -run: yarn -run: yarn test -run: yarn build
構建、測試和部署您的應用程式
每當您發布對存儲庫的更改時，如果您的 config.yml</soan> 文件就位，CircleCI 將自動構建和測試您的代碼。CircleCI 儀錶板允許您查看構建狀態和日誌。
如果構建成功，您可以繼續下一步部署代碼。
根據分發機制和目標平台（iOS 或 Android），有多種方式可以發布 React Native 應用程式（App Store、Play Store 或直接向用戶發布）。一些可用的標準選項：
- AppCenter
- Fastlane
- AWS Amplify
在本文中，我們將使用 AppCenter 將我們的 iOS 和 Android 應用發布到它們各自的應用商店。
您必須開設一個 AppCenter 帳戶，然後按照設置說明進行配置。您需要包含應用名稱、包名稱和構建腳本等詳細信息。此外，您還必須上傳適用於 Android 的密鑰庫、適用於 iOS 的配置文件和簽名證書。
這可能是一個令人沮喪的過程，因此我們整理了一份簡短的分步指南，以便您可以繼續為您的應用程式生成必要的證書、配置文件和密鑰存儲。
為您的 iOS 應用程式生成簽名證書和配置文件
要為 iOS 應用程式生成簽名證書和配置文件，您需要執行以下步驟：
- 首先，在 developer.apple.com/account/ 登錄您的 Apple Developer 帳戶。
- 導航到「證書、標識符和配置文件」部分。
- 在「證書」部分，單擊「+」按鈕創建新證書。
- 選擇您要創建的證書類型：
- iOS 應用程式開發：此證書允許您在物理設備上測試您的應用程式並將其提交到 App Store 進行審核。
- App Store 和 Ad Hoc：此證書允許您在 App Store 之外分發您的應用程式（例如，通過 TestFlight）並將其提交給 App Store 以供審核。
- 按照提示生成簽名證書。首先，您必須上傳證書籤名請求 (CSR) 文件，您可以使用 Mac 上的鑰匙串訪問實用程序生成該文件。
- 頒發證書後，下載並雙擊將其安裝到您的鑰匙串中。
- 在「標識符」部分，為您的應用創建一個新標識符。首先，您需要為您的應用選擇一個唯一標識符，例如反向 DNS 樣式字符串（例如 com.example.myapp）。
- 在「Provisioning Profiles」部分，單擊「+」按鈕創建新的配置文件。
- 選擇要創建的配置文件類型：
- 開發：此配置文件允許您在物理設備上測試您的應用程式並將其提交到 App Store 以供審核。
- App Store：此配置文件允許您將您的應用程式提交到 App Store 以供審核。
- Ad Hoc：此配置文件允許您在 App Store 之外分發您的應用程式（例如，通過 TestFlight）。
- 按照提示生成您的配置文件。您將需要選擇您之前創建的簽名證書和您創建的應用程式標識符。
- 生成配置文件後，下載並雙擊以將其安裝到 Xcode 中。
您現在應該能夠使用這些簽名證書和配置文件來構建和簽署您的 iOS 應用程式。
為您的 Android 應用程式創建密鑰庫
要為 Android 應用程式創建密鑰庫，您需要執行以下步驟：
- 首先，在您的開發機器上打開一個終端或命令提示符。
- 然後，導航到要創建密鑰庫文件的目錄。
- 運行以下命令以創建新的 Keystore 文件：
keytool -genkey -v -keystore my-keystore.jks -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
- 將「my-keystore.jks」替換為您的密鑰庫所需的文件名，將「my-key-alias」替換為密鑰庫中密鑰的名稱。
- 系統將提示您輸入密鑰庫和密鑰的密碼。選擇一個強密碼並記下它，因為每次簽署應用程式時都需要它。
- 系統還會提示您輸入您的個人信息（例如姓名、組織等）。此信息將包含在為您的應用程式生成的證書中。
- 創建密鑰庫後，您可以通過在構建配置中指定密鑰庫和密鑰別名來簽署您的 Android 應用程式。
您應該妥善保管您的密鑰庫文件並製作備份副本，以防原件丟失或損壞。您還需要記住密鑰庫密碼，因為每次簽署您的應用程式時都需要它。
現在我們已經具備繼續進行所需的一切，是時候繼續設置 AppCenter 以便將我們的構建上傳到應用程式商店了。
在您的 config.yml 文件中包含以下說明。然後，在 AppCenter 中配置您的應用程式後，您可以將其添加到您的 CircleCI 管道：
- run: name: Install AppCenter CLI command: | npm install -g appcenter-cli - run: name: Deploy to AppCenter (Android) command: | appcenter login --token $APPCENTER_TOKEN appcenter distribute release -f $CIRCLE_ARTIFACTS/app-release.apk --group "Collaborators" --release-notes "Automatic deployment from CircleCI" - run: name: Deploy to AppCenter (iOS) command: | appcenter login --token $APPCENTER_TOKEN appcenter distribute release -f $CIRCLE_ARTIFACTS/app-release.ipa --group "Collaborators" --release-notes "Automatic deployment from CircleCI"
要在此示例中部署 app-release.apk 和 app-release.ipa 文件，我們將使用 AppCenter CLI 登錄到 AppCenter。
CircleCI 儀錶板應配置環境變量 $APPCENTER TOKEN 和 $CIRCLE ARTIFACTS。
可以修改部署命令以滿足您的需要。例如，要發布到 App Store 或 Play Store 而不是直接發布給用戶，您應該提供不同的分發組或發行說明。
結論
本文介紹了如何設置 CircleCI 和 AppCenter 來為 React Native 項目創建 CI/CD 管道。因此，您可以通過自動化構建、測試和部署過程來節省時間和精力，並且可以更快、更一致地為用戶提供新功能和問題修復。
如果你不想完成所有步驟，你可以使用react-native-ci包，它會自動為你設置 CircleCi。但是，我們不推薦它，因為它仍然是一個實驗包，並且依賴於以下自以為是的堆棧：
- Github
- CircleCI
- Dev, Staging, and Production build flavors.