Rumah __CAPGO_KEEP_0__
CI/CD

Automatic Capacitor IOS build with Codemagic

Bagaimana cara mengatur pipeline CI/CD untuk aplikasi IOS Ionic Anda menggunakan Codemagic dan Codemagic dalam 5 menit (2024)

Kredit Artikel

Martin Donadieu

Pengarang

Valeria

Pengulas

Jordan

Pengedit

Automatic Capacitor IOS build with Codemagic

Penyaluran Terus-menerus untuk iOS menggunakan Codemagic

Prasyarat

Sebelum melanjutkan dengan tutorial…

  • Anggota program pengembang iOS.
  • Keinginan untuk membaca 😆…

Penting tentang harga

Harga Aksi Codemagic

https://codemagic.io/pricing/

Pelayanan ini adalah ‘gratis’ sampai dengan 500 menit macOS M1 per bulan, tergantung pada mesin yang dipilih.
Kita akan menggunakan sebuah macOS M1 mesin, Anda dapat melihat harga dan batasan (harga-harga sesuai dengan pembuatan tutorial, mereka mungkin mengalami perubahan di masa depan)

🔴 Setelah diingatkan tentang persyaratan dan harga, jika Anda suka, kita melanjutkan…

📣 Dalam postingan ini kita asumsikan bahwa kita telah memiliki aplikasi yang dibuat di iTunes Connect, kita memiliki sertifikat dari ekosistem Apple, semua akan diatur oleh Codemagic!

Mari kita mulai menjelajah…

Langkah-langkah yang perlu diikuti dalam postingan ini

  1. Menggunakan App Store Connect API dengan Codemagic
  2. Persyaratan
  3. Membuat Kunci App Store Connect API
  4. Menggunakan Kunci App Store Connect API
  5. Salin File Fastlane
  6. Konfigurasi Codemagic

1. Menggunakan App Store Connect API dengan Codemagic

Mulai 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

Mengawali dengan match memerlukan Anda untuk membatalkan sertifikat yang ada. Tapi jangan khawatir, Anda akan memiliki yang baru secara langsung.

Persyaratan

Untuk dapat menggunakan App Store Connect API, Codemagic memerlukan tiga hal.

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

Membuat 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 dan mengikuti instruksi berikut.

1 — Masuk ke App Store Connect.

2 — Pilih Akses Pengguna App Store Connect.

Akses pengguna App Store Connect

3 — Pilih tab Kunci API.

Kunci API App Store Connect

4 — Klik Generate API Key atau tombol (+) Tambah.

Membuat Kunci API di App Store Connect

5 — Masukkan nama untuk kunci dan pilih tingkat akses. Kami merekomendasikan memilih App Manager izin akses, baca lebih lanjut tentang hak akses program pengembang Apple di sini

Membuat Nama Kunci API di App Store Connect

6 — Klik Buat.

Akses API kunci tidak dapat dibatasi hanya pada aplikasi tertentu.

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

Membuat Kunci __CAPGO_KEEP_0__ di App Store Connect

Ambil semua informasi yang diperlukan di sini: <1> ID Masalah.
<2> ID Kunci.
<3> Klik "Download Kunci API" untuk mendownload kunci pribadi API Anda. Tautan download hanya muncul jika kunci pribadi belum pernah didownload. Apple tidak menyimpan salinan kunci pribadi. Jadi, Anda hanya dapat mendownloadnya sekali.

🔴 Simpan kunci pribadi Anda di tempat yang aman. Anda tidak boleh berbagi kunci, simpan kunci di code repository, atau termasuk kunci di code sisi klien.

Tambahkan kunci App Store Connect API ke Codemagic

  1. Buka pengaturan Tim Codemagic Anda, Pilih Integrasi Tim Buka tim Pilih identitas tanda tangan code Pilih identitas tanda tangan code Dan unggah sertifikat Unggah sertifikat

  2. Klik tombol Tambahkan kunci .

  3. Masukkan App Store Connect API key nameNama ini dapat dibaca oleh manusia dan digunakan untuk mengacu ke kunci ini di pengaturan aplikasi nanti.

  4. Masukkan Issuer ID dan Key ID context

  5. Nilai-nilai. Klik pada or drag the file to upload the App Store Connect API key downloaded earlier.

  6. atau drag file ke upload kunci App Store Connect __CAPGO_KEEP_0__ yang telah didownload sebelumnya. Klik.

