How to Customize Build Scripts with Capacitor CLI

Capacitor CLI은 iOS, Android, 웹 플랫폼을 위한 앱 빌드 프로세스를 사용자 지정할 수 있게 해줍니다. 빌드 스크립트를 조정함으로써, 다음을 수행할 수 있습니다:

업데이트 속도 향상: 앱 스토어 지연 없이 즉시 변경을 푸시할 수 있습니다.
배포 제어: 업데이트 롤백 또는 특정 사용자 그룹에 대한 업데이트 목표를 설정할 수 있습니다.
앱 보안: 업데이트를 보호하기 위해 암호화 사용.
빌드 최적화: 플랫폼에 따라 설정을 조정.

주요 기능의 빠른 개요:

설정 파일: 사용 capacitor.config.json 및 package.json 설정 파일을 사용하여 빌드 설정 관리.
사용자 정의 스크립트: 빌드 전, 후에 자동화하기 위한 prebuild 및 postbuild 작업 추가.
빌드 훅: code을 빌드 프로세스의 특정 단계에서 실행.
환경 변수: 환경에 맞게 빌드하는 것을 단순화하세요. .env 파일.

CapgoCapacitor CLI를 사용하여 빌드 스크립트를 커스터마이즈하는 방법 Capacitor CLI를 사용하여 빌드 스크립트를 커스터마이즈하는 방법자동 업데이트

버전 추적 Capacitor Configure

Capacitor Framework Documentation Website

Default Build Process in Capacitor

Capacitor의 기본 빌드 프로세스를 이해하는 것은 커스터마이즈를 효과적으로 하기 위해 중요합니다. 아래에서, 우리는 Capacitor CLI의 빌드 프로세스와 주요 구성 파일을 설명할 것입니다.

표준 빌드 단계

Capacitor는 웹 앱을 플랫폼별 빌드로 변환하는 단계별 프로세스를 사용합니다. 기본 빌드 프로세스의 내용은 다음과 같습니다:

단계	설명	출력
웹 빌드	프레임워크 도구를 사용하여 웹 자산을 컴파일합니다	최적화된 웹 번들
자산 복사	웹 자산을 네이티브 플랫폼 폴더로 이동합니다	플랫폼별 자산 디렉토리
자연어 빌드	플랫폼별 자산 디렉토리	자연어 빌드
Verification	배포 가능한 바이너리	검증

빌드의完整성과 의존성을 확인합니다.

Capacitor의 빌드 처리 방식을 결정하는 두 개의 중요한 설정 파일이 있습니다.

capacitor.config.json
Capacitor.config.json

{
  "appId": "com.example.app",
  "appName": "MyApp",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000
    }
  }
}

appId애플리케이션의 고유 식별자입니다.
appName: 앱 이름입니다.
webDir: Capacitor이 웹 자산을 찾는 위치를 지정합니다 (예: dist).
plugins: 플러그인별 설정을 구성할 수 있습니다. 예를 들어, SplashScreen 옵션을 설정할 수 있습니다.

package.json
이 파일에는 빌드 스크립트와 의존성 정보가 포함되어 있습니다. 이 정보는 빌드 프로세스를 ảnh hưởng합니다:

{
  "scripts": {
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "cap:build": "cap build"
  }
}

The webDir 설정 capacitor.config.json Capacitor에 컴파일된 웹 자산의 위치를 native 빌드에 포함시키기 위해 알려줍니다.
을 변경한 후에는 capacitor.config.json를 실행하여 네이티브 프로젝트를 업데이트해야 합니다. cap sync 다음으로, 빌드 설정을 수정하여 빌드를 더 세부적으로 커스터마이즈할 수 있는 방법을 살펴보겠습니다.

다음으로, 이러한 설정을 수정하여 빌드 프로세스를 더 세부적으로 맞춤화할 수 있는 방법에 대해 살펴보겠습니다.

수정하는 빌드 스크립트

Capacitor의 기본 빌드 프로세스를 프로젝트에 맞게 조정할 수 있습니다. 방법은 다음과 같습니다.

설정 파일

빌드 프로세스를 조정하려면 capacitor.config.json 파일을 편집할 수 있습니다. 아래는 예시 구성입니다.

