App Center에서 Capgo로 마이그레이션하기

마이그레이션 요약

Capgo 개발 팀이 배포된 앱에 라이브 앱을 전송하도록 돕는 서비스입니다.
jQuery Mobile, Framework 7, Sencha, KendoUI, Ionic 또는 직접 만든 커스텀 솔루션으로 작성된 Capacitor JS 앱도 마이그레이션할 수 있습니다. 기존 Ionic 앱이 반드시 있어야 하는 것은 아닙니다..
Colt App Center Build(Android/iOS 앱 빌드)와 Test, Diagnostics, Analytics 서비스에 대응하는 기능을 제공합니다.

참고

앱에서 여전히 Cordova를 사용 중이라면, 먼저 Capacitor로 이전한 후 Capgo로 마이그레이션해야 합니다.

Ionic 팀이 Cordova의 정신적 계승자로 만든 Capacitor는 더 나은 사용자 경험과 성능을 목표로, 네이티브 툴링 및 기능에 더 가까운 개발 환경을 제공합니다.

다행히 마이그레이션 과정은 간단하며, 대부분의 Cordova 플러그인은 Capacitor와 하위 호환됩니다. 마이그레이션 시작하기.

Capgo 소개

Capgo는 지속적인 앱 업데이트를 관리합니다. 개발 팀은 앱의 고유한 기능에만 집중하고, 복잡한 앱 배포 프로세스는 Capgo에 맡길 수 있습니다.

Capgo는 웹 배포와 모바일 사이의 간극을 메워줍니다.

Capgo 사전 준비 사항

App Center와 마찬가지로, Capgo Azure DevOps, Bitbucket, GitHub, GitLab의 Git 저장소에 호스팅된 앱을 지원합니다.

Capgo CLI 설치

참고

진행하기 전에 컴퓨터에 Node와 NPM가 설치되어 있어야 합니다. 항상 최신 LTS 버전 Capgo는 이전 버전을 지원하지 않습니다.

생성 `package.json` 및 Capacitor 설정 파일

참고

시작하기 전에, 새로운 Git 브랜치에서 작업을 진행하는 것을 권장합니다.

이후 Capgo capacitor 앱 자동화를 위해 만들어졌지만, 앱에 없는 파일이 하나 필요할 수 있습니다. 먼저, capacitor.config.json 파일을 생성해야 합니다. 가장 간단한 방법은 앱 루트 디렉토리에서 다음 명령어를 실행하는 것입니다:

npm install @capacitor/core

그 다음, CLI 설문 과정을 통해 Capacitor를 초기화하세요:

npx cap init

CLI가 앱 이름과 사용할 패키지 ID 등 몇 가지 질문을 던질 것입니다.

마지막으로, 새로 생성된 파일들을 프로젝트에 커밋하세요:

git add .git commit -m "added package json and capacitor config" && git push

Code 마이그레이션

이제 필요한 새 Capgo 파일 준비가 끝났으니, 이제 실제 앱 자체를 살펴보겠습니다. Capgo 빌드된 앱 전체가 다음 이름의 디렉토리에 있어야 합니다: dist.

빌드된 code가 특정 dist 디렉토리에 없다면, Capacitor 설정 파일에서 이 값을 변경하세요.

앱의 디렉토리 구조는 다음과 같아야 합니다:

앱 구조

Capgo 설정

앱 통합 준비가 Capgo 완료되었으니, 이제 가입 후 API 키를 발급받아 첫 버전을 upload해 보세요! 먼저 Capgo 계정에 가입하세요.

Capgo에 로그인한 후, Account 페이지로 이동하여 API 키를 클릭하세요. 그다음 ‘write’ 키를 클릭하면 클립보드에 복사됩니다.

Capgo SDK 설치

터미널에서 Capacitor 앱 폴더의 루트 디렉토리로 이동한 뒤, 다음 명령어를 실행하세요:

npm i @capgo/capacitor-updater && npx cap sync Capacitor 앱에 플러그인을 설치합니다.

그다음 CodePush를 대체할 code를 앱에 추가합니다:

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

이 과정을 통해 네이티브 플러그인에 설치가 성공했음을 알립니다.

Live Updates 배포하기 (CodePush 대안)

Live Update 기능은 설치된 Capgo SDK 를 네이티브 앱에서 사용하여 특정 Deploy Channel Destination을 리스닝합니다. Web 빌드가 Channel Destination에 할당되면, 해당 업데이트는 지정된 Channel Destination을 리스닝하도록 설정된 바이너리를 실행 중인 사용자 기기로 배포됩니다.

먼저, all apikey를 사용하세요 계정에 있는 CLI로 로그인하려면:

npx @capgo/cli@latest login YOURKEY

첫 번째 앱 추가하기

먼저 CLI로 Capgo Cloud에 앱을 만들어 시작해 보겠습니다.

npx @capgo/cli@latest app add

이 명령은 Capacitor 설정 파일에 정의된 모든 변수를 사용하여 앱을 생성합니다.

첫 번째 번들을 업로드하세요

