Lompat ke konten utama
CI/CD

Automatic Capacitor IOS build with GitHub actions with certificate

Bagaimana cara mengatur alur CI/CD untuk aplikasi IOS Ionic Anda menggunakan fastlane dan GitHub Actions dalam 5 menit (2024)

Kredit artikel

Martin Donadieu

Pengarang

Valeria

Pengulas

Jordan

Editor

Automatic Capacitor IOS build dengan GitHub aksi dengan sertifikat

Mengatur CI/CD untuk aplikasi Capacitor dapat kompleks dan memakan waktu. Berikut adalah hal-hal yang perlu Anda ketahui:

Sekarang kami merekomendasikan menggunakan Capgo Build dengan Capgo CLI untuk pembangunan native Capacitor. Petunjuk Fastlane ini dipertahankan untuk tim yang menjaga pipeline aksi GitHub yang sudah ada, tetapi pembangunan iOS baru harus menggunakan Capgo CLI sehingga Anda tidak perlu menjaga Fastlane, runner Xcode, sertifikat, dan skrip unggah sendiri.

Capgo Build untuk CI/CD oleh Capgo

Lebihkan Fastlane, runner Xcode, sertifikat, profil pengaturan, dan skrip unggah. Capgo Build melakukan pembangunan iOS yang ditandatangani secara native dari pipeline CI/CD yang sudah ada:

  • Berfungsi dengan pipeline Anda: Aktifkan Capgo Pembangunan dari GitHub Aksi, GitLab CI, Jenkins, atau skrip lokal setelah pembangunan web Anda dan npx cap sync.
  • : Tanda tangan dari rahasia CI: Simpan kunci App Store Connect, sertifikat, profil pengaturan, kata sandi, dan ID tim di rahasia CI Anda sendiri.
  • : Tidak ada perawatan runner native: Capgo Pembangunan menyediakan lingkungan pembangunan Apple yang dipelihara, sehingga Anda tidak perlu mengelola runner macOS, gambar Xcode, atau jalur Fastlane.
  • : Download artefak yang ditandatangani untuk QA atau kirimkan rilis pembangunan melalui __CAPGO_KEEP_0__ __CAPGO_KEEP_1__.: Download signed artifacts for QA or submit release builds through the Capgo CLI.

: Rencana __CAPGO_KEEP_0__ mulai dari $12/bulan

  • Capgo plans start at $12/month
  • : Menit pembangunan tambahan dikenakan biaya per menit melalui kredit
  • : Rencana __CAPGO_KEEP_0__ mulai dari $12/bulan

Konfigurasi Capgo Build di CI/CD

Panduan Konfigurasi Manual

Berikut langkah-langkah yang perlu Anda lakukan:

Penyebaran Terus-menerus untuk iOS menggunakan Fastlane dan GitHub Aksi dan sertifikat

Prasyarat

Sebelum melanjutkan dengan tutorial:

  • Pastikan Anda telah menginstal Fastlane pada mesin pengembangan Anda. Pastikan Anda merupakan anggota program pengembang iOS.
  • Informasi penting tentang harga

Harga __CAPGO_KEEP_0__ Aksi

Price GitHub Action

https://github.com/features/actions

Pelayanan ini adalah ‘gratis’hingga batasnya, tergantung pada mesin yang dipilih. Kita akan menggunakan mesin ‘macOS’, Anda bisa melihat harga dan batasan-batasannya (harga-harganya berdasarkan waktu pembuatan tutorial ini, mereka mungkin mengalami perubahan di masa depan)
Setelah diberitahu tentang persyaratan dan harga, mari kita lanjutkan. Catatan: Dalam postingan ini saya asumsikan bahwa Anda telah membuat aplikasi di App Store Connect. Informasi penting akan dikopi oleh Fastlane! Apa yang akan Anda pelajari dalam tutorial ini

Langkah-langkah yang perlu diikuti dalam postingan ini

Menggunakan App Store Connect __CAPGO_KEEP_0__ dengan Fastlane

Langkah 1: Mengatur Project di App Store Connect