{
  "appId": "com.example.app",
  "webDir": "www",
  "server": {
    "hostname": "localhost",
    "androidScheme": "https",
    "iosScheme": "https",
    "allowNavigation": ["*.example.com"]
  },
  "android": {
    "buildOptions": {
      "keystorePath": "release.keystore",
      "keystorePassword": "mypassword",
      "keystoreAlias": "release",
      "keystoreAliasPassword": "mypassword"
    }
  },
  "ios": {
    "scheme": "App",
    "automaticProvisioning": true
  }
}

다음과 같은 주요 설정을 수정할 수 있습니다:

webDir: 컴파일된 웹 자산의 위치를 지정합니다.
server: 개발 서버를 구성하며 호스트 이름 및 네비게이션 권한을 포함합니다.
android/ios: 플랫폼별 빌드 설정을 허용하며 Android의 키 스토어 세부 정보 또는 iOS의 배포 옵션과 같은 것을 포함합니다.

NPM 스크립트 만들기

워크플로우를 효율적으로 관리하기 위해 NPM 스크립트를 추가하세요. package.json 파일에 커스텀 __CAPGO_KEEP_0__ 스크립트를 추가할 수 있습니다. 예시는 다음과 같습니다.

{
  "scripts": {
    "prebuild": "node ./scripts/prepare-env.js",
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "build:ios": "cap build ios --release",
    "build:android": "cap build android --release",
    "postbuild": "node ./scripts/notify-completion.js"
  }
}

prebuild 그리고 postbuild: 빌드가 끝날 때 알림을 보내거나 환경을 설정하는 것과 같은 작업을 위해 사용하세요.
build:platform: Android 또는 iOS 앱을 빌드하는 플랫폼별 명령어입니다.

자동화의 한 단계를 더 나아가려면 빌드 훅을 추가할 수 있습니다.

빌드 훅 설정

빌드 훅을 사용하여 빌드 프로세스의 특정 단계에서 커스텀 code를 실행할 수 있습니다. 예를 들어, capacitor.config.ts:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  plugins: {
    CapacitorHooks: {
      beforeBuild: async () => {
        console.log('Running pre-build tasks...');
        // Add your pre-build tasks here
      },
      afterBuild: async () => {
        console.log('Running post-build tasks...');
        // Add your post-build tasks here
      }
    }
  }
};

export default config;

빌드 훅을 사용하여 다음을 수행할 수 있습니다:

빌드가 시작되기 전에 요구 사항을 검증합니다.
빌드 프로세스 중에 자산을 변환합니다.
중요한 지점에서 알림을 트리거합니다.
버전 번호를 자동으로 업데이트합니다.
자동화된 테스트를 무중단으로 실행합니다.

이 접근 방식은 전체 빌드 라이프 사이클에 대한 더 큰 유연성과 제어를 제공합니다.

고급 빌드 커스터마이징

큰 프로젝트를 작업할 때 빌드 프로세스를 세밀하게 조정하면 큰 차이를 만들 수 있습니다. 환경별 빌드와 플랫폼 커스터마이징을 효과적으로 처리하는 방법을 알려드리겠습니다.

환경 변수

환경 변수를 설정하려면 각 환경에 대한 별도의 .env 파일을 생성하세요:

.env.development
.env.staging
.env.production

그런 다음 빌드 스크립트를 환경에 따라 적절한 파일을 로드하도록 구성하세요:

import { defineConfig } from '@capacitor/cli';

export default defineConfig({
  ios: {
    buildConfig: {
      environment: process.env.BUILD_ENV || 'development',
      configurations: {
        development: {
          signing: {
            debug: true,
            automaticProvisioning: true
          }
        },
        production: {
          signing: {
            release: true,
            provisioningProfile: 'dist/profile.mobileprovision'
          }
        }
      }
    }
  }
});

이러한 설정을 플랫폼별 요구 사항에 맞게 더 세밀하게 조정할 수 있습니다.

플랫폼별 빌드

Android 및 iOS를 위한 빌드 커스터마이징을 위해 다음 구조를 사용하세요:

