메인 콘텐츠로 건너뛰기

Capacitor CLI: 프로젝트 설정 안내서

Learn how to set up Capacitor CLI for building native iOS and Android apps using web technologies in a few easy steps.

마틴 도나디유

마틴 도나디유

콘텐츠 마케터

Capacitor CLI: 프로젝트 설정 안내서

iOS와 Android 앱을 하나의 코드베이스로 빌드하고 싶으신가요? Capacitor CLI는 프로세스를 단순화하여 웹 기술을 사용하여 네이티브 앱을 만들 수 있도록 해줍니다. 여기서 무엇을 배울 수 있을까요?

  • 빠른 설정: Capacitor CLI를 설치하고 프로젝트를 몇 분만에 초기화하세요.
  • 플랫폼 통합: iOS와 Android 지원을 간단한 명령어로 추가하세요.
  • 실시간 업데이트: __CAPGO_KEEP_0__를 사용하여 즉시 OTA 업데이트를 받으세요. Capgo protectedTokens
  • targetLanguage: __CAPGO_KEEP_0__ 문제를 해결하세요. 예를 들어, Sync 오류나 빌드 실패와 같은 문제를 해결하세요.

시작하기 위한 주요 단계:

  1. 설치 Node.js, npm, JDK, Xcode, 그리고 Android Studio.
  2. 실행 npm install @capacitor/core @capacitor/cli 프로젝트를 초기화하세요.
  3. iOS 및 Android 플랫폼을 추가하세요. 예를 들어, iOS 및 Android 플랫폼을 추가하세요. npx cap add ios and npx cap add android.
  4. 선택 사항: Capgo을 사용하여 실시간 앱 업데이트.

이 안내서에서는 Capacitor CLI을 설정하는 방법, 플랫폼을 구성하는 방법, 앱을 배포하는 방법에 대해 다룹니다. 시작해 보세요!

소개 Capacitor 설정

Capacitor 프레임워크 문서 웹사이트

설정 요구 사항

시작하려면 다음 도구가 설치되어 있어야 합니다:

  • Node.js (버전 14 이상) 및 npm
  • Java JDK (version 11 or newer)
  • Xcode (version 12 or newer for iOS builds)
  • Android Studio (for Android builds)
  • Capacitor CLI (version 6 or 7)

Optional: If you want to enable live updates, check out the “Capgo Setup Guide” 아래에.

CLI 설치 방법

설치를 시작하기 전에 먼저 __CAPGO_KEEP_0__ Node.js, npm, JDK, Xcode, 그리고 Android Studio 설정을 완료한 후 Capacitor CLI를 설치하고 핵심 구성 요소를 설정하기 위해 다음 명령어를 실행하세요:

npm install --save @capacitor/core @capacitor/cli
npx cap init

이 명령어는 Capacitor를 설치하고 핵심 구성 요소를 설정합니다.

이 단계를 완료한 후 __CAPGO_KEEP_0__로 이동하세요. 새로운 프로젝트 만들기 __CAPGO_KEEP_0__을 사용하여 __CAPGO_KEEP_1__을 구성하는 데 도움이 됩니다.

새로운 프로젝트 만들기

프로젝트를 시작하려면 다음 단계를 따르십시오. Capacitor CLI을 사용하여 __CAPGO_KEEP_2__을 구성하는 데 도움이 됩니다.설정 파일 업데이트

mkdir my-app && cd my-app
npm init -y
npx cap init my-app com.company.app --web-dir dist

__CAPGO_KEEP_0__을 편집하여 다음 설정을 포함하십시오.

__CAPGO_KEEP_0__이 업데이트되면 __CAPGO_KEEP_1__을 사용하여 __CAPGO_KEEP_2__을 설정하십시오. capacitor.config.json 플랫폼 설정

{
  "appId": "com.company.app",
  "appName": "My App",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "server": {
    "hostname": "app.example.com",
    "androidScheme": "https"
  }
}

Once updated, use this configuration to set up Capacitor for your project.

프로젝트 구축이 완료되면 iOS 및 Android 대상 설정을 시작하십시오.

프로젝트 구축이 완료되면 iOS 및 Android 대상 설정을 시작하십시오.

iOS와 Android를 추가하세요.

Capacitor CLI을 사용하여 필요로하는 플랫폼별 패키지를 설치하세요.

npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

