메인 콘텐츠로 바로가기
Capgo 로고
개발 모바일 업데이트

Capacitor CLI 설치 가이드

Capacitor CLI를 사용하여 웹 앱을 효율적으로 네이티브 모바일 앱으로 변환하는 방법을 배워보세요.

마틴 도나디유

마틴 도나디유

콘텐츠 마케터
Capacitor CLI 설치 가이드

Capacitor CLI는 하나의 코드베이스로 네이티브 iOS 및 Android 앱으로 웹 앱을 변환하는 데 도움이 됩니다. 빠르게 설정하는 방법은 다음과 같습니다:

  • 사전 요구 사항: 설치 Node.js (v16+), npm, 및 웹 프레임워크 (React, Vue, Angular, 등).
  • Capacitor CLI을 설치하세요.: 실행 npm install @capacitor/cli @capacitor/core 프로젝트를 초기화하세요. npx cap init.
  • 플랫폼 준비: iOS (npx cap add ios) 및 Android (npx cap add android) 플랫폼에 대한 지원을 추가하세요.
  • 빌드 및 동기화: 사용 npm run build 그리고 네이티브 프로젝트로 웹 자산을 전송하는 데 사용합니다. npx cap sync 선택적 라이브 업데이트
  • : __CAPGO_KEEP_0__과 같은 도구를 사용하여 앱 스토어 지연 없이 즉시 업데이트를 푸시합니다.__CAPGO_KEEP_0__ __CAPGO_KEEP_1__는 앱 개발 및 유지 관리를 단순화합니다.MOOTH 설정 및 문제 해결을 위한 가이드를 따르십시오. Capgo __CAPGO_KEEP_0__

Capacitor CLI simplifies app development and maintenance. Follow the guide for smooth setup and troubleshooting.

DaisyUI Capacitor 프레임워크 문서 사이트 + __CAPGO_KEEP_0__ + __CAPGO_KEEP_1__

Capacitor

시작하기 전에

__CAPGO_KEEP_0__ 환경을 설정하기 위해 다음 단계를 따르세요:

설정 Node.js and npm

Node.js 버전 16 이상이 필요합니다. 최신 LTS 버전을 권장합니다. 설정을 확인하려면 다음 명령어를 실행하세요:

__CAPGO_KEEP_0__ 업데이트가 필요하다면, 공식 웹사이트에서 Node.js (Node.js 포함)를 다운로드하세요.

node --version
npm --version

Node.js가 준비되었는지 확인한 후, 웹 프로젝트가 필요한 npm 요구 사항을 충족하는지 확인하세요.

After confirming Node.js is ready, ensure your web project meets the necessary Capacitor requirements.

웹 프로젝트는 다음을 포함해야 합니다:

Node.js

  • A valid __CAPGO_KEEP_0__: __CAPGO_KEEP_1__이 올바르게 구성되어야 합니다.
  • A __CAPGO_KEEP_2__ directory: __CAPGO_KEEP_3__에서 웹 자산이 저장됩니다 (일반적으로 dist or www).
  • __CAPGO_KEEP_4__: __CAPGO_KEEP_2__에는 __CAPGO_KEEP_5__가 포함되어야 합니다. index.html __CAPGO_KEEP_6__의 주요 필드:

필수 필드 package.json __CAPGO_KEEP_7__

__CAPGO_KEEP_8____CAPGO_KEEP_9__목적
이름”my-app”프로젝트를 식별합니다.
버전”1.0.0”앱 버전을 지정합니다.
빌드 디렉토리”dist” or “www”웹 자산을 참조합니다.

Node.js 및 웹 프로젝트가 준비되면, 플랫폼별 도구를 설치하는 단계로 넘어가세요.

필요한 소프트웨어 설치

Android 개발을 위해:

iOS 개발을 위해 (Mac 전용):

Capgo을 통합할 때 나중에 안정적인 인터넷 연결과 유효한 SSL 인증서가 있는지 확인하세요.

이러한 단계를 완료하면 smooth한 Capacitor 개발 프로세스를 위해 준비가 됩니다. 다음으로, Capacitor CLI를 설치하겠습니다.

Capacitor CLI 설치

환경이 준비되면, Capacitor CLI를 설치하고 구성하세요.

Capacitor 패키지 추가

Capacitor CLI 및 Core 패키지를 npm를 사용하여 설치하세요.

npm install @capacitor/cli @capacitor/core

설치가 완료되면, 설정을 확인하기 위해 Capacitor CLI 버전 확인:

npx cap --version

프로젝트 설정

프로젝트에 다음 명령어를 사용하여 Capacitor을 초기화하세요:

npx cap init