Now we can manage Codemagic with the App Store Connect API key, great!

context: Capgo website pemasaran. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman trust.astro. Kata kunci `save` (Simpan).

Sertifikat

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

Sertifikat Code tanda tangan

Klik pada Manajemen sertifikat > + dan pilih Sertifikat Distribusi Apple.

Sertifikat Distribusi Apple

Setelah itu Anda dapat membuat sertifikat baru.

Setelah itu Anda perlu pergi ke keychain untuk mendownload sertifikat sebagai .p12 file.

Untuk melakukan hal ini, Anda perlu pergi ke keychain, pilih keychain login, kemudian tab Sertifikat Saya Sertifikat Saya Sertifikat Saya.

Sertifikat Saya

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

Dan kemudian klik kanan pada sertifikat dan pilih Export.

Pilih format file Informasi Pribadi Tertanam (.p12).

File tersebut akan di download sebagai .p12 file.

Profil Pengaturan

Buka Pengembang Apple dan pilih tim yang tepat.

Membuat profil baru, dengan mengklik pada +

Buat Profil Baru

Dan pilih App Store Connect.

Pilih App Store Connect

Maka Anda harus memilih aplikasi yang tepat, perhatikan karena Anda tidak bisa menggunakan wildcard lainnya maka proses signing akan gagal.

Pilih Aplikasi yang Tepat