Langkah 2: Mengatur Fastlane

  1. Using App Store Connect API with Fastlane
    • Persyaratan:
      • Membuat Kunci API App Store Connect
      • Menggunakan Kunci API App Store Connect
  2. Mengcopy File Fastlane
  3. Mengonfigurasi GitHub Actions

1. Menggunakan App Store Connect API dengan Fastlane

Pada bulan Februari 2021, verifikasi dua faktor atau verifikasi dua langkah diperlukan untuk semua pengguna untuk masuk ke App Store Connect. Layer keamanan tambahan untuk ID Apple Anda membantu memastikan bahwa Anda adalah satu-satunya orang yang dapat mengakses akun Anda.
Dari Bantuan Apple

Persyaratan

Untuk memungkinkan Fastlane dapat menggunakan App Store Connect API untuk mengunggah aplikasi Anda, Anda perlu menyediakan hal-hal berikut: tiga hal-hal:

  1. ID Penerbit
  2. ID Kunci
  3. File Kunci atau Konten Kunci

Mendapatkan Kunci API App Store Connect

Untuk menghasilkan kunci, Anda harus memiliki izin Admin di App Store Connect. Jika Anda tidak memiliki izin tersebut, Anda dapat mengarahkan orang yang relevan ke artikel ini.

  1. Masuk ke App Store Connect.

  2. Pilih Pengguna dan Akses.

Akses Pengguna App Store Connect

3 — Pilih tab Integrasi.

Integrasi App Store Connect API

  1. Klik Generate API Key atau tombol Tambah (+).

Kunci API App Store Connect membuat

  1. Masukkan nama untuk kunci. Nama ini hanya untuk referensi Anda dan tidak menjadi bagian dari kunci itu sendiri.

Nama kunci API App Store Connect membuat

6 — Di bawah Akses, pilih peran untuk kunci. Peran yang berlaku untuk kunci sama dengan peran yang berlaku untuk anggota tim Anda. Lihat izin akses. Kami merekomendasikan untuk memilih Manajer Aplikasi.

  1. Klik Generate.

Akses kunci API tidak dapat dibatasi pada aplikasi tertentu.

Nama kunci baru, ID kunci, tautan download, dan informasi lainnya muncul di halaman.

Unduh Kunci App Store Connect

Kamu bisa mendapatkan semua informasi yang diperlukan di sini.
1. ID Masalah. (APPLE_ISSUER_ID rahasia)
2. ID Kunci. (APPLE_KEY_ID rachasia)
3. Klik "Unduh Kunci API" untuk mengunduh kunci pribadi API Anda. Tautan unduh hanya muncul jika kunci pribadi belum diunduh. Apple tidak menyimpan salinan kunci pribadi. Jadi, kamu hanya bisa mengunduhnya sekali.

🔴 Simpan kunci pribadi di tempat yang aman. Kamu tidak boleh berbagi kunci, menyimpan kunci di code repository, atau menyertakan kunci di code sisi klien.

Menggunakan Kunci API App Store Connect

File Kunci API (p8 file yang kamu download), ID Kunci, dan ID Pengembang diperlukan untuk membuat token JWT untuk otorisasi. Ada beberapa cara untuk mengirim informasi ini ke Fastlane. Saya memilih menggunakan aksi baru Fastlane app_store_connect_api_keyKamu bisa belajar cara lain di Documentasi FastlaneKarena saya pikir ini adalah cara termudah untuk bekerja dengan CI yang paling umum, di mana Anda dapat mengatur variabel lingkungan.

Silakan mengonversi file p8 yang Anda download ke Base64 dan simpan sebagai rahasia (APPLE_KEY_CONTENT).

base64 -i APPLE_KEY_CONTENT.p8 | pbcopy

Sekarang kita dapat mengelola App Store Connect dengan Fastlane menggunakan kunci API, hebat!

2. Sertifikat

Buka XCode dan pergi ke Pengaturan > Akun > ID Apple > Tim Pilih tim Anda.

identitas tanda tangan Code

Klik pada Pengelola sertifikat.

Jika Anda belum membuat sertifikat, Anda dapat membuat sertifikat baru.

Klik pada + dan pilih Penyebaran Apple

Penyebaran Apple

Maka Anda perlu pergi ke keychain untuk mengunduh sertifikat sebagai .p12 file.