const platformConfig = {
  android: {
    buildType: process.env.BUILD_TYPE || 'debug',
    keystoreConfig: {
      path: process.env.KEYSTORE_PATH,
      password: process.env.KEYSTORE_PASSWORD,
      alias: process.env.KEYSTORE_ALIAS
    }
  },
  ios: {
    scheme: process.env.APP_SCHEME || 'App',
    xcodePreferences: {
      automaticSigning: false,
      developmentTeam: process.env.DEVELOPMENT_TEAM
    }
  }
};

이러한 구성은 각 플랫폼에 맞게 빌드를 조정하여 smoother 배포를 보장합니다.

기능	안드로이드	iOS
디버그 SYMBOL	프로게드 매핑 파일	dSYM 파일
빌드 버전	debug, release, 스테이징	debug, release
Code 서명	Keystore 관리	배포 프로파일
자산 관리	res/drawable 최적화	자산 카탈로그

빌드 최적화를 위해 다음 팁을 참고하세요:

배포 시간을 절약하기 위해 부분 업데이트 사용
빠르게 문제를 식별하기 위해 오류 추적 설정
베타 테스트 버전을 위한 채널 시스템 구축
안전한 배포를 위해 끝에서 끝 암호화 활성화

Capgo와 같은 분석 및 보안 업데이트를 위한 도구와 함께 사용하면 이러한 기술은 배포 프로세스에 대한 더 많은 제어권을 제공합니다. [1].

빌드 스크립트 문제 및 해결

커스텀 빌드 구성과 함께 작업할 때, 오류를 빠르게 해결하는 것은 빌드 프로세스를 원활하게 유지하는 데 중요합니다.

일반 오류 해결

많은 빌드 스크립트 문제는 환경 설정 또는 의존성 문제에서 비롯됩니다. 여기서 몇 가지 일반적인 문제를 해결하는 방법을 설명합니다.

환경 변수가 누락된 경우

이러한 오류가 발생하는 경우:

error: Cannot find environment configuration for BUILD_ENV

이 문제를 해결하려면 프로젝트의 루트 디렉토리에 파일을 생성하세요. 예를 들어: .env.local 플랫폼별 빌드 실패

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Android에 대한 서명 오류를 해결하려면 다음 명령어를 사용하세요:

iOS에 대한 배포 프로파일 오류를 해결하려면 다음을 시도하세요:

npx cap build android --keystorePassword=$KEYSTORE_PASSWORD --keystoreAlias=$KEYSTORE_ALIAS

오류 유형

npx cap build ios --configuration=release --type=development

일반적인 원인	해결책	서명 구성
protectedTokens	Keystore 정보가 없습니다.	설정 `KEYSTORE_PATH` Capacitor CLI를 사용하여 빌드 스크립트를 커스터마이즈하는 방법
and 인증서	빌드 환경	정의되지 않은 변수 `.env` 플랫폼에 맞는
파일	의존성	버전 불일치 `package.json` Live Update

and sync

테스트 빌드 스크립트

오류가 해결된 후 빌드 스크립트를 검증하는 단계를 따르십시오:

자동 검증: 빌드 프로세스가 예상대로 작동하는지 확인하기 위해 키 명령어를 실행하십시오.

npm run build
npx cap sync
npx cap copy

환경 검증: 빌드 시작하기 전에 누락된 환경 변수를 확인하십시오.

const requiredVars = ['BUILD_ENV', 'KEYSTORE_PATH'];
requiredVars.forEach(varName => {
  if (!process.env[varName]) {
    throw new Error(`Missing required env var: ${varName}`);
  }
});

빌드 스크립트 디버깅: 빌드 중 발생할 수 있는 문제를 잡기 위해 세부적인 스크립트를 추가하십시오.

{
  "scripts": {
    "build:debug": "NODE_ENV=development npx cap build --verbose",
    "build:release": "NODE_ENV=production npx cap build --verbose"
  }
}

추가 테스트 팁:

사용 도커 컨테이너를 사용하여 빌드 프로세스를 분리하십시오.
설정 파일을 확인하기 전에 프로세스를 시작하세요.
다양한 버전의 Node.js를 테스트하세요. Node.js versions.
__CAPGO_KEEP_0__
빌드 스크립트를 자동화하여 효율성을 높이고 프로세스를 단순화합니다.

