메인 콘텐츠로 바로가기

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

Capacitor CLI를 사용하여 효율적인 배포와 플랫폼에 맞춘 앱 업데이트를 위해 빌드 스크립트를 커스터마이즈하는 방법

마틴 도나디유

마틴 도나디유

Content Marketer

Capacitor CLI

Capacitor CLI는 iOS, Android, 웹 플랫폼에서 앱의 빌드 프로세스를 커스터마이즈할 수 있는 기능입니다. 빌드 스크립트를 조정함으로써, 다음을 수행할 수 있습니다.

  • 업데이트 속도 향상: 앱 스토어 지연 없이 즉시 변경 사항을 푸시할 수 있습니다.
  • 배포 제어: 업데이트를 되돌리거나 특정 사용자 그룹을 대상으로 업데이트를 수행할 수 있습니다.
  • 앱 보안: 업데이트를 암호화하여 보호할 수 있습니다.
  • 빌드 최적화: 플랫폼에 맞는 설정을 조정할 수 있습니다.

빠른 기능 개요:

  • 설정 파일: 사용하여 빌드 설정을 관리합니다. capacitor.config.json 사용자 정의 스크립트 package.json : 빌드 자동화에 필요한 prebuild 및 postbuild 작업을 추가합니다.
  • 빌드 훅: __CAPGO_KEEP_0__을 빌드 프로세스의 특정 단계에서 실행합니다.
  • 환경 변수: Run code during specific stages of the build process.
  • 파일을 사용합니다.Config Files .env Custom Scripts

Capgo__CAPGO_KEEP_0__ __CAPGO_KEEP_0____CAPGO_KEEP_0__

__CAPGO_KEEP_0__ Capacitor __CAPGO_KEEP_0__

Capacitor

Capacitor

Understanding how Capacitor handles its default build process is crucial if you want to customize it effectively. Below, we’ll break down the Capacitor CLI’s build process and its key configuration files.

__CAPGO_KEEP_2__

Capacitor은 웹 앱을 플랫폼에 맞는 빌드로 변환하는 단계별 프로세스를 사용합니다. 기본 빌드 프로세스에서 다음이 발생합니다:

Phase 설명 출력
웹 빌드 프레임워크 도구를 사용하여 웹 자산을 컴파일합니다. 최적화된 웹 번들
Copy Assets 웹 자산을 네이티브 플랫폼 폴더로 복사합니다. 플랫폼에 맞는 자산 디렉토리
네이티브 빌드 플랫폼에 맞는 빌드 명령어를 실행합니다. 배포 가능한 바이너리
인증 빌드의完整성과 의존성을 확인합니다. 빌드 상태 및 경고

메인 구성 파일

Capacitor가 빌드를 처리하는 방식을 결정하는 두 개의 중요한 구성 파일입니다.

capacitor.config.json
Capacitor 프로젝트의 핵심 구성 파일입니다. 빌드에 중요한 매개 변수를 설정합니다.

{
  "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에서 컴파일된 웹 자산의 위치를 알려줍니다.
  • 변경 사항을 적용한 후 capacitor.config.json, cap sync 를 실행하여

로 native 프로젝트를 업데이트하십시오.

다음으로, native 빌드 설정을 수정하여 빌드 프로세스를 더 세부적으로 커스터마이즈할 수 있습니다.

You can tweak Capacitor’s default build process to better suit your project needs. Here’s how:

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

You can adjust the build process by editing the __CAPGO_KEEP_0__ file. Below is an example configuration: capacitor.config.json Here are some key settings you can modify:

{
  "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
  }
}

: __CAPGO_KEEP_0__ 위치를 지정합니다.

  • webDir: 개발 서버를 구성하고, 호스트 이름 및 네비게이션 권한을 설정합니다.
  • server: 플랫폼별 빌드 설정을 구성합니다. 예를 들어, Android의 키스토어 정보 또는 iOS의 배포 옵션을 설정할 수 있습니다.
  • android/iosCreating __CAPGO_KEEP_0__ Scripts

To streamline your workflow, add custom NPM scripts to your NPM file. Here’s an example:

To streamline your workflow, add custom NPM scripts to your package.json : 빌드가 완료되면 환경을 설정하거나 알림을 보내는 등의 작업을 위해 사용합니다.