Untuk melakukan ini, Anda perlu pergi ke keychain dan berganti ke masuk keychain dan kemudian tab Sertifikat Saya.

Sertifikat Saya

Kemudian Anda dapat memilih sertifikat yang ingin Anda download. (Cari berdasarkan tanggal sertifikat)

Dan kemudian klik kanan pada kunci pribadi pada sertifikat dan pilih Export.

Pilih format file Informasi Pribadi (p12).

Format tersebut akan mengunduh sertifikat sebagai .p12 file.

Silakan membuka file di terminal dan gunakan perintah berikut untuk mengonversinya ke Base64:

base64 -i BUILD_CERTIFICATE.p12 | pbcopy

ini akan menjadi rahasmu. BUILD_CERTIFICATE_BASE64 Silakan juga memberikan kata sandi sertifikat ketika diminta. Kata sandi ini akan menjadi rahasmu. P12_PASSWORD 3. Profil pengaturan

Buka

Pengembang Apple dan pilih tim yang tepat. Kemudian buat profil baru dengan mengklik

Buat profil baru +

dan pilih

App Store Connect Pilih App Store Connect.

Buka

Kemudian Anda harus memilih aplikasi yang tepat, berhati-hatilah karena Anda tidak dapat menggunakan wildcard lainnya, karena proses signing akan gagal.

Pilih aplikasi yang tepat

Pilih sertifikat yang tepat yang telah Anda buat sebelumnya (carilah tanggal kadaluarsa, harus sama hari dan bulan dengan hari ini) dan klik pada Teruskan.

Pilih sertifikat yang tepat

Terakhir masukkan nama profil dan klik pada Generasi.

Nama profil akan digunakan untuk mengidentifikasi profil di Fastlane, di bawah nilai APPLE_PROFILE_NAME.

Generasi profil

Anda dapat mengunduh profil sebagai .mobileprovision file.

Unduh profil

Silakan mengonversi profil ke Base64 dan simpan sebagai rahasia (BUILD_PROVISION_PROFILE_BASE64).

base64 -i BUILD_PROVISION_PROFILE.mobileprovision | pbcopy

4. Salin file Fastlane

Fastlane adalah sebuah library Ruby yang dibuat untuk mengotomatisasi tugas pengembangan mobile yang umum. Dengan menggunakan Fastlane, Anda dapat mengonfigurasi jalur

Create the Fastlane folder at the root of your Capacitor/Ionic project and add the Fastfile there:

  • yang mengumpulkan serangkaian <project-root>/fastlane/
  • aksi <project-root>/fastlane/Fastfile

yang melakukan tugas yang biasanya Anda lakukan menggunakan Android Studio. Anda dapat melakukan banyak hal dengan Fastlane, tetapi untuk tujuan tutorial ini, kita akan menggunakan hanya beberapa aksi inti. package.json, capacitor.config.*Buat folder Fastlane di root proyek __CAPGO_KEEP_0__/Ionic Anda dan tambahkan file Fastfile di sana: ios/ Folder: ios/App/.