Capgo __CAPGO_KEEP_0__의 업데이트 성능은 다음과 같습니다.

Capgo Live Update 대시보드 인터페이스

Capgo __CAPGO_KEEP_1__ 대시보드 인터페이스

__CAPGO_KEEP_0__는 빌드 스크립트를 자동화하여 효율성을 높이고 프로세스를 단순화합니다.

Capgo’s 성능은 다음과 같습니다.

95%의 활성 사용자 중 24시간 이내에 업데이트를 받습니다.
82%의 성공률 세계 전역에서 업데이트 전달에 성공합니다.
API의 평균 응답 시간은 전 세계적으로 434ms.

플랫폼은 부분 업데이트를 사용하여, 변경 사항만 다운로드합니다. 이 접근 방식은 대역폭 사용량을 줄이고 업데이트 프로세스를 가속화합니다. 또한, 전체 빌드 프로세스는 완전히 자동화되어 시간과 노력을 절약합니다.

빌드 자동화

Capgo은 주요 CI/CD 플랫폼과 완벽하게 호환되며, 다양한 통합 기능을 제공합니다:

CI/CD 플랫폼	통합 기능	혜택
GitHub 액션	자동화된 빌드, 배포 트리거	연속적인 배포
GitLab CI	pipeline 자동화, 버전 관리	streamlined 워크플로우
Jenkins	사용자 정의 워크플로우, 빌드 훅	기업 규모에 적합한 확장성

자동화된 빌드 설정은 일반적으로 $300 달러월에 약간의 비용이 들지만, 전통적인 솔루션보다 훨씬 저렴합니다. 6,000 달러 연간.

보안 표준

Capgo은 보안에 중점을 둔 강력한 프레임워크를 제공하여:

업데이트 패키지에 대한 종단 간 암호화.
보안 키 관리.
애플과 구글의 지침에 대한 준수.

버전 관리 기능

즉시 롤백 옵션.
배포 버전 추적.
스테이징 릴리스를 위한 업데이트 채널 관리.

이 보안 프레임워크는 수백 개의 기업 애플리케이션을 통해 엄격하게 테스트되었습니다. 추가 보안이 필요한 팀에게, Capgo은 사용자 지정 설정이 가능한 자체 호스팅 솔루션도 제공합니다.

Capgo의 채널 시스템은 업데이트 분배를 유연하게 만듭니다. 개발자는 특정 사용자 그룹에 대해 다른 버전을 대상으로 할 수 있으며, 베타 테스트나 점진적인 릴리스에 이상적입니다.

개요

빌드 단계 개요

커스텀 빌드 스크립트는 빌드 훅, 환경 변수 및 플랫폼별 명령을 활용하여 자동화되고 일관된 배포를 가능하게합니다. 이러한 프로세스는 Capgo를 통해 가능해지는 배포 개선의坚固한 기초를 제공합니다.

Capgo 이점

Capgo는 750개의 프로덕션 앱에서 23.5만 개의 업데이트를 성공적으로 전달함으로써 배포를 단순화합니다. [1]업데이트의 부분 시스템은 대역폭 사용량과 배포 시간을 모두 줄입니다.

플랫폼은 빠른 업데이트, 전 세계 성능 최적화, 종단 간 암호화 보안 및 유연한 채널 기반 배포 시스템을 제공합니다. 이 설정은 목표 업데이트, 베타 테스트 및 앱 스토어 지침 준수와 함께 강력한 보안 프레임워크를 유지합니다.

다음으로 진행하세요: Capacitor CLI를 사용하여 빌드 스크립트를 커스터마이즈하는 방법

__CAPGO_KEEP_0__를 사용하는 경우 How to Customize Build Scripts with Capacitor CLI CI/CD 자동화 계획을 세우고 연결하기 위해 Capgo CI/CD Capgo CI/CD workflow에 대한 제품 워크플로우를 위해 Capgo 네이티브 빌드 Capgo 네이티브 빌드에 대한 제품 워크플로우를 위해 Capgo 통합 Capgo 제품 워크플로우에서 통합하기 context context GitHub 액션 통합 Capacitor CLI에서 구현 세부 정보에 대한 GitHub 액션 통합.