はじめに
前回の記事でdockerを使用してionicの開発をすると言った手前、記事にせざる得ない…
前回の記事作成時点で、問題なく作れることを確認できていたのは内緒
なお、dockerはなんとなく適当に触ったことがある程度で、知識はありません。
今回はimageをダウンロードしてきて、コンテナを作って…という程度です。
もっといい方法がありましたら、教えていだだけると助かります。
開発環境
| プログラム | バージョン |
|---|---|
| CentOS | 6.7 |
| Docker | 1.7.1 |
| Samba | 3.6.23-35.el6_8 |
RHEL7のコマンド変更が許せず、CentOS6.7を使用しています。もちろん？VMです。
CPU2コア、メモリ2GBでDocker動かしても快適。
自端末(Windows7)からsshで接続し、以下の理由からSambaでファイル共有。
- Windows上からもソースを編集することがあるため(基本的にはvi)
- Android実機転送を楽にするため(後述)
※ここでは/home/share を共有し、Windows(自端末)からもファイル操作できるようにする。
環境構築手番
OS、Docker、Sambaのインストール手番は省略。
こちらについては、ググればたくさん情報が出てくると思います。
docker コンテナ作成
Docker Hubからどのイメージを使用するか調べます。
上部"Search"に"ionic"と入力すると、複数の候補が出てきます。
今回私は、執筆時点で一番上にある"beevelop/ionic"を使用しました。(バージョンは3.19.1)
クリックすると、"Repo Info"に使い方が記載されているので、実際にやってみましょう。
docker pull beevelop/ionic:latest
docker build -t beevelop/ionic github.com/beevelop/docker-ionic
これでイメージのダウンロード＆最新化が完了です。(少し時間かかります)
次にダウンロードしたイメージを使ってコンテナを作成します。
この際、私はコマンドを少し変更してオプションを追加しました。
docker run -v /home/share:/mnt -p 8100:8100 -it beevelop/ionic bash
増えたのは-v と-p
-vでコンテナの/mntに/home/shareをマウント ※上記Sambaの設定に合わせてください
-pでコンテナの8100ポートをホスト(CentOS)の8100ポートにマッピング ※8100はionic serveを行った時のポート番号
コマンドを実行し、エラーが表示されることなくコンテナに接続できていれば、成功です。
その後proxy設定やvimのインストールを行ったけど、こちらは省略します
試してみたこと
これで環境は構築できました。
あとは適当にionicを触ってみましょう。
# ionic info
cli packages: (/opt/node/lib/node_modules)
@ionic/cli-plugin-proxy : 1.5.7
@ionic/cli-utils : 1.19.1
ionic (Ionic CLI) : 3.19.1
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
@ionic/app-scripts : 3.1.8
Cordova Platforms : android 7.0.0 ios 4.5.4
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 25.2.5
Node : v8.9.4
npm : 5.6.0
OS : Linux 2.6
Environment Variables:
ANDROID_HOME : /opt/android
HTTP_PROXY : not set
http_proxy : http://xxxxxx
HTTPS_PROXY : not set
https_proxy : http://xxxxx
IONIC_HTTP_PROXY : not set
PROXY : not set
proxy : not set
Misc:
backend : pro
# ionic start AppName
# cd AppName
# ionic serve
→自端末から http://<ホストのIP>:8100/ に接続すると、ionicの画面が表示できる
※通常とは違い、ソースファイルを更新しても自動的にはブラウザは更新されない
実機転送
# ionic cordova build android
(中略)
BUILD SUCCESSFUL
Total time: 34.425 secs
Built the following apk(s):
/mnt/AppName/platforms/android/build/outputs/apk/android-debug.apk
→apkファイルが作成されたので実機に転送したい。
この時、ルートフォルダ(上記で言う/mnt/AppName)に以下のようなファイルを作成し、自端末(Windows)で実行する。
※adbにPATHが通っているものとする
@echo off
adb install -r platforms\android\build\outputs\apk\android-debug.apk
adb shell am start -n io.ionic.starter/.MainActivity
echo %date% %time%
最後に実行時刻を表示しているのは、実機に転送したかをよく忘れるため
ビルドと実機転送でターミナルが異なる(ssh接続とコマンドプロンプト)ので若干混乱することはあるが、簡単にビルド＆実機転送を行うことができた。
感想
- よくわかっていなくてもdockerは苦労することなく使うことができた。
- しかし、一度コンテナを作成すると、マウントし直したりポートマッピングの設定を変えたりすることができないのは面倒だと思った。
- ポートマッピングをしなかった場合、TeraTermのSSHポート転送機能で同様のことを実現することは可能。(TeraTermを起動する度に必要)
- マウントしなかった場合、ビルドする度にファイルをホスト(CentOS)にコピーする必要がある。もちろん自端末(Windows)からのファイル編集は不可。(コンテナからのマウントはできない？)
- vimでソースファイルを編集したが、特に問題なし。viに慣れていない人はストレスを感じると思うので、自端末(Windows)から編集しましょう。
- 前回はionic2、今回はionic3を使用したが、気をつける点は特になかったように思う。
今後について
おそらく、今後はVisual Studioは捨ててdockerを使った開発を行うと思う。
重いIDEはメリット以上にストレスを感じるので…
次はionic2ではどうしてもクリアできなかったFCMを使ったPush通知を行う予定です。
もし、最新のionicでもできなかった場合は、ionicのslackで聞いてみることにします…
サーバから、アプリをインストールした全ての端末へのPush通知、端末間のPush通知ができたらいいなぁ…
⇒ionic2ではできなかったPush通知が、ionic3では問題なく動作することを確認できた。
記事を書くこともできるが、既に多くの情報が出ているので、特に不要？