platform :ios do
  desc 'Export ipa and submit to TestFlight'
  lane :beta do
    keychain_info = { keychain_name: "ios-build-#{Time.now.to_i}.keychain", keychain_password: SecureRandom.uuid }
    
    begin
      setup_signing(keychain_info)
      bump_build_number
      build_app_with_signing(keychain_info)
      submit_to_testflight
    ensure
      cleanup_keychain(keychain_info)
    end
  end

  private_lane :setup_signing do |options|
    create_keychain(
      name: options[:keychain_name],
      password: options[:keychain_password],
      unlock: true,
      timeout: 0,
      lock_when_sleeps: false, 
      add_to_search_list: true
    )
    import_cert(options)
    install_profile
    update_project_settings
  end

  lane :bump_build_number do
		file = File.read('../package.json')
		data_hash = JSON.parse(file)
		api_key = app_store_connect_api_key(
      key_id: ENV['APPLE_KEY_ID'],
      issuer_id: ENV['APPLE_ISSUER_ID'],
      key_content: ENV['APPLE_KEY_CONTENT'],
      is_key_content_base64: true,
      duration: 1200,
      in_house: false
    )
		build_num = app_store_build_number(
      api_key: api_key,
			app_identifier: ENV['BUNDLE_IDENTIFIER'],
			live: false
    )
		build_num = build_num + 1
		UI.message("Bumped build number to #{build_num}")
		increment_build_number(
			build_number: build_num,
			xcodeproj: "./ios/App/App.xcodeproj",
			skip_info_plist: true
		)
	end

  private_lane :import_cert do |options|
    cert_path = "#{Dir.tmpdir}/build_certificate.p12"
    File.write(cert_path, Base64.decode64(ENV['BUILD_CERTIFICATE_BASE64']))
    import_certificate(
      certificate_path: cert_path,
      certificate_password: ENV['P12_PASSWORD'] || "",
      keychain_name: options[:keychain_name],
      keychain_password: options[:keychain_password],
      log_output: true
    )
    File.delete(cert_path)
  end  
  
  private_lane :cleanup_keychain do |options|
    delete_keychain(
      name: options[:keychain_name]
    )
  end  

  private_lane :install_profile do
    profile_path = "#{Dir.tmpdir}/build_pp.mobileprovision"
    File.write(profile_path, Base64.decode64(ENV['BUILD_PROVISION_PROFILE_BASE64']))
    UI.user_error!("Failed to create provisioning profile at #{profile_path}") unless File.exist?(profile_path)
    ENV['PROVISIONING_PROFILE_PATH'] = profile_path
    install_provisioning_profile(path: profile_path)
    File.delete(profile_path)
  end

  private_lane :update_project_settings do
    update_code_signing_settings(
      use_automatic_signing: false,
      path: "./ios/App/App.xcodeproj",
      code_sign_identity: "iPhone Distribution",
      profile_name: ENV['APPLE_PROFILE_NAME'],
      bundle_identifier: ENV['BUNDLE_IDENTIFIER'],
      team_id: ENV['APP_STORE_CONNECT_TEAM_ID']
    )
    update_project_team(
      path: "./ios/App/App.xcodeproj",
      teamid: ENV['APP_STORE_CONNECT_TEAM_ID']
    )
  end

  private_lane :build_app_with_signing do |options|
    unlock_keychain(
      path: options[:keychain_name],
      password: options[:keychain_password],
      set_default: false
    )
    build_app(
      workspace: "./ios/App/App.xcworkspace",
      scheme: "App",
      configuration: "Release",
      export_method: "app-store",
      output_name: "App.ipa",
      export_options: {
        provisioningProfiles: {
          ENV['BUNDLE_IDENTIFIER'] => ENV['APPLE_PROFILE_NAME']
        }
      },
      xcargs: "-verbose",
      buildlog_path: "./build_logs",
      export_xcargs: "-allowProvisioningUpdates",
    )
  end   

  private_lane :submit_to_testflight do
    api_key = app_store_connect_api_key(
      key_id: ENV['APPLE_KEY_ID'],
      issuer_id: ENV['APPLE_ISSUER_ID'],
      key_content: ENV['APPLE_KEY_CONTENT'],
      is_key_content_base64: true,
      duration: 1200,
      in_house: false
    )
    pilot(
      api_key: api_key,
      skip_waiting_for_build_processing: true,
      skip_submission: true,
      distribute_external: false,
      notify_external_testers: false,
      ipa: "./App.ipa"
    )
  end
end

File:

GitHub Actions uses the repository secrets you configure in the next step. You only need a local .env , dan folder. Jangan buat di dalamnya

Membuat pengujian lokal, buat <project-root>/fastlane/.env berikutnya di sebelah Fastfile. Jangan komit file ini. Tambahkan fastlane/.env ke dalam .gitignore pertama (atau pastikan sudah diabaikan). Berikut adalah contoh:

APP_STORE_CONNECT_TEAM_ID=UVTJ336J2D
BUNDLE_IDENTIFIER=ee.forgr.testfastlane
# See previous section for these secrets
BUILD_CERTIFICATE_BASE64=
BUILD_PROVISION_PROFILE_BASE64=
APPLE_KEY_ID=
APPLE_ISSUER_ID=
APPLE_KEY_CONTENT=
P12_PASSWORD=
APPLE_PROFILE_NAME=