초기화 중에 다음 정보를 제공하라는 메시지가 표시됩니다:

설정설명예시
앱 이름앱 스토어에서 표시되는 이름”My Awesome App”
앱 ID앱의 고유 식별자”com.mycompany.myapp”
웹 디렉토리웹 자산의 경로”dist” or “www”

다음으로, 구성 파일 (capacitor.config.ts )을 업데이트하여 관련 설정을 추가하세요: capacitor.config.jsoniOS 및 Android 설정

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.mycompany.myapp',
  appName: 'My Awesome App',
  webDir: 'dist',
  bundledWebRuntime: false
};

export default config;

iOS 및 Android 플랫폼을 지원하기 위해 다음 명령어를 실행하세요:

이것은 네이티브 프로젝트를 생성합니다:

npx cap add ios
npx cap add android

iOS

  • : Xcode 프로젝트가 포함된 폴더를 생성합니다.Android ios Android
  • Android: 프로젝트 폴더를 생성합니다. android Android Studio 프로젝트 폴더를 생성합니다.

웹 자산에 대한 변경 사항을 적용한 후 다음 명령어를 실행하여 빌드 및 동기화하세요.

npm run build
npx cap sync

이 프로세스는 웹 자산을 컴파일하고 네이티브 프로젝트로 전송하며, 설치된 __CAPGO_KEEP_0__ 플러그인도 포함합니다. Capacitor 플러그인을 설치한 경우, 네이티브 프로젝트를 열어 커스터마이즈하세요..

설정을 테스트하고 발생할 수 있는 문제를 해결하세요.

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

일반적인 문제를 해결하세요.

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ 설정 시 발생할 수 있는 일반적인 문제를 해결하세요.

When setting up Capacitor CLI, you might run into a few common hiccups. Here’s how to tackle them:

Android 디렉토리로 이동하여 빌드 캐시를 삭제하세요.

Android Gradle 관련 문제를 해결하세요.

  1. Android 디렉토리로 이동하여 빌드 캐시를 삭제하세요.

    cd android
./gradlew cleanBuildCache

  2. Gradle 버전을 업데이트 하세요. android/build.gradle:

    buildscript {
    ext {
        gradleVersion = '8.1.0'
    }
}

  3. 다음 줄을 추가하세요. android/gradle.properties 더 나은 성능을 위해:

    org.gradle.jvmargs=-Xmx4608m
org.gradle.parallel=true

문제가 지속된다면, 설정을 다시 확인하거나 추가적인 문제 해결 자원에 문의하세요.

앱 화면이 빈 화면입니다.

빈 화면은 일반적으로 구성 문제를 나타냅니다. 이 문제를 해결하는 방법은 다음과 같습니다.

  • 웹 디렉토리 경로를 확인하세요.: 설정된 경로가 빌드 출력과 일치하는지 확인하세요. webDir 서버 설정을 확인하세요.

    const config: CapacitorConfig = {
    webDir: 'dist', // Adjust if necessary
};

  • : 서버 설정이 올바른지 확인하세요.내용 보안 정책을 업데이트 하세요.

    server: {
    url: 'http://localhost:3000',
    cleartext: true
}

  • __CAPGO_KEEP_0__: __CAPGO_KEEP_0__을 위한 올바른 리소스 로딩을 위해 HTML에 이 메타 태그를 추가하세요.

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: *">

플러그인 사용 불가

플러그인이 예상치 못한 동작을 하더라도 다음 단계를 따라하세요:

  1. 의존성 설치를 다시 시작하세요:

    rm -rf node_modules
npm cache clean --force
npm install

  2. __CAPGO_KEEP_0__의 플러그인 설정을 capacitor.config.ts 에서 올바르게 구성되었는지 확인하세요:

    plugins: {
    PluginName: {
        option: 'value'
    }
}

Cloudflare의 Capgo’s native plugin자동으로 플러그인과 호환성을 유지하며 업데이트시에 동기화를 유지합니다.

이러한 수정을 적용한 후 프로젝트를 다시 빌드하여 변경 사항을 확인하세요.

npm run build && npx cap copy && npx cap sync

Capgo을 탐색하기 전에 모든 것이 정상적으로 작동하는지 확인하세요.

실시간 업데이트 옵션에 대해 탐색하기 전에 모든 것이 정상적으로 작동하는지 확인하세요. Capgo

Capgo Live Update Dashboard Interface

__CAPGO_KEEP_0__를 간소화합니다. 앱 업데이트를 Capgo를 사용하여 앱 업데이트를 직접 사용자에게 푸시할 수 있습니다. 앱 스토어 리뷰의 필요성을 피할 수 있습니다.

