메인 콘텐츠로 건너뛰기

Capacitor CLI: Project Setup Guide

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

마틴 도나디우

마틴 도나디우

콘텐츠 마케터

Capacitor CLI: Project Setup Guide

iOS와 Android 앱을 하나의 코드베이스로 빌드하고 싶으세요? Capacitor CLI은 프로세스를 단순화하여 웹 기술을 사용하여 네이티브 앱을 만들 수 있도록 해줍니다. 여기서 배울 내용은 다음과 같습니다:

  • 빠른 설정: Capacitor CLI을 설치하고 프로젝트를 몇 분 만에 초기화하세요.
  • 플랫폼 통합: 간단한 명령어로 iOS 및 Android 지원을 추가하세요.
  • 실시간 업데이트: __CAPGO_KEEP_0__ Capgo 일반적인 해결책
  • : 동기화 오류나 빌드 실패와 같은 문제를 해결하세요.시작하기 위한 주요 단계:

__CAPGO_KEEP_0__

  1. 설치 Node.js, npm, JDK, XcodeAndroid Studio.
  2. 실행 npm install @capacitor/core @capacitor/cli 앱을 초기화하세요.
  3. iOS 및 Android 플랫폼을 추가하세요. npx cap add iosnpx cap add android.
  4. 실시간 앱 업데이트를 위해 Capgo를 설정하세요. 실시간 앱 업데이트.

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

소개 Capacitor 설정

Capacitor 프레임워크 문서 사이트

설정 요구 사항

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

  • Node.js (버전 14 이상) 및 npm
  • Java JDK (11 버전 이상)
  • Xcode (iOS 빌드용으로는 12 버전 이상)
  • Android Studio (Android 빌드용)
  • Capacitor CLI 선택사항:

실시간 업데이트 활성화하려면 “ __CAPGO_KEEP_0__ 설정 가이드”Capgo Setup Guide__CAPGO_KEEP_0__ 설치 단계

CLI __CAPGO_KEEP_1__

시작하기 전에 Node.js, npm, JDK, XcodeAndroid Studio 를 설정하세요. 준비가 되면, Capacitor CLI을 설치하기 위해 다음 명령어를 실행할 수 있습니다:

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

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

이 단계를 완료한 후 새로운 프로젝트를 만드는 것 으로 이동하세요.

새로운 프로젝트 만들기

프로젝트를 시작하기 위해 Capacitor CLI을 사용하여다음 단계를 따라하세요:

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

설정 파일 업데이트

파일을 편집하여 다음 설정을 포함하세요: capacitor.config.json 업데이트가 완료되면 __CAPGO_KEEP_0__을 프로젝트에 설정하기 위해 이 설정을 사용하세요.

