iT邦幫忙

2023 iThome 鐵人賽

DAY 29
0
Mobile Development

30天React Native之旅:從入門到活用系列 第 29

Day 29:iOS 與 Android 的發布

  • 分享至 

  • xImage
  •  

iOS 發布流程

  1. 憑證設定
    在之前的Day24,我們已經介紹了如何取得Apple開發者憑證。而發布到App Store我們需要另外創建一組專屬於生產環境的憑證,有些配置和測試環境的憑證不同,

    • Certificate:選擇iOS Distribution (App Store and Ad Hoc)。
      https://ithelp.ithome.com.tw/upload/images/20231014/20103365lTL4ROrtfO.png
    • Provisioning Profile:選擇App Store,因為我們的目標是將APP發布到App Store。
      https://ithelp.ithome.com.tw/upload/images/20231014/20103365QMJPyGBAIp.png
  2. App Store Connect新增App
    第一次我們要先在App Store Connect新增我們的APP

    • 登入你的 App Store Connect 帳戶。
    • 在主頁面上,點擊「我的Apps」。
    • 點擊選擇「新增App」。
    • 輸入資訊
      https://ithelp.ithome.com.tw/upload/images/20231014/20103365NC7C5eaJge.png
      識別碼記得要和你在Xcode中的Bundle Identifier匹配。
      SKU可以自己命名,但需要在你的帳戶是唯一的。
    • 完成後,點擊「建立」。
  3. 打包

    • 選擇正確的設備目標:不要選到模擬器,選擇 Any iOS Device。
      https://ithelp.ithome.com.tw/upload/images/20231014/201033653S0AWok78r.png
    • 點擊上方的 Product,然後選擇 Archive。開始打包你的APP。
  4. 上傳到 App Store Connect

    • 完成打包後,會看到這個視窗,點擊 Distribute App。
      https://ithelp.ithome.com.tw/upload/images/20231014/20103365DQH1JI4O7V.png
    • 選擇 Test & App Store,繼續完成上傳。
      https://ithelp.ithome.com.tw/upload/images/20231014/20103365BhPhq3ZQ2H.png
  5. 在 App Store Connect 中設定你的應用程式

    • 設定你的APP的預覽圖等等
  6. 送交審核和發布

Android 發布流程

  1. 準備App的簽名密鑰

    輸入

    keytool -genkeypair -v -storetype PKCS12 -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
    

    接著會要你輸入密鑰和一些資訊,完成後會創建一個my-release-key.keystore文件。妥善保存這個文件,建議在安全的地方進行備份。因為如果你失去了這個密鑰,將無法更新在 Google Play 上的應用程式。

    指令參數介紹:

     # -genkeypair: 生成新的密鑰對
     # -v: 啟用詳細輸出模式
     # -storetype: 密鑰庫的類型 (PKCS12 為廣泛支援的格式)
     # -keystore my-release-key.keystore: 存儲密鑰的文件名
     # -alias my-key-alias: 簽名應用時使用的密鑰別名
     # -keyalg: 使用的算法 (這裡是 RSA)
     # -keysize: 密鑰的長度 (2048 位)
     # -validity: 密鑰的有效期限 (10000 天)
    
  2. 設置gradle變量

    • 將第一步生成的證書放到android/app資料夾下
    • 若要全局配置,可修改 ~/.gradle/gradle.properties,此設定會對所有項目有效。
    • 若只需對當前項目有效,則編輯項目目錄下的 /android/gradle.properties。
    • 若找不到 gradle.properties 文件,請手動創建一個。

    加入以下代碼,並將 **** 替換成對應的密碼:

    MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
    MYAPP_RELEASE_KEY_ALIAS=my-key-alias
    MYAPP_RELEASE_STORE_PASSWORD=*****
    MYAPP_RELEASE_KEY_PASSWORD=*****
    

    ~ 符號代表用戶目錄,例如在 Windows 上可能是 C:\Users\用戶名,而在 Mac 上可能是 /Users/用戶名。

    如果不想用明文方式儲存密碼, macOS 可以將密碼存放在「鑰匙串」(Keychain)中。這樣,就可以省略上述配置中的 MYAPP_RELEASE_STORE_PASSWORD 和 MYAPP_RELEASE_KEY_PASSWORD 兩行。

    上述設定會被當作 Gradle 的變數,用於後續給應用程式簽名的步驟。

  3. gradle增加簽名配置
    編輯android/app/build.gradle,添加以下代碼

    ...
     android {
         ...
         defaultConfig { ... }
         signingConfigs {
             release {
                 if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                     storeFile file(MYAPP_RELEASE_STORE_FILE)
                     storePassword MYAPP_RELEASE_STORE_PASSWORD
                     keyAlias MYAPP_RELEASE_KEY_ALIAS
                     keyPassword MYAPP_RELEASE_KEY_PASSWORD
                 }
             }
         }
         buildTypes {
             release {
                 ...
                 signingConfig signingConfigs.release
             }
         }
     }
     ...
    
  4. 打包
    要上架Google Play商店我們需要打包成AAB(Android App Bundle)。
    進入android資料夾,輸入./gradlew bundleRelease

    cd android && ./gradlew bundleRelease
    

    打包完成後,包會在android/app/build/outputs/bundle/release

    如果你還沒有要上傳到Google Play商店,還想要做測試之類的,可以用./gradlew assembleRelease指令打包成apk

    cd android && ./gradlew assembleRelease
    
  5. 上傳至Google Play商店

    • 登入你的 Google Play Console
    • 完成帳號註冊,並支付註冊費
    • 將打包完成的包上傳
    • 設定APP相關資訊
    • 提交進行審核

Ref

https://reactnative.cn/docs/signed-apk-android
https://www.geekailab.com/2019/11/08/react-native-Release-APP-Signature-Package-APK/


上一篇
Day 28:APP 圖標和啟動圖設定
下一篇
Day 30:Fastlane 自動化打包與發布
系列文
30天React Native之旅:從入門到活用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言