nuxt 프로젝트를 apache cordova로 빌드하기 (windows 10에서)

Apache Cordova 소개

apache cordova는 웹을 그대로 android나 ios에서 사용할 수 있도록 하이브리드 앱을 만들어주는 opensource mobile development framework이다.

한국어 문서도 이미 제공되고 있다.

https://cordova.apache.org/docs/ko/9.x/guide/overview/index.html

nuxt로 만든 프로젝트도 마찬가지로 apache cordova를 통해 하이브리드 앱을 만들 수 있다.

이미 nuxt로 만든 프로젝트가 있다는 전제 조건하에 cordova로 빌드하기 위한 설정을 진행한다.

ios의 경우 맥북이 있어야 하기 때문에 android 기준으로 설명을 진행한다.

하지만 명령어만 조금 다르게 수행할 뿐 나머지는 동일하다.

android app 개발 환경 구성하기

현재 안드로이드 앱 개발을 하려면 다음 환경 구성이 필요하다.

• java 8
  • java 8을 설치한 후 JAVA_HOME 변수를 설정해준다.
• gradle
  • https://gradle.org/install/
  • gradle을 원하는 위치에 압축을 푼 후 path에 해당 path를 추가해준다.
• android studio
• https://developer.android.com/studio
• 설치한 후 ANDROID_SDK_ROOT 환경 변수를 설정해준다.
• android studio를 실행한 후 Tools -> Avd Manager에서 Create Virtual Device로 모바일 device를 추가한다.
  • 이때 만약 HAXM installer 설치를 진행해야 하는데 설치가 되지 않는 경우 windows 기능 켜기/끄기에서 hyper-v 기능을 꺼야 한다.

 

여기까지 진행하면 일단 android 에뮬을 돌릴 수 있는 환경 구성이 되었다.

Cordova 설치하기

이미 nuxt를 사용하고 있는 경우 nodejs를 설치한 상태이고 npm 명령어를 사용할 수 있다.

https://cordova.apache.org/docs/ko/9.x/guide/cli/index.html

npm update -g
npm install -g cordova

이제 cordova를 사용할 준비가 되었다.

기존 Nuxt 프로젝트에 Cordova 설정하기

기존 Nuxt 프로젝트에 cordova라는 폴더를 하나 생성한 후 해당 폴더 내에서 하이브리드 앱용 빌드가 실행된다.

nuxt 프로젝트의 dist 폴더에 빌드된 nuxt 결과물이 저장되는데 이를 다시 cordova 폴더의 www 폴더로 복사해서 빌드하는 방식이다.

이를 위해 다음과 같은 설정이 추가되어야 한다.

우선 nuxt.config.js에 추가되어야 하는 설정들이다.

mode : "spa"  // universal 설정을 지원하지 않음
Head: {
	script: [{ src: "cordova.js" }]
},
router: { mode: 'hash' },
build : {
	publicPath: '/nuxtfiles/'
}

package.json에 추가되어야 하는 설정은 다음과 같다.

"scripts" :{ 
  "cordova-ios": "npm run build-spa && npm run replace-relative-paths && npm run copy-cordova && npm run run-ios;",
  "cordova-android": "npm run build-spa && npm run replace-relative-paths && npm run copy-cordova && npm run run-android;",
  "build-spa": "nuxt build --spa",
  "replace-relative-paths": "replace '/nuxtfiles/' 'nuxtfiles/' dist --recursive && replace '/assets/' 'nuxtfiles/' dist --recursive && replace '(href|src|\"href\"|\"src\")=\"/' '$1=\"../' dist --recursive && replace '(href|src|\"href\"|\"src\"):\"/' '$1:\"../' dist --recursive",
  "copy-cordova": "cp -R dist/* cordova/www/",
  "clear-cordova": "rm -R cordova/www/*",
  "run-ios": "cd cordova && cordova run ios --buildFlag='-UseModernBuildSystem=0' --target='iPhone-X, 12.2'",
  "run-android": "cd cordova && cordova run android"
},
"devDependencies": { "replace": "^1.1.1" }

 설정이 추가된 후 npm을 다시 install 해준다.

npm install

추가된 replace dependency가 적용된 후 다음처럼 명령어를 수행하면 된다.

npm run cordova-android

그런데 위 설정된 script의 명령어가 linux 기반 쉘 스크립트이기 때문에 windows에서 수행 시 에러가 발생한다.

windows 10의 경우 다음 설정을 진행하여 bash 쉘을 사용할 수 있다.

windows 10 bash 쉘 사용 설정하기

우선 windows 기능 켜기/끄기 메뉴에서 'Linux용 Windows 하위 시스템' 기능을 켠다.

이후 Microsoft Store에서 Ubuntu를 설치한다.

설치된 Ubuntu를 실행하면 초기 user/password를 설정한 후 bash를 사용할 수 있게 된다.

이후 cmd 창에서 bash라는 명령어를 치면 해당 위치에서 bash 쉘로 전환이 된다.

우분투로 접근한 것이기 때문에 해당 bash 쉘에서 npm명령어를 쓰려면 nodejs를 다시 설치해야 한다.

apt-get install nodejs

해당 쉘에서는 windows 10에서 실행할 수 없는 쉘 스크립트가 포함된 단계를 수행하면 된다.

npm run replace-relative-paths