クラウドIDEでionic開発環境を構築してみよう

前文

ほぼ趣味と化しているJSフロントエンドのフレームワーク探し(自分探し)ですが、ionic3/Angular4を確認してみるためにクラウド開発環境を構築できるか試した時のメモです。

クラウドIDEに固執する理由は、わたくし一つのPCを使い回すタイプではない(仕事用PC、家用PC、Chromebookがそれぞれ別、しかもすべて貧弱なプロセッサ)ということがあります。なのでそれぞれのPCで環境構築・維持する手間とバージョン不整合何たらみたいな沼にハマりたくないので基本的に今後もクラウドIDEメインで開発したいと考えていたのですが、monacaのクラウドIDEは現時点でionic2+に対応していない(TS変換が必要だから??)のでいったん monaca から離れて環境構築してみました。

手順

codeanywareにサインアップ

https://codeanywhere.com/

codeanywareからHTML5コンテナで新規connectionを作成する

これでインスタンスが作成されます。ブラウザ上でSSH接続画面が開くのでここから環境構築コマンドを打っていきます。
スクリーンショット 2017-09-19 12.19.18.png

node.jsのバージョンアップ

nvm install 8.5
nvm alias default v8.5.0

デフォルトではnode.jsがver4.4でionicが動かなかったのでとりあえず最新版をインストールし、defaultに指定します。

cordova/ionicのインストール

npm install -g cordova ionic

ionicプロジェクトの生成

ionic start myApp

テンプレートどれにする?とかionicの共有サービス使うか?とか聞かれるので適当に入れる

アプリ起動

cd myApp
Ionic serve -b 

ブラウザで該当サーバーにアクセス、ポート8100です
(http://xxxxx.codeanyapp.com:8100 インスタンス右クリックの"info"でアドレスが分かります)

ここまでぐちゃぐちゃしながらもなんとかできました。

さてここから問題。Web only なアプリの場合これで何とか開発を回せるかと思うのですが、私は Cordova で Native API にアクセスするプラグインを使うことが多いため、基本的に実機デバッグが必須です。そういう用途の場合 monaca デバッガーは最強なので、そこだけローカルにインストールします。

Monaca localkit をローカルPCにインストール

コードのコピーとlocalkitでプロジェクト作成

・codeanywhere上のmyAppフォルダをzipで固めてローカルにコピー
・ローカルフォルダでzipを展開しMonaca localkit に読ませる
うん、何とか動いた。
ファイル_000.jpeg

上でcodeanyware上でフォルダをgoogle driveなどで連携させてローカルと連動されるようにしておけば、理論上はローカル環境にあまり依存しないionicクラウド開発環境ができそうです。ただしここらへんでローカルに全て開発環境作ったほうが早い気がしてきて、やっぱりonsen ui v2+angular1あたりでしばらくは良いかなと思いこのスキームは断念 orz

Native API にアクセスしない場合は問題は特にないのでご興味あるかたは参考にしてみてください。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.