iOS의 경우 Xcode 14 이상이 설치되어야 하며, CocoaPods 1.11 이상, macOS 12 이상이 필요합니다. Android의 경우 Android Studio Giraffe (2022.3.1+)가 설치되어야 하며, JDK 17 이상, Gradle 7.5 이상이 필요합니다. iOS를 업데이트하기 위해 Xcode 14 이상, CocoaPods 1.11 이상, macOS 12 이상이 필요합니다. Android를 업데이트하기 위해 Android Studio Giraffe (2022.3.1+), JDK 17 이상, Gradle 7.5 이상이 필요합니다. 업데이트가 완료되면 웹 앱의 변경 사항을 플랫폼에 동기화해야 합니다. __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 사용하여 플랫폼을 최신 웹 변경 사항과 동기화하세요.

명령어는 두 가지 작업을 처리합니다:

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 사용하여 플랫폼을 최신 웹 변경 사항과 동기화하세요.

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 사용하여 플랫폼을 최신 웹 변경 사항과 동기화하세요.

npm run build
npx cap sync

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 사용하여 플랫폼을 최신 웹 변경 사항과 동기화하세요. cap sync __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 사용하여 플랫폼을 최신 웹 변경 사항과 동기화하세요.

  • __CAPGO_KEEP_0__을 웹 어셋의 최신 버전으로 native 플랫폼으로 복사합니다.
  • __CAPGO_KEEP_0__은 native 구성 및 플러그인을 최신 변경 사항과 일치시킵니다.

IDE 설정

native 프로젝트를 적절한 IDE에서 열어주세요:

npx cap open ios     # Opens Xcode
npx cap open android # Opens Android Studio

Xcode에서:

  1. 개발 팀을 선택하세요.
  2. 인증서를 설정하세요.
  3. 빌드 식별자(Identifier)를 업데이트하세요.

Android Studio에서:

  1. 애플리케이션 ID를 수정하세요. build.gradle.
  2. Android Studio에서 서명 키 스토어를 구성하세요.
  3. debug 및 release 빌드 버전을 모두 설정하세요.

설정이 모두 완료되면 프로젝트를 빌드하여 npx cap build ios 를 사용하여 프로젝트를 빌드하세요. npx cap build android를 다시 실행하여 모든 자산이 최신 상태인지 확인하세요. npx cap sync __CAPGO_KEEP_0__

Capgo __CAPGO_KEEP_0__ 라이브 업데이트 데스크톱 인터페이스

Capgo을 설정하여 앱에 대한 즉시 OTA 업데이트를 활성화하세요.

Capgo의 주요 기능

Capgo은 앱 업데이트를 단순화하는 여러 도구를 제공합니다.

Capgo은 업데이트의 보안된 전달을 보장하는 종단-to-종단 암호화 기능을 제공합니다.

  • __CAPGO_KEEP_0__ __CAPGO_KEEP_0__
  • __CAPGO_KEEP_0__ 설치 배경에서 실행 앱이 시작될 때 업데이트가 실행됩니다.
  • 분석 도구 업데이트 성공률과 사용자 참여도를 추적하는 데 도움이 됩니다.
  • A 문제가 있는 업데이트에서 빠르게 복구할 수 있는 한 번 클릭으로 롤백 옵션
  • 스테이지드 롤아웃과 베타 테스트를 위해 채널 시스템을 사용하세요. 설치하기

Capgo

Capgo을 시작하기 위해 다음 단계를 따르세요.

  1. Capgo CLI을 설치하세요.:

    npm install --save @capgo/cli
  2. Capgo을 초기화하세요. 프로젝트에 적용하세요.

    npx capgo init
  3. 업데이트를 빌드하고 릴리즈하세요.

    npm run build
    npx capgo release
  4. 앱을 열어 백그라운드 업데이트 프로세스를 트리거하세요.

최선의 방법

  • 채널을 사용하여 업데이트를 테스트하고 모든 사용자에게 릴리즈하기 전에 테스트하세요.
  • 분석을 모니터링하여 업데이트가 성공적으로 전달되고 사용자가 유지되도록 하세요.
  • 오류 추적을 활성화하여 문제를 일찍 해결하세요.
  • 문제를 신속하게 해결하기 위해 롤백 기능을 준비하세요.

Capgo은 Capacitor 8과 호환되며 CI/CD PIPELINE과 잘 통합되고 애플 및 구글 스토어 요구사항을 충족합니다.

