본문으로 이동

Capacitor과 CLI을 사용하여 빌드 스크립트를 맞춤화하는 방법

배포를 위한 Capacitor CLI을 사용하여 빌드 스크립트를 커스터마이즈하는 방법을 알아보세요.

마틴 도나디유

마틴 도나디유

콘텐츠 마케터

빌드 스크립트를 Capacitor CLI으로 커스터마이즈하는 방법

Capacitor CLI은 iOS, Android 및 웹 플랫폼을 위한 앱의 빌드 프로세스를 커스터마이즈할 수 있습니다. 빌드 스크립트를 조정하여:

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

주요 기능의 빠른 개요:

  • 구성 파일: 빌드 설정을 관리하기 위해 capacitor.config.jsonpackage.json 을 사용하세요.
  • 사용자 정의 스크립트: 빌드 프로세스의 특정 단계에서
  • 를 실행하세요.: code을 실행하세요.
  • 환경 변수: 환경 변수에 따라 빌드에 특정한 설정을 쉽게 하기 위해 .env 파일.

Capgo, 배포 도구인 __CAPGO_KEEP_0__는 이 프로세스를 자동화된 업데이트, 버전 추적, 글로벌 퍼포먼스 최적화와 같은 기능으로 향상시킵니다. __CAPGO_KEEP_0__를 설정하고 사용자 지정 빌드 스크립트를 최적화하는 방법을 알아보려면 계속 읽어보세요. Capgo 소개__CAPGO_KEEP_0__

설정 Capacitor 프레임워크 문서 YouTube 동영상 플레이어

Capacitor Framework Documentation Website

Default Build Process in Capacitor

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

표준 빌드 단계

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

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

메인 구성 파일

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

capacitor.config.json
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 설정은 __CAPGO_KEEP_0__이 네이티브 빌드에 포함할 컴파일된 웹 자산의 위치를 알려줍니다. capacitor.config.json tells Capacitor where to locate your compiled web assets for inclusion in the native builds.
  • 를 실행하여 네이티브 프로젝트가 업데이트되도록 하세요. capacitor.config.json다음으로, 빌드 설정을 수정하여 빌드를 더 세부적으로 커스터마이즈할 수 있는 방법에 대해 알아보겠습니다. cap sync package.json

This file includes build scripts and dependencies that influence the build process:

빌드 스크립트 수정

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

설정 파일 설정

__CAPGO_KEEP_0__의 빌드 프로세스를 조정하려면 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
  }
}

__CAPGO_KEEP_0__의 빌드 프로세스를 조정할 수 있는 주요 설정은 다음과 같습니다:

  • webDir__CAPGO_KEEP_0__의 빌드 프로세스를 조정할 수 있는 주요 설정은 다음과 같습니다:
  • server__CAPGO_KEEP_0__의 빌드 프로세스를 조정할 수 있는 주요 설정은 다음과 같습니다:
  • android/ios__CAPGO_KEEP_0__의 빌드 프로세스를 조정할 수 있는 주요 설정은 다음과 같습니다:

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;

빌드가 시작되기 전에 요구 사항을 검증하세요.

  • 프로세스 중에 자산을 변환하세요.
  • 중요한 지점에서 알림을 트리거하세요.
  • 버전 번호를 자동으로 업데이트하세요.
  • 자동화된 테스트를 무중단으로 실행하세요.
  • 예를 들어:

__CAPGO_KEEP_0__

고급 빌드 맞춤

__CAPGO_KEEP_1__

환경 변수

__CAPGO_KEEP_2__ .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'
          }
        }
      }
    }
  }
});

__CAPGO_KEEP_3__

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

__CAPGO_KEEP_4__

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
    }
  }
};

이러한 설정을 플랫폼에 맞게 조정하여 빌드 프로세스를 최적화하세요.

