Web IDE cloud9에서 스마트폰 앱 개발 using React

대부분의 소원은 cloud9로 해결하는 것이 아닐까 생각하는 오늘 요즘 오랜만에 Monaca 을 만져 보면 Monaca CLI 되는 것이 공개되고 있었습니다.

무려 이것을 이용하는 것으로 React에서의 스마트폰 앱 개발을 할 수 있다는 것이었습니다. 라고 하는 것으로 상세를 보면, Windows와 Mac 대응이라고 있었습니다. 다만, 자신의 PC에 여러가지 인스톨 하는 것을 그다지 좋아하지 않았기 때문에, cloud9로 할 수 없을까-라고 보고 있었던 곳. . .

command

npm install -g monaca

뭔가 리눅스에서도 보통으로 움직일 것 같습니다!
그래서 이번 Monaca CLI를 사용하여 cloud9에 스마트 폰 앱 개발 환경을 구축해 보았습니다.

계속하기 전에 cloud9 계정을 얻고 Workspace를 작성하십시오. 또, 이번은 Monaca 를 이용하기 위해, 이쪽도 계정을 작성해 두어 주세요.
※Workspace의 설명은 cloud9 환경에서 React 검증① - 도입- 하지만 참고해 보세요.

1. Monaca CLI 설치

cloud9의 Terminal에서 커맨드 한발!

command

npm install -g monaca

2. 프로젝트 생성

아래 명령으로 프로젝트를 만듭니다!
※「react-sample」은 프로젝트의 디렉토리명이 됩니다

command

monaca create react-sample

어떤 프레임워크에서 개발할지 듣기 때문에,
Onsen UI and React를 선택합니다.
템플릿의 종류를 듣기 때문에,
Onsen UI V2 Tabbar를 선택합니다.
※여기는 좋아하는 것으로 좋지만, React라고 명명했기 때문에 React로 했습니다.

3. 브라우저 확인

프로젝트 폴더로 이동하여 미리보기 명령을 치십시오.
cloud9에서 사용할 수 있는 포트 은 8080, 8081, 8082의 3종류이므로,
여기서는 preview 명령을 실행할 때 선택적으로 포트를 지정합니다.

command

cd /home/ubuntu/workspace/react-sample/
monaca preview -p 8080

"HTTP server available on"이 표시되면 빌드하고 "webpack dev server"가 시작됩니다.

여기서 ぇtp://127.0.0.1:8080에 액세스라고 쓰여졌지만이 URL에서는 확인할 수 없습니다.
브라우저에서 확인하려면 https://[cloud9 workspace name]-[cloud9 username].c9users.io:8080/webpack-dev-server/를 방문하십시오.

사용자명이나 Workspace명을 모르는 분은, IDE의 URL로부터 판단해 주세요.



페이지에 액세스하고 아래 그림과 같이 표시되면 성공입니다!



시도에 "/home/ubuntu/workspace/react-sample/src/HomePage.jsx"를 수정해 봅시다.
※「Home Page」에서 「Hello World」로 변경



파일을 저장할 때 빌드가 실행되고 웹 화면이 변경됩니다.

4. Android 앱 디버그 빌드

로그인하고 빌드합니다! 단 3줄

cloud9

cd /home/ubuntu/workspace/react-sample/
monaca login
monaca remote build android --build-type=debug

우선 Monaca 계정으로 로그인.


다음 빌드! 완료되면 "/home/ubuntu/workspace/react-sample/build/"아래에 apk 파일이 출력됩니다!



이것을 스마트 폰에 두드려 종료!

5. 후기

아직 전혀 접하고 있지 않지만 상당히 편리한 것 같습니다. cloud9에 설치해 버리면 프로젝트 공유도 즐거울 것 같고 좋은 느낌입니다.
추가하고 싶은 패키지가 있으면 npm 커맨드로 추가하면 좋을 것 같고, 개인 이용이라면 Monaca의 무료 플랜으로 전혀 갈 수 있지요!

단지, Monaca의 특징인 Monaca 디버거를 사용할 수 없을 것 같아? 느낌입니다.
이쪽은 나중에 조사해 보고 싶습니다. 아는 사람이라면 가르쳐 (ry

6. 참고

설치 참고
htps : // / cs. 모나카. 이오/쟈/마누아l/에서
monaca 명령에 대해서는 여기에서
htps : // / cs. 모나카. 이오 / 자 / 마누아 l /에서 ゔ ぉ p 면 t / 모나카 _ c ぃ /