Mendapatkan APP_STORE_CONNECT_TEAM_ID

Pergi ke Pusat Pengembang dan gulir ke bawah ke Membership details bagian. Team ID adalah nilai yang perlu Anda tetapkan di APP_STORE_CONNECT_TEAM_ID rahasia.

ID Tim App Store Connect

Mendapatkan BUNDLE_IDENTIFIER

  1. Buka Xcode
  2. Dengan mengeklik dua kali pada App Dalam navigator proyek
  3. Lalu klik tab Signing and Capabilities
  4. Salin nilai dari Bundle identifier. Ini adalah nilai yang perlu Anda atur dalam BUNDLE_IDENTIFIER ID Bundle Xcode
6. Pengolahan Build

Dalam __CAPGO_KEEP_0__ Actions,

Aksi GitHub biaya yang Anda bayar berdasarkan menit anda telah digunakan untuk menjalankan alur kerja CI/CD Anda. Dari pengalaman saya, membutuhkan waktu sekitar 10–15 menit sebelum sebuah build dapat diproses di App Store Connect.

untuk proyek pribadi, biaya perkiraan per build dapat mencapai $0,08/min x 15 menit = $1,2, atau lebih, tergantung pada konfigurasi dan dependensi proyek Anda.

Jika Anda khawatir tentang biaya untuk proyek pribadi, Anda dapat mengatur skip_waiting_for_build_processing untuk truecontext: Halaman/area: Halaman produk live update. Peran: Label UI singkat atau item navigasi. Kunci pesan `live_update_dynamic_label_to` (Live Update Dynamic Label To).

. Ini akan menghemat menit build dengan tidak menunggu App Store Connect untuk selesai memproses build.

This optimization is mainly useful for private projects where build minutes cost money. For public/free projects, the build minutes are free so there’s no need to enable this setting. See GitHub’s Optimasi ini lebih berguna untuk proyek pribadi di mana menit build mengeluarkan biaya. Untuk proyek publik/gratis, menit build gratis jadi tidak perlu mengaktifkan pengaturan ini. Lihat halaman untuk informasi lebih lanjut.

7. Konfigurasi GitHub Aksi

Konfigurasi GitHub rahasia

Silakan salin rahasia dari file dan tempelkan ke rahasia __CAPGO_KEEP_0__ di repository. .env file and paste them into the GitHub repository secrets.

Pengaturan &gt; Rahasia dan variabel &gt; Aksi &gt; Rahasia baru repository Aksi __CAPGO_KEEP_0__

github-rahasia

2. BUILD_CERTIFICATE_BASE64 - Sertifikat yang di-Base64.

3. BUILD_PROVISION_PROFILE_BASE64 - Profil pengaturan yang di-Base64.

4. BUNDLE_IDENTIFIER - Identifikasi paket aplikasi Anda.

5. APPLE_KEY_ID — Kunci API App Store Connect 🔺ID Kunci.

6. APPLE_ISSUER_ID — Kunci API App Store Connect 🔺ID Penerbit.

7. APPLE_KEY_CONTENT — Kunci API App Store Connect 🔺 Isi kunci. .p8, periksa

8. Konfigurasi GitHub file aliran

Buat direktori aliran GitHub.

cd .github/workflows

Dalam workflow folder, buatlah file bernama build-upload-ios.ymldan tambahkan hal berikut.

name: Build source code on ios

on:
  push:
    tags:
      - '*'

