AIStudio ) PowerShell로 Android( Capacitor ) 세팅 끝내기

앱 프로젝트 만들기: AIStudio 작업 끝 → PowerShell로 Android( Capacitor ) 세팅 끝내기
: android 폴더 생성부터 스튜디오 오픈까지

• 프로젝트는 React + Vite
• 빌드 폴더는 dist
• PowerShell은 **프로젝트 루트(package.json 있는 폴더)**에서 실행

 

1) 프로젝트 폴더로 이동 + 확인

•  AIStudio에서 만든 어플 이름으로 프로젝트 관리하는 폴더에 폴더 추가.
• 새로 만든 폴더에 AiStudio에서 다운 받은 폴더 압축 풀기

cd "C:\Users\AppProjects\프로젝트 이름"
dir

 

 

2) 의존성 설치 + 빌드

npm install
npm run build

 

 

3) Capacitor 설치 여부 체크

npm ls @capacitor/cli @capacitor/core @capacitor/android

 

▶ 출력에 (empty) 또는 not found / 에러면 → 아래 설치 진행

npm i -D @capacitor/cli
npm i @capacitor/core @capacitor/android

 

▶  설치 후 다시 확인:

npm ls @capacitor/cli @capacitor/core @capacitor/android

 

 

4) Capacitor 설정 파일 존재 확인

dir capacitor.config.*

 

 

4-1 ) 없으면 init

npx cap init

 

>> App name : 원하는 데로 
>> App ID : com.회사이름.원하는데로 만든 앱 이름
>> Web Dir 물어보면 : dist 입력.

 

 

5) webDir 확인 (Vite는 dist)

capacitor.config.* 열어서 아래 확인:
>> webDir: "dist"
(다르면 dist로 수정)

 

 

6) Android 플랫폼 추가 (android 폴더 생성)

npx cap add android

 

▶ 성공하면 루트에 android/ 폴더 생김

이미 android 폴더가 있으면 “already exists” 뜰 수 있는데 그럼 다음 단계로 가면 됨.

 

 

7) 동기화 (웹 빌드/플러그인/설정 반영)

npx cap sync android

 

 

8) Android Studio 열기

npx cap open android

 

 

자주 막히는 에러 빠른 해결

A) npm error could not determine executable to run
원인: @capacitor/cli 미설치/깨짐 해결:

npm i -D @capacitor/cli​

B) Could not find the web assets directory
원인: webDir 불일치 해결: capacitor.config.*에서 webDir: "dist" 확인 후

npm run build
npx cap sync android​

 

 

압축 버전

cd "C:\Users\AppProjects\프로젝트 이름"
npm install
npm run build

npm i -D @capacitor/cli
npm i @capacitor/core @capacitor/android

npx cap init
npx cap add android
npx cap sync android
npx cap open android