본문으로 바로가기

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

Capacitor와 CLI을 사용하여 효율적인 배포와 플랫폼 간 맞춤형 앱 업데이트를 위해 빌드 스크립트를 맞춤화하는 방법을 알아보세요.

마틴 도나디유

마틴 도나디유

콘텐츠 마케터

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

Capacitor CLI은 iOS, Android, 및 웹 플랫폼을 위한 앱의 빌드 프로세스를 맞춤화할 수 있습니다. 빌드 스크립트를 조정하면 다음과 같은 이점이 있습니다:

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

주요 기능 개요

  • 설정 파일: capacitor.config.jsonpackage.json 설정을 관리하기 위해.
  • 사용자 정의 스크립트: 자동화된 작업을 위해 prebuild 및 postbuild 작업을 추가합니다.
  • 빌드 훅: 빌드 프로세스의 특정 단계에서 code을 실행합니다.
  • 환경 변수: 환경에 따라 빌드를 단순화하는 .env 파일

Capgo, 배포 도구로, 이 프로세스를 자동화된 업데이트, 버전 추적, 글로벌 성능 최적화와 함께 향상시킵니다. 계속 읽어보세요. 빌드 스크립트를 최적화하기 위해 설정하고 사용자 정의하는 방법을 알아보세요. CapacitorCloudflare

소개 Capacitor 설정

Capacitor 프레임워크 문서 사이트

Capacitor 기본 빌드 프로세스

Capacitor이 기본 빌드 프로세스를 어떻게 처리하는지 이해하는 것은 커스터마이즈를 효과적으로 하려면 중요합니다. 아래에서, 우리는 Capacitor CLI의 빌드 프로세스와 주요 구성 파일을 단계별로 설명합니다.

표준 빌드 단계

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

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

기본 설정 파일

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에서 컴파일된 웹 자산의 위치를 지정합니다.
  • __CAPGO_KEEP_0__의 변경 사항을 적용한 후 capacitor.config.json, __CAPGO_KEEP_0__를 실행하여 cap sync 로 native 프로젝트가 업데이트되도록 하세요.

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

빌드 스크립트 수정

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

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

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

Creating NPM Scripts

작업 흐름을 단순화하기 위해 NPM 스크립트를 파일에 추가하세요. 예를 들어: package.json and

{
  "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: Android 또는 iOS 앱을 빌드하는 플랫폼별 명령어입니다.
  • build:platform빌드 자동화에 더 나아가려면 빌드 훅을 추가하세요.

Build Hooks Setup

더욱 세부적인 제어를 원한다면 빌드 훅을 사용하여 빌드 프로세스의 특정 단계에서 __CAPGO_KEEP_0__를 실행하세요. 예를 들어:

For more advanced control, use build hooks to execute custom code at specific points during the build process. Here’s an example setup in 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

__CAPGO_KEEP_0__

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_0__을 플랫폼에 맞게 조정하여 요구 사항을 충족시킬 수 있습니다.

__CAPGO_KEEP_0__-특정 빌드

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

__CAPGO_KEEP_0__ 구성은 각 플랫폼에 맞게 빌드를 조정하고 배포를 원활하게 하도록 합니다.

기능 안드로이드 iOS
디버그 SYMBOL ProGuard mapping 파일 dSYM 파일
빌드 변형 debug, release, staging debug, release
Code Signing 키스토어 관리 배포 프로파일 관리
자산 관리 res/drawable 최적화 자산 카탈로그

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

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

Capgo와 같은 분석 및 안전한 업데이트 도구와 함께 사용하면 이러한 기술은 배포 프로세스에 대한 더 많은 제어를 제공합니다. [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 및 동기화

수정 후에 변경 사항이 안정적임을 확인하기 위해 완전한 빌드 테스트를 실행하세요.

테스트 빌드 스크립트

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

  • 자동화된 검증: 빌드 프로세스가 예상대로 작동하는지 확인하기 위해 주요 명령어를 실행하세요.
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 Dashboard Interface

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

빠른 앱 업데이트

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

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

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

빌드 자동화

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

CI/CD 플랫폼 통합 기능 혜택
GitHub 액션 자동 빌드, 배포 트리거 연속적인 배포
GitLab CI pipeline 자동화, 버전 관리 흐름이 개선된 워크플로우
Jenkins 커스텀 워크플로우, 빌드 훅 기업 규모에 적합한 확장성

자동 빌드 설정을 일반적으로 설정하는 데 드는 비용은 약 월 $300이것은 전통적인 솔루션보다 훨씬 예산에 더 적합합니다. 전통적인 솔루션은 연 $6,000까지 올라갈 수 있습니다. 보안 표준.

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

Capgo prioritizes security with a robust framework that includes:

  • 보안 키 관리.
  • 애플 및 구글 지침에 대한 준수.
  • 버전 관리 기능

__CAPGO_KEEP_0__

  • Instant rollback options.
  • 배포 버전 추적.
  • 스테이징 릴리즈에 대한 업데이트 채널 관리.

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

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

Summary

Build Steps Overview

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

Capgo의 이점

Capgo는 750개의 프로덕션 앱에서 23.5만 개의 업데이트 배포를 성공적으로 완료했습니다. [1]. partial update 시스템은 양방향 사용량과 배포 시간을 모두 줄입니다.

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

Capacitor CLI를 계속 진행하는 방법: How to Customize Build Scripts with Capacitor CLI

__CAPGO_KEEP_0__를 사용하고 있다면 Capacitor를 사용하여 빌드 스크립트를 커스터마이즈하는 방법: How to Customize Build Scripts with Capacitor CLI CI/CD 자동화 계획을 위해 __CAPGO_KEEP_0__를 사용하여 연결하세요. Capgo CI/CD Capgo CI/CD에서 제품 워크플로우를 위해 Capgo CI/CD Capgo 네이티브 빌드 Capgo 네이티브 빌드에서 제품 워크플로우를 위해 Capgo 네이티브 빌드 Capgo 통합 Capgo 통합에서 제품 워크플로우를 위해 Capgo 통합 CI/CD 통합 CI/CD 통합 구현 세부 사항을 위해 GitHub 액션 통합 GitHub 액션 통합 구현 세부 사항

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

Capgo을 통해 웹 레이어 버그가 활성화된 경우, 앱 스토어 승인까지 며칠 기다리지 않고修정 배포를 진행하세요. 사용자는 배경에서 업데이트를 받으면서 네이티브 변경 사항은 일반적인 검토 경로에 남아 있습니다.

시작하기

블로그에서 최신 뉴스

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