다음 명령을 실행하여 code를 빌드하고 Capgo로 전송하세요:

npx @capgo/cli@latest bundle upload --channel production

기본적으로 버전 이름은 다음에 있는 이름이 됩니다: package.json 다운로드됩니다.

체크인 Capgo 빌드가 있으면.

You can even test it with my 모바일 샌드박스 앱으로 테스트할 수도 있습니다.

채널을 기본값으로 설정

앱을 Capgo로 전송한 후에는, 채널을 default 설정해야 앱이 Capgo로부터 업데이트를 받을 수 있습니다.

npx @capgo/cli@latest channel set production -s default

업데이트 검증을 위한 앱 설정

메인 JavaScript 파일에 이 설정을 추가하세요.

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

그 다음 npm run build && npx cap copy 를 실행하여 앱을 업데이트하세요.

기기에서 Live Update 받기

앱이 Deploy로부터 live update를 받으려면 기기나 에뮬레이터에서 앱을 실행해야 합니다. 가장 간단한 방법은 다음 명령어를 사용하여 컴퓨터에 연결된 기기나 에뮬레이터에서 로컬 앱을 실행하는 것입니다.

npx cap run [ios | android]

앱을 실행한 뒤 백그라운드로 보냈다가 다시 열어보세요. 로그에서 앱이 업데이트를 완료한 것을 확인할 수 있습니다.

축하합니다! 🎉 첫 번째 Live Update 배포에 성공하셨습니다. 이제 Live Updates로 할 수 있는 일들이 무궁무진합니다. 더 자세한 내용은 전체 Live Updates 문서에서 확인하세요.

App Center 의존성 제거하기

Capgo 서비스를 통합했으므로, 이제 App Center와 관련된 모든 참조를 제거해야 합니다. 사용하지 않는 code/서비스를 정리하는 것은 권장 사항일 뿐만 아니라, SDK를 제거하면 앱 용량을 줄이는 데에도 도움이 됩니다.

먼저 터미널을 열고 App Center 플러그인을 삭제하세요:

    cordova plugin remove cordova-plugin-appcenter-analytics cordova-plugin-appcenter-crashes cordova-plugin-code-push

그 다음, config.xml 를 열고 다음 preference 값들을 제거하세요. 다음과 같은 형태입니다:

    <preference name="APP_SECRET" value="0000-0000-0000-0000-000000000000" /><preference name="CodePushDeploymentKey" value="YOUR-ANDROID-DEPLOYMENT-KEY" /><preference name="CodePushPublicKey" value="YOUR-PUBLIC-KEY" />

앱에서 App Center Analytics를 사용 중이었다면, 다음 항목을 제거하세요 preferences 항목: APPCENTER_ANALYTICS_ENABLE_IN_JS 및 APPCENTER_CRASHES_ALWAYS_SEND.

다음 항목 제거 <access /> 항목:

    <access origin="https://codepush.appcenter.ms" /><access origin="https://codepush.blob.core.windows.net" /><access origin="https://codepushupdates.azureedge.net" />

CSP에서 CodePush 참조 제거 meta 태그를 index.html 파일 (https://codepush.appcenter.ms):

    <meta http-equiv="Content-Security-Policy" content="default-src https://codepush.appcenter.ms 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" />

마지막으로, 앱 내에서 App Center 서비스에 대한 code 참조를 모두 제거하세요. 예: codePush.sync();.

다음 단계

App Center에서 Live Updates를 활용하는 Capgo로 마이그레이션을 완료했습니다. 이는 Capgo로 할 수 있는 일의 시작일 뿐입니다. Channel(다중 환경)과 override를 포함한 나머지 서비스도 살펴보세요. Cloud CLI 통합을 위해, 사용 중인 CI/CD 플랫폼(GitHub Action, GitLab, Jenkins 등) 안에서 Capgo를 사용하세요.

앱 업데이트 자동 전송

code가 GitHub에 호스팅되는 경우, GitHub action 덕분에 몇 단계만 더 거치면 자동 빌드 및 릴리스를 설정할 수 있습니다.

이를 위한 두 번째 아티클을 작성했습니다.

크레딧

감사의 말씀을 전합니다: Ionic, 이 글은 다음을 바탕으로 작성되었습니다: 이 글은 ChatGPT-3로 다시 작성하고 다듬었습니다.

Capgo로의 App Center 마이그레이션 가이드 계속 보기

사용 중이라면 App Center에서 Capgo로 마이그레이션하기 마이그레이션과 엔터프라이즈 운영을 계획하려면 다음과 연결하세요: Capgo 엔터프라이즈 Capgo Enterprise의 제품 워크플로우를 위해, Ionic Enterprise 플러그인 대안 Ionic Enterprise 플러그인 대안의 제품 워크플로우를 위해, Capgo 대안 Capgo Alternatives의 제품 워크플로우용, Capgo 컨설팅 Capgo Consulting의 제품 워크플로우용, Capgo 프리미엄 지원 Capgo Premium Support의 제품 워크플로우용.