__CAPGO_KEEP_5__안드로이드iOS
__CAPGO_KEEP_0__ 디버그 SYMBOLProGuard __CAPGO_KEEP_0__ 매핑 파일__CAPGO_KEEP_0__ dSYM 파일
빌드 버전debug, 릴리즈, 스테이징debug, 릴리즈
Code 서명Keystore 관리배포 프로파일
자산 관리res/drawable 최적화자산 카탈로그

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

  • __CAPGO_KEEP_0__와 같은 분석 및 보안 업데이트를 위한 도구와 함께 pair할 때, 이러한 기법은 배포 프로세스에 대한 더 많은 제어를 제공합니다.
  • 빌드 스크립트 문제 및 해결
  • 커스텀 빌드 구성과 함께 작업할 때, 오류를 빠르게 해결하는 것은 빌드 프로세스를 원활하게 유지하는 데 중요합니다.
  • 오류를 빠르게 해결하는 것은 빌드 프로세스를 원활하게 유지하는 데 중요합니다.

When paired with tools like Capgo for analytics and secure updates, these techniques give you more control over your deployment process [1].

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

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

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

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

환경 변수가 누락되었습니다.

에러가 발생하는 경우에 이와 같은 오류 메시지가 나타날 수 있습니다.

error: Cannot find environment configuration for BUILD_ENV

You can fix it by creating a __CAPGO_KEEP_0__ in your project. .env.local 프로젝트의 루트 디렉토리에 파일을 넣어주세요. 예를 들어 다음과 같이 사용할 수 있습니다.

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

플랫폼별 빌드 실패

안드로이드 서명 오류를 해결하려면 이 명령어를 사용하세요:

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

iOS 배포 프로파일 문제를 해결하려면 이 방법을 시도해 보세요:

npx cap build ios --configuration=release --type=development
에러 유형공통 원인솔루션
인증 설정키스토어 정보가 누락되었습니다.설정 KEYSTORE_PATH 인증 정보
개발 환경변수 정의되지 않음플랫폼에 맞는 .env 파일
의존성버전 불일치업데이트 package.json 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"
  }
}

테스트에 대한 추가 팁:

Capgo 빌드 기능

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

Capgo는 자동 배포를 통해 효율성을 향상시키고 프로세스를 단순화하는 빌드 스크립트를 다음 단계로 끌어올립니다.

빠른 앱 업데이트

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

  • 활성 사용자 95%가 24시간 이내에 업데이트를 받습니다. 전 세계적으로 업데이트를 전달하는 성공률 82%
  • 전 세계적으로 평균 __CAPGO_KEEP_0__ 응답 시간 434ms 업데이트 전달을 위한 전 세계적인 성공률 82%
  • An average API response time of CI/CD 플랫폼의 다양한 통합을 제공하여 __CAPGO_KEEP_0__가 CI/CD 플랫폼과 완벽하게 호환됩니다..

CI/CD 플랫폼

통합 기능

Capgo seamlessly works with major CI/CD platforms, offering a variety of integrations:

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

자동 빌드 설정은 일반적으로 월 3,000원이보다 훨씬 저렴한 비용입니다. 전통적인 솔루션은 3,000원에 달할 수 있습니다. 연간 6,000 달러.

보안 표준

Capgo은 보안에 중점을 두고 robust framework를 제공합니다.

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

버전 관리 기능

  • 즉시 롤백 옵션.
  • 배포 버전 추적.
  • 업데이트 채널 관리는 단계별 릴리스를위한.

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

Capgo는 보안 프레임워크가 엄격하게 테스트 된 수백 개의 기업 애플리케이션에 걸쳐 있습니다. 팀이 추가 보안이 필요할 때, Capgo는 또한 사용자 지정 설정의 Self-hosted 솔루션을 제공합니다.

개요

빌드 단계 개요

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

Capgo 이점

Capgo는 750 개의 운영 앱에서 성공적으로 23.5 만 개의 업데이트를 전달함으로써 배포를 단순화합니다. [1]반드시 partial update 시스템은 양방향 사용량과 배포 시간을 모두 줄입니다.

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

실시간으로 Capacitor 앱에 업데이트를 적용

웹层 버그가 실시간으로 발생하면 앱 스토어 승인 대기 없이 Capgo를 통해 패치를 배포하고 사용자는 배경에서 업데이트를 받으며 네이티브 변경 사항은 일반적인 검토 경로에 남아 있습니다.

시작하기

최신 블로그

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