시작하는 것은 간단합니다. 먼저 필요한 패키지를 설치하세요.

npm install @capgo/cli @capgo/capacitor-updater
npx cap sync

그 다음, Capgo를 프로젝트에 초기화하세요.

npx @capgo/cli init

가격 계획

Capgo는 다양한 요구를 충족시키기 위해 여러 가격 계획을 제공합니다.

계획월 활성 사용자대역폭저장공간년간 가격
SOLO1,00050 GB2 GB$12/월
MAKER10,000500 GB5 GB$33/월
TEAM100,0002,000 GB10 GB$83/월

기업 사용자들을 위한 PAYG 계획은 $249/월부터 시작하여 API 접근, 커스텀 도메인, 및 전용 지원과 같은 특혜를 포함합니다.

실시간 업데이트 설정

실시간 업데이트 활성화하려면 다음을 자신의 capacitor.config.ts 파일:

{
  plugins: {
    CapacitorUpdater: {
      autoUpdate: true,
      updateUrl: 'https://api.capgo.app/updates'
    }
  }
}

주요 기능

Capgo은 다음과 같은 독특한 기능을 제공합니다:

  • 보안 업데이트 끝에서 끝까지 암호화된 업데이트
  • 자동 배포 통합 CI/CD를 통해
  • 대상 업데이트 사용자 assignment을 통해
  • 즉시 롤백 버전 관리와 함께
  • 실시간 분석 업데이트를 추적하기 위해

배포 명령

개발 환경에서 테스트한 후 라이브로 배포하기 전에 업데이트를 테스트하세요. 다음 명령어를 사용하세요:

  • 스테이징으로 배포:

    npx @capgo/cli deploy --channel staging

  • 생산으로 배포:

    npx @capgo/cli deploy --channel production

Capgo은 애플 및 안드로이드 지침을 준수하도록 하며, 라이브 업데이트가 앱 스토어 위반 위험을 피할 수 있도록 합니다. 설치 후 관리하는 Capacitor 앱의 효율적인 방법입니다.

결론

Capacitor CLI을 설정하는 것은 올바른 전제 조건이 있는 경우 간단합니다. 이 설정은 앱 업데이트가 smoother하고 개발 워크플로우가 효율적임을 보장합니다.

모던한 도구는 앱 유지보수가 지금까지보다 쉽습니다. 예를 들어, Capgo은 실시간 업데이트를 제공하고, 이전의 방법을 대체합니다. CLI 설치와의 통합으로 인해 Capacitor 앱과 함께 작업하는 개발자에게 Capgo은 훌륭한 옵션이 됩니다.

The Capacitor 생태계 는 새로운 도구와 기능으로 지속적으로 개선되고 있습니다. CLI 설치는 모바일 앱 빌딩의 시작점으로, 세부적인 문서화와 활발한 개발자 커뮤니티의 혜택을 누릴 수 있습니다. __CAPGO_KEEP_0__ __CAPGO_KEEP_1__과 패키지를 최신 상태로 유지하여 호환성 문제를 피하십시오.설치하는 것을 계속하세요: Installing __CAPGO_KEEP_0__ __CAPGO_KEEP_1__: Step-by-Step Guide

Be sure to keep the Capacitor CLI and its packages up to date to avoid compatibility issues.

설치하는 것을 계속하세요: Installing Capacitor CLI: Step-by-Step Guide

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 설치하는 방법: 단계별 가이드 Installing Capacitor CLI: Step-by-Step Guide API을 위한 대시보드와 API 운영을 계획하고 연결하세요. API 개요 API 개요의 구현 세부 정보에 대해 소개 소개의 구현 세부 정보에 대해 API 키 API 키의 구현 세부 정보에 대해 장치 장치의 구현 세부 정보에 대해 패키지 패키지의 구현 세부 정보에 대해

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

웹-layer 버그가 활성화된 경우 Capgo를 통해 픽스를 배포하는 대신 앱 스토어 승인까지 며칠 기다리지 말고.

시작하기

최신 블로그 글

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

Capacitor 앱에서 2-way 통신
개발, 모바일, 업데이트
2025년 4월 26일

Capacitor 앱에서 2-way 통신

__CAPGO_KEEP_0__ OTA 업데이트 실수 5가지 피하기
개발, 보안, 업데이트
2025년 4월 13일

5가지 OTA 업데이트 실수를 피하는 방법

모바일 앱 라이브 업데이트에 대한 5가지 보안最佳 관행
개발, 모바일, 업데이트
2025년 1월 14일

모바일 앱 라이브 업데이트에 대한 5가지 보안最佳 관행

블로그에서 모두 보기