Base44에서 네이티브 모바일 앱으로 Capacitor

소개

Base44 Base44은 React 애플리케이션을 생성하는 AI 보조 앱 빌더입니다. 브라우저에서 작동하는 완전한 제품을 빠르게 배포할 수 있지만 iOS와 Android로 배포하고 싶다면? 이 튜토리얼에서는 Base44 프로젝트를 내보내고 Native 모바일 앱으로 변환하는 방법을 보여줍니다. Capacitor, 그리고 signed store binaries를 ship합니다. Capgo 빌더 — iOS에 대한 Mac이 필요하지 않습니다.

이 가이드의 끝에서, Base44 앱은 iOS 및 Android에서 natively 실행되며 카메라, 저장소, 푸시 알림과 같은 장치 기능에 접근할 수 있습니다.

필수 조건 및 시간 예상

시간이 필요한 것: 첫 번째 설정을 위해 2-4 시간

시스템 요구 사항:

iOS 클라우드 빌드에 대해: Capgo 빌더가 있는 모든 OS (Windows, Mac, 또는 Linux)
Android 클라우드 빌드에 대해: 모든 OS
__CAPGO_KEEP_0__10GB의 의존성 및 빌드 아티팩트에 대한 무료 공간
RAM: 8GB의 최소

비용:

Base44 export: 빌더 플랜 이상 (GitHub export 및 ZIP 다운로드)
iOS App Store: 연간 $99 (Apple Developer 계정)
Android Play Store: $25 한 번의 비용 (Google Play Developer)
Cursor Pro월 $20 (권장 사항이지만 선택 사항)

필수 소프트웨어:

Node.js 18 이상
code과 같은 편집기 커서

Base44 앱을 모바일로 변환하는 이유

확장된 접근성: 사용자가 기대하는 네이티브 앱 아이콘을 만나는 곳에서 만나요, 브라우저 탭이 아닌
네이티브 기능: Capacitor 플러그인으로 카메라, GPS, 생체 인식, 오프라인 저장소
애플 스토어 배포: 구글 플레이 스토어와 애플 앱 스토어에서 배포
빠른 반복: Capgo Live Updates와 Capgo Builder를 pair하여 웹-layer 수정을 위해 매번 네이티브 바이너리를 재빌드하지 않도록 하세요

Step 1: Base44 프로젝트를 내보세요

Base44는 Builder plan 이상의 경우 code를 내보내도록 해줍니다. 당신에게는 두 가지 주요 옵션이 있습니다.Option A: __CAPGO_KEEP_0__로 내보내기 (권장)

Option A: Export to GitHub (Recommended)

__CAPGO_KEEP_0__
__CAPGO_KEEP_1__ GitHub 권한을 허용하세요
__CAPGO_KEEP_2__ Base44 Builder 프로젝트를 생성하거나 GitHub 저장소에 연결하세요.
Base44는 지원하는 계획의 경우 두 가지 방식의 동시 동기화를 통해 앱 code을 GitHub과 자동으로 동기화합니다.

보기 Base44 GitHub 통합 문서를 참조하세요. 자세한 내용은 여기서.

Option B: ZIP으로 다운로드

파일 브라우저를 열기 위해 상단 메뉴의 __CAPGO_KEEP_0__을 클릭하세요. 파일 브라우저를 열기 위해 상단 메뉴의 Code을 클릭하세요. 프로젝트를 ZIP으로 내보내기
Option B: ZIP으로 다운로드 파일 브라우저를 열기 위해 상단 메뉴의 __CAPGO_KEEP_0__을 클릭하세요. 위쪽 오른쪽의 code 뷰
컴퓨터에 압축을 풀어주세요

커서 프로젝트 열기

Visit cursor.sh 및 커서 설치
Clone your GitHub repo (Git: Clone 명령 팔레트에서 또는 압축을 풀린 ZIP 폴더를 열기 위해 File > 폴더 열기

커서 시작

최상의 AI-assisted 워크플로우를 위해, 커서 설정에서 선호하는 모델을 활성화하고 명령 실행을 허용하세요 — 우리의 모바일 가이드에서 설명한 것과 같은 설정.

Step 2: 개발 환경 설정

Base44은 표준 React 프로젝트를 내보냅니다. 의존성을 설치하고 개발 서버가 작동하는지 확인하세요.

Cursor AI 사용하기 (권장)

클릭 Command+K (Mac) 또는 Ctrl+K (Windows) 키를 누르고:

Install Node.js if needed, install project dependencies, and start the dev server

수동 설정

cd your-base44-project
npm install
npm run dev

Base44 앱이 로컬에서 실행 중입니다

Base44 앱은 http://localhost:5173 (Vite) 또는 터미널에 표시된 포트에서 로드되어야 합니다.

Step 3: 프로덕션 빌드 준비

Capacitor는 정적 웹 자산이 필요합니다. Base44 React 앱은 일반적으로 Vite를 사용하고 Vite로 출력합니다. dist/.

모바일용 Vite를 구성하십시오.

Ask Cursor:

Configure vite.config for Capacitor mobile deployment with base './' and production build to dist

또는 수동으로 vite.config.ts 수동으로:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
  },
})