{
  "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 대상에 필요한 플랫폼별 패키지를 설치하기 위해 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 사용하세요.

Start by installing the necessary platform-specific packages using the Capacitor CLI:

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

iOS에서 Capgo를 사용하려면 Xcode 14 이상이 설치되어 있어야 합니다. CocoaPods 1.11 이상이 설치되어 있어야 합니다. iOS에서는 macOS 12 이상이 필요합니다. Android에서는 Android Studio Giraffe (2022.3.1+)가 필요하며 JDK 17 이상이 필요합니다. Gradle 7.5 이상이 설치되어 있어야 합니다.

Capgo를 설치한 후에는 Native 타겟이 웹 애플리케이션의 변경 사항을 업데이트해야 합니다.

플랫폼 업데이트

웹 앱을 업데이트한 후에 다음 단계를 따라 플랫폼을 최신 웹 변경 사항과 동기화하세요.

npm run build
npx cap sync

명령어는 두 가지 작업을 처리합니다. cap sync 업데이트된 웹 자산을 네이티브 플랫폼으로 복사합니다.

  • 네이티브 구성 및 플러그인을 최신 변경 사항과 일치시킵니다.
  • 명령어

IDE 설정

적절한 IDE에서 플랫폼 특정 프로젝트를 열어 주세요:

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

Xcode에서:

  1. 개발 팀을 선택하세요.
  2. 인증서를 설정하세요.
  3. 배포 식별자 업데이트.

Android Studio에서:

  1. 애플리케이션 ID를 수정하세요. build.gradle.
  2. 인증서를 위한 키스토어를 구성하세요.
  3. debug 및 release 빌드 변형을 모두 설정하세요.

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

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

Capgo Live Update Dashboard Interface

Set up Capgo to enable instant over-the-air updates for your app.

Key Features of Capgo

Capgo offers several tools to streamline app updates:

  • 끝에서 끝까지 암호화 업데이트를 보장하는 보안된 전송을 보장합니다.
  • 업데이트는 배경에서 실행됩니다. 앱이 실행될 때.
  • 분석 도구 업데이트 성공률과 사용자 참여도를 추적하는 데 도움이 됩니다.
  • A 문제가 있는 업데이트에서 빠르게 복구할 수 있는 한 번 클릭으로 롤백
  • 채널 시스템 스테이징 롤아웃과 베타 테스트에 사용할 수 있습니다. 설치

Installing Capgo

Follow these steps to get started with Capgo:

  1. Install the Capgo CLI:

    npm install --save @capgo/cli
  2. Initialize Capgo __CAPGO_KEEP_0__을 프로젝트에 설치하세요:

    npx capgo init
  3. 업데이트 빌드 및 배포:

    npm run build
    npx capgo release
  4. 앱을 열어 배경 업데이트 프로세스를 트리거하세요.

최선의 방법

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

Capgo은 Capacitor 8과 호환되며 CI/CD PIPELINE과 원활하게 통합되며 Apple 및 Google 스토어 요구 사항을 준수합니다.

일반적인 문제와 팁

Capgo 및 플랫폼 설정을 완료한 후, 일반적인 오류를 해결하는 방법을 빠르게 해결하세요.

환경 설정 문제

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

  • 오류 : __CAPGO_KEEP_0__ 명령어는 Node.js 버전 오류로 실패합니다.: CLI commands fail due to Node.js version errors. __CAPGO_KEEP_0__: Node.js 14 버전 이상 설치하십시오. (설정 요구 사항을 참조하십시오.)

구성 문제

  • 구성 불일치 오류: capacitor.config.json 변경 사항이 적용되지 않습니다. 수정: 프로젝트의 appId 및 웹 빌드 출력 폴더의 webDir 플랫폼 동기화 오류 package.json

  • 프로젝트의 오류: 실행 npx cap sync 플러그인 버전 충돌이 발생합니다. 수정: 업데이트 @capacitor/android@capacitor/ios 같은 주요 버전으로 업데이트한 후 다시 동기화 명령을 실행하세요.

빌드 및 배포

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

  • 웹 디렉토리 찾을 수 없음 오류: npx cap sync 오류 : 웹 빌드 명령을 실행하세요 (예를 들어, ) 그리고 플랫폼을 동기화하세요. npm run build실시간 업데이트 문제

__CAPGO_KEEP_0__ 업데이트 실패

  • Capgo Update Failures : 프로덕션 앱에서 업데이트 목록이 나타나지 않습니다.수정 수정: 확인해 보세요. Capgo API 키 에서 capacitor.config.json 그리고 올바른 채널을 대상으로 하고 있는지 확인하세요.

플랫폼에 따라 세팅하는 방법에 대한 자세한 내용은 Platform Setup 섹션을 다시 방문하세요. 라이브 업데이트를 사용하는 경우 Capgo 세팅 가이드를 참조하세요.

요약

세팅 검토

Capacitor CLI으로 웹 앱을 시작하고, iOS 및 Android 플랫폼을 설정하고, 라이브 업데이트를 포함하려면 Capgo를 선택적으로 추가하세요.

시작하는 방법을 알아보세요:

  • Capacitor CLI을 사용하여 프로젝트를 초기화하세요.
  • 앱의 패키지 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 구현 세부 사항을 확인하세요. API Overview for the implementation detail in API Overview, __CAPGO_KEEP_0__ 키 __CAPGO_KEEP_0__ 키에서 구현 세부 사항을 확인하세요. API for the implementation detail in API Keys, 기기 기기 구현 세부 사항에 대해 채널 채널 구현 세부 사항에 대해

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

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

웹 레이어 버그가 실시간으로 실행 중일 때, 앱 스토어 승인 대기 없이 __CAPGO_KEEP_0__를 통해 픽스를 배포하세요. 사용자는 배경에서 업데이트를 받으면서 네이티브 변경 사항은 일반적인 검토 경로에 남아 있습니다.

컨텍스트: Capgo 마케팅 웹사이트. 역할: 지원 설명 문구 또는 메타 설명. Seen in: component GetStarted.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지.

마틴의 인간 지원

Capgo gives you the best insights you need to create a truly professional mobile app.