일반 문제와 팁

플랫폼과 Capgo 설정을 완료한 후, 일반적인 오류를 마주할 수 있습니다. 이에 대한 해결 방법을 빠르게 알아보세요.

환경 설정 문제

  • CLI 찾을 수 없음 오류: 명령어 npx cap 실패. 해결: 다시 실행하고 시도해 보세요. npm install --save @capacitor/cli @capacitor/core 노드 버전 불일치

  • 오류 명령어: CLI 명령이 Node.js 버전 오류로 실패합니다. Fix: Node.js 버전 14 이상을 설치하십시오. 설치 요구 사항에 설명된 대로.

설정 문제

  • Config 불일치 오류: 변경 사항이 capacitor.config.json 적용되지 않습니다. Fix: 프로젝트의 appIdwebDir 값이 프로젝트의 값과 일치하는지 확인하십시오. package.json __CAPGO_KEEP_0__

  • __CAPGO_KEEP_1__ __CAPGO_KEEP_2____CAPGO_KEEP_3__ npx cap sync __CAPGO_KEEP_4__ __CAPGO_KEEP_5____CAPGO_KEEP_6__ @capacitor/android __CAPGO_KEEP_7__ @capacitor/ios __CAPGO_KEEP_8__

__CAPGO_KEEP_9__

  • __CAPGO_KEEP_10__ __CAPGO_KEEP_11__: iOS 또는 Android 빌드가 인증서 또는 키 스토어가 누락된 경우에 실패합니다. Fix: IDE 설정 지침을 따르세요. iOS의 경우 Xcode에서 개발 팀을 추가하고, Android의 경우 키 스토어를 구성하세요. build.gradle.

  • Web Directory Not Found 오류: npx cap sync 웹 자산을 찾을 수 없습니다. Fix: 웹 빌드 명령을 실행하세요 (예를 들어, npm run build)

Live Update Issues

  • Capgo 업데이트 실패 오류: 업데이트 이 프로덕션 앱에 나타나지 않습니다. Fix: __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ 키를 다시 확인하고 올바른 채널을 대상으로 하도록 보장하세요. Capgo API key Summary capacitor.config.json Setup Review

For more details on platform-specific setup, revisit the Platform Setup section. If you’re working with live updates, consult the Capgo Setup Guide for additional troubleshooting tips.

Here’s how to get started:

Capacitor를 사용하여 프로젝트를 초기화하세요.

Start your web app with Capacitor CLI, set up iOS and Android platforms, and optionally include Capgo for live updates.

Capacitor를 사용하여 프로젝트를 초기화하세요.

  • Use the Capacitor CLI to initialize your project.
  • 앱의 패키지 ID를 설정하고 웹 출력 디렉토리를 정의하세요.
  • iOS 및 Android 플랫폼을 지원하도록 설정하세요.
  • 다음 명령어를 사용하여 Capgo을 설치하고 설정하세요: npm install --save @capgo/cli && npx capgo init

세부한 설정 지침 또는 문제 해결에 대한 자세한 내용은 공식 Capacitor 및 Capgo 문서를 확인하세요.

Capacitor CLI: 프로젝트 설정 안내서에서 계속하세요.

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__: 프로젝트 설정 안내서를 사용하여 대시보드 및 __CAPGO_KEEP_0__ 운영을 계획하고 있습니다. __CAPGO_KEEP_0__ Overview와 연결하세요. Capacitor CLI: Project Setup Guide API Overview를 사용하여 구현 세부 사항을 확인하세요. API Overview API __CAPGO_KEEP_1__: 프로젝트 설정 안내서를 사용하여 대시보드 및 API 운영을 계획하고 있습니다. API Overview와 연결하세요. __CAPGO_KEEP_0__ Overview를 사용하여 구현 세부 사항을 확인하세요. 소개 API 키 API 키의 구현 세부 정보를 위한 키 장치 장치의 구현 세부 정보를 위한 키 배포 배포의 구현 세부 정보를 위한 키

실시간 업데이트 Capacitor 앱

웹-layer 버그가 실시간으로 실행 중일 때, 앱 스토어 승인까지 며칠 기다리지 않고 Capgo를 통해 픽스를 배포하세요. 사용자는 배경에서 업데이트를 받으면서 네이티브 변경 사항은 일반적인 검토 경로를 유지합니다.

시작하기

최신 블로그 글

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