생산 빌드 테스트

npm run build

있는지 확인하십시오. dist/ 폴더가 존재하고 index.html 및 번들된 자산이 있습니다.

Base44 빌드 출력

Step 4: Capacitor을 Base44 프로젝트에 추가하십시오.

Cursor AI 사용 (권장)

Install Capacitor CLI, initialize it for my Base44 app with webDir dist, and add iOS and Android platforms

수동 설치

npm install -D @capacitor/cli
npm install @capacitor/core @capacitor/ios @capacitor/android

npx cap init "Your Base44 App" com.yourcompany.yourapp --web-dir dist
npx cap add ios
npx cap add android

Capacitor 초기화는 Base44 앱에 대해 수행됩니다.

__CAPGO_KEEP_0__을 git에 추가하세요. ios/ and android/ 폴더를 git에 추가하세요. Capgo 빌더는 그 폴더에 있는 모든 것을 컴파일합니다.

5단계: Capacitor을 구성하세요.

__CAPGO_KEEP_0__을 업데이트하세요. capacitor.config.ts:

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

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Base44 App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
}

export default config

__CAPGO_KEEP_0__을 추가하는 것을 고려하세요. @capgo/capacitor-updater __CAPGO_KEEP_0__ Live Updates 문서를 참조하세요. Capgo Live Updates docs.

웹 앱을 변경할 때마다:

__CAPGO_KEEP_0__ Sync가 Base44 앱에 완료되었습니다.

npm run build
npx cap sync

Capacitor Sync가 Base44 앱에 완료되었습니다.

7단계: Capgo 빌더를 사용하여 스토어에 준비된 바이너리 빌드하기 (권장)

시뮬레이터 테스트는 선택 사항입니다. 테스트 플라이트, 내부 테스트 및 스토어 제출을 위해 Capgo 빌더 클라우드에서 네이티브 바이너리를 컴파일하고 서명하기 위해 사용합니다.

Capgo 빌더를 사용하는 이유는 Base44 앱에 무엇이 있는가?

Mac이 필요하지 않습니다. iOS — Windows 또는 Linux에서 빌드
CLI이 AI 에이전트가 실행할 수 있는 것과 동일합니다. — Base44 → GitHub → 커서의 vibe-coding 워크플로우와 호환
__CAPGO_KEEP_0__ 빌더와 함께 Live Updates — UI를 수정하고 공유할 수 있으며, 플러그인 또는 권한이 변경될 때만 네이티브로만 재빌드

Capgo 빌더 설정

npx @capgo/cli@latest login
npx @capgo/cli@latest init
npx @capgo/cli@latest build init --platform ios
npx @capgo/cli@latest build init --platform android

Save signing credentials once. See 인증 정보를 한 번만 저장하세요. 자세히 보기 and 그리고.

Build iOS from Windows

npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.yourapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.yourapp --platform android --build-mode release

Windows에서 iOS를 빌드하세요

Request a cloud build

npx @capgo/cli@latest bundle upload --channel production

클라우드 빌드를 요청하세요

Build logs stream in your terminal. With App Store Connect configured, iOS builds can upload to TestFlight automatically.

npx cap open ios      # Xcode + iOS Simulator
npx cap open android  # Android Studio + emulator

Xcode opening a Base44 Capacitor project

Upload your web bundle for OTA updates: OTA 업데이트를 위해 웹 번들을 업로드하세요: ','Step 8: Optional — Test Locally in Xcode or Android Studio ','8. 옵션 — Xcode 또는 Android Studio에서 로컬 테스트 ','If you have a Mac or want emulator testing before cloud builds: ','Mac이 있거나 클라우드 빌드 전에 에뮬레이터 테스트를 원한다면: ','Xcode opening a Base44 Capgo project ','Xcode에서 Base44 Capgo 프로젝트를 열기 ','Use local IDEs for day-to-day debugging. Use ','로컬 IDE를 사용하여 일상적인 디버깅을 하세요. ','Capgo Builder ']} __CAPGO_KEEP_0__