Pilih sertifikat yang tepat yang telah Anda buat sebelumnya (lihat 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 Generate.

Nama ini akan digunakan untuk mengidentifikasi profil di Codemagic.

Buat profil

Anda dapat mengunduh profil sebagai .mobileprovision file.

Unduh profil

Menambahkan sertifikat tanda tangan Code

Codemagic memungkinkan Anda untuk mengunggah sertifikat tanda tangan code sebagai arsip PKCS#12 yang berisi baik sertifikat dan kunci pribadi yang diperlukan untuk menggunakan sertifikat tersebut. Ketika mengunggah, Codemagic akan meminta Anda untuk menyediakan kata sandi sertifikat (jika sertifikat dilindungi kata sandi) bersama dengan nama referensi unik Nama Referensi, yang kemudian dapat digunakan di codemagic.yaml konfigurasi untuk mengambil file yang spesifik.

  • Unggah sertifikat
  • Buat sertifikat baru
  • Muat dari Portal Pengembang
  1. Buka pengaturan Tim Codemagic Anda, pergi ke Pengaturan codemagic.yaml > Identitas Tanda Tangan Code.
  2. Buka Tab sertifikat iOS Upload file sertifikat dengan mengklik pada
  3. Pilih file .p12 atau .pem atau dengan menariknya ke dalam frame yang ditunjuk. Masukkan
  4. __CAPGO_KEEP_0__ Sandi sertifikat dan pilih Nama referensi.
  5. Klik Tambahkan sertifikat

Menambahkan profil pengembang

Codemagic memungkinkan Anda untuk mengunggah profil pengembang untuk digunakan pada aplikasi atau untuk mengambil profil dari Portal Pengembang Apple.

Jenis profil, tim, ID aplikasi, dan tanggal kedaluwarsa profil yang ditambahkan ke identitas tanda tangan Code ditampilkan. Selain itu, Codemagic akan memberitahu Anda apakah ada sertifikat tanda tangan code yang sesuai tersedia di identitas tanda tangan Code (tanda centang hijau di bidang) Sertifikat Sertifikat

3. Konfigurasi Codemagic

Konfigurasi rahasia Codemagic

Selalu penasaran dari mana nilai dari ENV berasal? Nah, itu tidak lagi rahasia – itu dari rahasia proyek Anda. 🤦

4. Konfigurasi file aliran Codemagic

Buat file bernama codemagic.yml di root proyek Anda dan tambahkan kode berikut.

workflows:
  ionic-capacitor-ios-workflow:
    name: Capacitor iOS Workflow
    max_build_duration: 120
    instance_type: mac_mini_m1
    integrations:
      app_store_connect: CodeMagic
    environment:
      ios_signing:
        distribution_type: app_store
        bundle_identifier: YOUR_BUNDLE_IDENTIFIER
      vars:
        XCODE_WORKSPACE: ios/App/App.xcworkspace
        XCODE_SCHEME: App
        APP_STORE_APP_ID: YOUR_APP_STORE_APP_ID
      node: v20.14.0
      xcode: 15.4
      cocoapods: default
    triggering:
      events:
        - tag
      tag_patterns:
        - pattern: '*'
          include: true
    scripts:
      - name: Install dependencies
        script: |
          npm install
      - name: Cocoapods installation
        script: |
          cd ios/App && pod install
      - name: Update dependencies and copy web assets to native project
        script: |
          npm run build
          npx cap sync ios
      - name: Set up code signing settings on Xcode project
        script: |
          xcode-project use-profiles
      - name: Increment build number
        script: |
          cd $CM_BUILD_DIR/ios/App
          LATEST_BUILD_NUMBER=$(app-store-connect get-latest-app-store-build-number "$APP_ID")
          agvtool new-version -all $(($LATEST_BUILD_NUMBER + 1))
      - name: Build ipa for distribution
        script: |
          xcode-project build-ipa \
            --workspace "$XCODE_WORKSPACE" \
            --scheme "$XCODE_SCHEME"
    artifacts:
      - build/ios/ipa/*.ipa
      - /tmp/xcodebuild_logs/*.log
      - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.app
      - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.dSYM
    publishing:
      email:
        recipients:
          - YOUR_EMAIL
        notify:
          success: true # To not receive a notification when a build succeeds
          failure: false # To not receive a notification when a build fails
      app_store_connect:
        auth: integration
        # Configuration related to TestFlight (optional)
        # Note: This action is performed during post-processing.
        submit_to_testflight: true
        # Configuration related to App Store (optional)
        # Note: This action is performed during post-processing.
        submit_to_app_store: false

This workflow should be triggered manually or after each GitHub tagJika Anda ingin mengotomatisasi tag, silakan lihat Automatic build and release with GitHub actions Kemudian aliran ini akan menarik dependensi NodeJS, menginstalnya, dan membangun aplikasi JavaScript Anda.

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

__CAPGO_KEEP_0__

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

5. Aktifkan alur kerja

Aktifkan alur kerja

Push perubahan kode ke cabang main atau development Bagaimana cara memilih alternatif yang tepat untuk memperbarui aplikasi Anda secara langsung?

Untuk mengaktifkan alur kerja.

Dengan commit pertama

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

Dashboard Testflight

Aktifkan secara manual

Aplikasi Anda dapat diaktifkan secara manual untuk memulai alur kerja. Membuat build baru.

Pilih aplikasi

Lalu pilih cabang yang ingin dibangun.

Pilih cabang

Dan klik pada Membuat build baru.

Lalu pergi ke daftar build

Daftar build

Dan klik pada build untuk melihat hasilnya.

Hasil build

Memungkinkan untuk mengdeploy dari mesin lokal

Iya, kamu bisa, dan itu sangat mudah.

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

Terima kasih

Artikel ini berdasarkan artikel berikut:

Teruskan dari Automatic Capacitor build IOS otomatis dengan Codemagic

Jika kamu menggunakan Automatic Capacitor build IOS otomatis dengan Codemagic untuk merencanakan otomatisasi CI/CD, hubungkannya dengan Capgo CI/CD untuk alur kerja produk di Capgo CI/CD, Capgo Pembangunan Nadi Asli untuk alur kerja produk dalam Capgo Pembangunan Nadi Asli Capgo Integrasi untuk alur kerja produk dalam Capgo Integrasi Integrasi CI/CD untuk detail implementasi dalam Integrasi CI/CD, dan GitHub Integrasi Aksi untuk detail implementasi dalam GitHub Integrasi Aksi

Live updates untuk Capacitor aplikasi

Ketika bug layer web masih aktif, kirimkan perbaikan melalui Capgo daripada menunggu hari-hari untuk persetujuan toko aplikasi. Pengguna mendapatkan update di latar belakang sementara perubahan native tetap dalam jalur review normal.

dukungan manusia dari Martin

Mulai Sekarang

Terbaru dari Blog Kami

Capgo memberikan Anda wawasan terbaik yang Anda butuhkan untuk membuat aplikasi mobile yang profesional.