jobs:
  build_ios:
    runs-on: macOS-latest
    steps:
      - uses: actions/checkout@v6
      - name: Set Node.js
        uses: actions/setup-node@v6
        with:
          node-version: 24
          cache: npm
      - name: Install dependencies
        id: install_code
        run: npm ci
      - name: Build
        id: build_code
        run: npm run build
      - uses: actions/cache@v5
        with:
          path: ios/App/Pods
          key: ${{ runner.os }}-pods-${{ hashFiles('**/Podfile.lock') }}
          restore-keys: |
            ${{ runner.os }}-pods-
      - name: Sync
        id: sync_code
        run: npx cap sync
      - uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.0'
          bundler-cache: true
      - uses: maierj/fastlane-action@v3.1.0
        env:
          APP_STORE_CONNECT_TEAM_ID: ${{ secrets.APP_STORE_CONNECT_TEAM_ID }}
          BUNDLE_IDENTIFIER: ${{ secrets.BUNDLE_IDENTIFIER }}
          BUILD_CERTIFICATE_BASE64: ${{ secrets.BUILD_CERTIFICATE_BASE64 }}
          BUILD_PROVISION_PROFILE_BASE64: ${{ secrets.BUILD_PROVISION_PROFILE_BASE64 }}
          APPLE_KEY_ID: ${{ secrets.APPLE_KEY_ID }}
          APPLE_ISSUER_ID: ${{ secrets.APPLE_ISSUER_ID }}
          APPLE_KEY_CONTENT: ${{ secrets.APPLE_KEY_CONTENT }}
          P12_PASSWORD: ${{ secrets.P12_PASSWORD }}
          APPLE_PROFILE_NAME: ${{ secrets.APPLE_PROFILE_NAME }}
        with:
          lane: ios beta
      - name: Upload release bundle
        uses: actions/upload-artifact@v6
        with:
          name: ios-release
          path: ./App.ipa
          retention-days: 10

Aliran ini harus diaktifkan setelah setiap GitHub tag, jika Anda perlu untuk mengautomatisasi tag, silakan lihat Automatic build dan rilis dengan GitHub actions terlebih dahulu.

Kemudian aliran ini akan menarik dependensi NodeJS Anda, menginstalnya dan membangun aplikasi JavaScript Anda.

Setiap kali Anda mengirimkan komit baru, rilis akan dibangun di TestFlight.

Aplikasi Anda tidak perlu menggunakan Ionic, hanya Capacitor dasar yang wajib, aplikasi Anda dapat memiliki modul Cordova yang lama, tetapi Capacitor plugin JavaScript harus dipilih.

8. Aktifkan aliran

Buat Komit

Buat sebuah komit, Anda harus melihat alur kerja aktif di repository.

Trigger alur kerja

Push komit baru ke cabang main atau development untuk mengaktifkan alur kerja.

Dibuat dengan komit

Setelah beberapa menit, hasil build harus tersedia di dashboard App Store Connect Anda.

Dashboard Testflight

9. Apakah saya bisa mengirim dari mesin lokal?

Ya, Anda bisa, dan itu sangat mudah.

Kamu bisa menggunakan Xcode untuk membangun dan menandatangani aplikasi kamu, seperti biasa.

Panduan Pengaturan CI/CD

Alternatif Platform CI/CD

Pengaturan Hidup &amp; Pengiriman

Terima Kasih

Blog ini berdasarkan artikel berikut:

Teruskan dari Automatic Capacitor Build IOS Otomatis dengan GitHub aksi dengan sertifikat

Jika Anda menggunakan Automatic Capacitor Build IOS Otomatis dengan GitHub aksi dengan sertifikat untuk merencanakan otomatisasi CI/CD, hubungkannya dengan Capgo Otomatisasi CI/CD untuk alur kerja produk di Capgo Otomatisasi CI/CD, Capgo Build Nativ untuk alur kerja produk di Capgo Build Nativ, Capgo Integrasi untuk alur kerja produk di Capgo Integrasi Integrasi CI/CD context:Halaman/area: Capgo Builder / produk build asli awan halaman. Peran: Label UI singkat atau item navigasi. Kunci pesan `native_build_feature_ci_cd` (Native Build Feature Ci Cd). GitHub Actions Integration GitHub Integrasi Aksi

Update Langsung untuk Aplikasi Capacitor

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

Jika ada bug layer web yang hidup, kirimkan perbaikan melalui __CAPGO_KEEP_0__ bukan menunggu hari-hari untuk persetujuan toko aplikasi. Pengguna mendapatkan update di latar belakang sementara perubahan native tetap dalam jalur review normal.

Konteks: Situs pemasaran Capgo. Peran: Kalimat deskripsi atau deskripsi meta. Dilihat di: komponen GetStarted.astro. Simpan Capgo produk/merek dan istilah pengembang secara tepat.

Bantuan Manusia dari Martin

Capgo gives you the best insights you need to create a truly professional mobile app.