{
  "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 : Android 또는 iOS 앱을 빌드하기 위한 플랫폼별 명령어입니다. postbuild__CAPGO_KEEP_0__
  • build:platform__CAPGO_KEEP_0__

__CAPGO_KEEP_0__

빌드 훅 설정

더 나은 제어를 위해 빌드 훅을 사용하여 특정 빌드 단계에서 커스텀 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;

빌드 훅을 사용하여:

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

이 접근 방식은 빌드 라이프 사이클의 전체적인 제어와 유연성을 제공합니다.

고급 빌드 커스터마이즈

큰 프로젝트를 작업할 때, 빌드 프로세스를 미세 조정하면 큰 차이를 만들 수 있습니다. 환경에 따라 빌드하고 플랫폼을 커스터마이즈하는 방법을 효과적으로 처리하세요.

__CAPGO_KEEP_0__

환경 변수를 설정하기 위해 각 환경에 대해 별도의 .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
디버그 SYMBOLS __CAPGO_KEEP_0__ Signing mapping 파일 dSYM 파일
빌드 버전 debug, release, 스테이징 debug, release
Code 서명 Keystore 관리 프로비전 프로파일
자산 관리 res/drawable 최적화 자산 카탈로그

추가적인 빌드 최적화 팁은 다음과 같습니다.

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

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

빌드 스크립트 문제 및 해결

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

일반적인 오류 해결

빌드 스크립트 문제의 대부분은 환경 설정 또는 의존성 문제로 인해 발생합니다. 여기서 몇 가지 일반적인 문제를 해결하는 방법을 설명합니다.

환경 변수가 누락된 경우

이러한 오류와 같은 오류가 발생할 경우

error: Cannot find environment configuration for BUILD_ENV

이 문제를 해결하려면 프로젝트의 루트 디렉토리에 파일을 생성하세요. .env.local 예를 들어 다음과 같이 생성하세요:

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

플랫폼별 빌드 실패

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

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

iOS 배포 프로파일 문제를 해결하려면 다음을 시도하세요:

npx cap build ios --configuration=release --type=development
오류 유형 일반적인 원인 해결 방법
서명 구성 키스토어 정보가 누락된 경우 설정 KEYSTORE_PATH 및 자격증명
설치 환경 정의되지 않은 변수 플랫폼에 맞는 .env 파일
의존성 버전 불일치 업데이트 package.json 및 동기화

수정 후에, 수정 사항이 안정되도록 완전한 빌드 테스트를 수행하세요.

빌드 스크립트 테스트

오류가 해결된 후, 빌드 스크립트를 다음 단계로 검증하세요.

  • 자동화된 검증: __CAPGO_KEEP_0__ 명령어를 입력하여 빌드 프로세스가 정상적으로 작동하는지 확인합니다.
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 버전.
  • 플랫폼에 특화된 요구 사항이 충족되는지 확인하세요.
  • 빌드 성능을 향상시키기 위한 가능성을 확인하세요.

Capgo 빌드 기능

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

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

빠른 앱 업데이트

Capgo의 업데이트 성능은 놀랍습니다.

  • 95%의 활성 사용자 24시간 이내에 업데이트 받습니다.
  • 82%의 성공률 세계 곳곳에서 업데이트 배송을 위해.
  • 평균 API 응답 시간이 434ms로 전 세계적으로.

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

빌드 자동화

Capgo는 주요 CI/CD 플랫폼과 완벽하게 호환되며 다양한 통합을 제공합니다.

CI/CD 플랫폼 통합 기능 혜택
GitHub 액션 자동 빌드, 배포 트리거 연속 배포
__CAPGO_KEEP_0__ pipeline 자동화 및 버전 관리 흐름이 개선된 워크플로우
Jenkins 사용자 지정 워크플로우 및 빌드 훅 기업용으로 확장 가능

자동 빌드 설정을 설정하는 데 일반적으로 약 3만 원월, 이는 전통적인 솔루션보다 훨씬 예산이 적합합니다. 전통적인 솔루션은 연간 약 6만 원.

까지 올라갈 수 있습니다.

Capgo prioritizes security with a robust framework that includes:

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

버전 관리 기능

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

이 보안 프레임워크는 수백 개의 기업 애플리케이션을 통한 엄격한 테스트를 거쳤습니다. 추가 보안이 필요한 팀에게도 Capgo은 자체 호스팅 솔루션과 사용자 정의 구성이 가능한 옵션을 제공합니다.

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

요약

빌드 단계 개요

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

Capgo 이점

Capgo은 750개의 프로덕션 앱에서 2,350만 건의 업데이트를 성공적으로 배포한 후 배포를 단순화합니다. [1]배포 시간과 대역폭 사용량을 모두 줄이는 부분 업데이트시스템이 있습니다.

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

How to Customize Build Scripts with Capacitor CLI

__CAPGO_KEEP_0__을 사용하는 경우 How to Customize Build Scripts with Capacitor CLI CI/CD 자동화 계획을 만드는 경우에 __CAPGO_KEEP_0__ CI/CD Capgo CI/CD Capgo Native Builds Capgo Native Builds, Capgo CI/CD Capgo 통합 제품 워크플로우에서 Capgo 통합을 위한 CI/CD 통합 CI/CD 통합 구현 세부 정보를 위한 GitHub 액션 통합 GitHub 액션 통합 구현 세부 정보를 위한

Capacitor 앱에 대한 실시간 업데이트

웹 레이어 버그가 활성화된 경우 Capgo을 통해 픽스를 배포하는 대신 앱 스토어 승인까지 며칠 기다리지 말고. 사용자는 배경에서 업데이트를 받으면서 네이티브 변경 사항은 일반적인 검토 경로를 유지합니다.

Get Started Now

__CAPGO_KEEP_0__

Capgo은 가장 전문적인 모바일 앱을 만들기 위해 필요한 최고의洞察력을 제공합니다.