9: Native 기능 추가

Base44 앱을 장치 기능으로 강화하세요:

npm install @capacitor/share @capacitor/camera @capacitor/push-notifications
npx cap sync

Cursor가 Share, Camera, 또는 Push를 React 컴포넌트에 연결하도록 요청하세요. 플러그인을 추가한 후 새로운 Capgo 빌더 __CAPGO_KEEP_0__ 제출 전 빌드

Capacitor 앱에 추가된 Native 기능

10: 프로덕션 최적화

앱 아이콘 및 스플래시 화면

npm install -D @capacitor/assets
# Add assets/icon.png (1024x1024) and assets/splash.png (2732x2732)
npx capacitor-assets generate
npx cap sync

Base44 백엔드 고려 사항

SDK이 Base44 호스팅 백엔드에 호출될 수 있으며, Capacitor에서 일반적으로 작동합니다. 단, SDK 호출이 HTTPS를 사용하는 경우에만

API
웹뷰 내에서 인증 리다이렉트가 작동합니다 (실기기에서 로그인 테스트)
마법 링크 또는 OAuth 흐름을 사용하는 경우 깊이 링크가 구성됩니다

Base44의 백엔드에서 나중에 마이그레이션할 경우 __CAPGO_KEEP_0__와 관련된 __CAPGO_KEEP_1__ 호출을 대체할 계획을 세워야 합니다 — React UI layer는 일반적으로 유지됩니다. base44.entities.* and related SDK calls with your own API — the React UI layer typically carries over.

시작 시 화면이 흰색으로 표시됩니다

확인

Vite config에서 설정됩니다 base: './' 실행
그리고 __CAPGO_KEEP_0__가 상대 경로로 자산을 로드하는지 확인하세요 npm run build 실행 dist/index.html Run
and check that __CAPGO_KEEP_1__ loads assets with relative paths npx cap sync 웹 빌드 후

빌드 에러가 Capgo 빌더에서 발생합니다.

커밋 ios/ 그리고 android/ 클라우드 빌드를 요청하기 전에 git에 업로드합니다.
실행 npx cap sync 로컬로 실행하여 웹 자산이 네이티브 프로젝트에 복사됩니다.
새로운 Capacitor 플러그인은 네이티브 빌드가 다시 필요합니다.

Base44에서 Export가 사용할 수 없습니다.

GitHub export와 ZIP 다운로드는 Builder plan 이상이 필요합니다. Base44에서 업그레이드하거나 __CAPGO_KEEP_0__ 뷰에서 파일을 수동으로 복사하십시오.. Upgrade in Base44 or copy files manually from the Code view on lower tiers.

결론

Capacitor을 통해 Base44 AI-generated React 앱을 내보내고 Capacitor을 wrapping하여 signed iOS 및 Android 바이너리까지의 명확한 경로를 가지고 있습니다. Capgo 빌더 — 지역 Xcode 농장 유지하지 않고도 signed iOS 및 Android 바이너리를 얻을 수 있습니다.

다음 단계

Capgo 라이브 업데이트: 스토어 리뷰 기다리지 않고 UI 및 복사본 수정을 배달할 수 있습니다.
Capgo 빌더: CI에서 릴리즈 빌드를 자동화할 수 있습니다.
푸시 알림: 추가하고 __CAPGO_KEEP_0__ 빌더로 다시 빌드할 수 있습니다. @capacitor/push-notifications Capgo Live Updates
관련된 안내서: 모바일로 사랑스럽다 · Bolt.new to mobile

Capgo 무료 계정으로 가입하세요 Live Updates 및 클라우드 네이티브 빌드를 활성화합니다.

자원

Base44에서 Native Mobile 앱으로 계속 진행하세요. Capacitor

만약에 Capgo를 사용하여 Capacitor __CAPGO_KEEP_0__과 연결하여 Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리에서 Capacitor 플러그인들에 의해 Capgo Capacitor 플러그인들에 의해 Capgo의 구현 세부사항 Capgo 네이티브 빌드 Capgo 네이티브 빌드에서 윈도우에서 맥 없이 클라우드 iOS 빌드를 맥 없이 클라우드 iOS 빌드

Capacitor를 사용하여 Native 모바일 앱으로 변환하는 Base44

소개