この記事は、Ionic Advent Calendar 2018の6日目の記事です。
拙い文章ではありますが、よろしくお願いします。
※初参加です！
はじめに
これまで私はIonicを使い、4つのアプリをリリースしてきました。
その際、以下のような問題にぶち当たりました。
- 1つ目のアプリはIonic2で開発をしたが、2つ目はIonic2では使用できないpluginが必要
- 1つ目のアプリを保守するため、Ionic2の環境は残しながらIonic3の環境が必要
現在はIonic3を使って開発している方が多いと思いますが、まもなくIonic4が公式リリースされます。
Ionic3の環境を残しつつ、Ionic4ではどのように動くのか…検証したくありませんか？？
今回、dockerを使って複数のバージョンを用意する方法を紹介させていただきます。
独学であるため一部誤りがあるかもしれませんが、その場合はコメントにて指摘していただけると幸いです。
環境について
おそらく、ほとんどのionic開発者はMacOSを使用しているのではないでしょうか？
私もMacOSは1台所持していますが、超低スペックでとてもじゃないが開発できる端末ではありません。
iOSアプリを申請するためだけのものと成り果てています。
- Windows10(Ionic2がインストールされている。そこそこ高性能)
- CentOS(dockerがインストールされている。VMだが中性能)
- MacOS(5年前のMac mini、とてもじゃないが開発には使えない低性能)
今回、CentOSのdockerにionic 4.5.0のコンテナを作成し、そこでの開発を行います。
※dockerの詳細、環境構築については省略
※Macでも同様の手番で確認できると思います
使用するイメージについて
こちらのDocker Hubからionicのイメージを探します。
https://hub.docker.com/
URLから、「docker」と検索すると、「beevelop/ionic」が見つかります。
今回、v4.5.0のタグを使用します。
※新しいバージョンのionicがリリースされると、こちらもすぐに更新されると思われます。
コンテナの作成
Docker Hubに記載されている手番を参考に、以下のように作成します。
pull(イメージダウンロード)
# docker pull beevelop/ionic:v4.5.0
v4.5.0: Pulling from beevelop/ionic
...(省略)
Status: Downloaded newer image for beevelop/ionic:v4.5.0
ダウンロードしたイメージの一覧
# docker images
REPOSITORY TAG IMAGE ID CREATED VIRTUAL SIZE
beevelop/ionic v4.5.0 f04dc326cce5 29 hours ago 3.084 GB
beevelop/ionic latest 5b83097cb83f 10 months ago 3.04 GB
※latestは、現在使用しているv3.19.1の環境です。
コンテナの起動
# docker run -p 8100:8100 -v /home/share:/mnt -it beevelop/ionic:v4.5.0 bash
root@ff1f65cfb4ff:/tmp#
※このコマンドで、以下のことを行っています。
- ローカル(Linux)のPort8100に、コンテナのPort8100にマッピング
- ローカル(Linux)の/home/shareをコンテナの/mntにマウント
- 先ほどpullしたbeevelop/ionicのv4.5.0を使用して、bashコマンドを実行して起動
Ionicのバージョン確認
root@ff1f65cfb4ff:/tmp# ionic info
[WARN] You are not in an Ionic project directory. Project context may be missing.
Ionic:
ionic (Ionic CLI) : 4.5.0
System:
NodeJS : v8.9.4
npm : 5.6.0
OS : Linux 2.6
Ionicのプロジェクト作成
root@ff1f65cfb4ff:/tmp# ionic start myApp tabs
[INFO] You are about to create an Ionic 3 app. Would you like to try Ionic 4 (beta)?
Ionic 4 uses the power of the modern Web and embraces the Angular CLI and Angular Router to bring you the best
version of Ionic ever. See our blog announcement[1] and documentation[2] for more information. We'd love to hear
your feedback on our latest version!
[1]: https://blog.ionicframework.com/announcing-ionic-4-beta/
[2]: https://beta.ionicframework.com/docs/
? Try Ionic 4? Yes
? Preparing directory ./myApp - done!
? Downloading and extracting tabs starter - done!
Installing dependencies may take several minutes.
? IONIC DEVAPP ?
Speed up development with the Ionic DevApp, our fast, on-device testing mobile app
- ? Test on iOS and Android without Native SDKs
- ? LiveReload for instant style and JS updates
--> Install DevApp: https://bit.ly/ionic-dev-app <--
-----------------------------------------------------------
> npm i
npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, flatted is its successor.
> node-sass@4.9.3 install /tmp/myApp/node_modules/node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.3/linux-x64-57_binding.node
Download complete ] - :
Binary saved to /tmp/myApp/node_modules/node-sass/vendor/linux-x64-57/binding.node
Caching binary to /root/.npm/node-sass/4.9.3/linux-x64-57_binding.node
> node-sass@4.9.3 postinstall /tmp/myApp/node_modules/node-sass
> node scripts/build.js
Binary found at /tmp/myApp/node_modules/node-sass/vendor/linux-x64-57/binding.node
Testing binary
Binary is fine
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 1103 packages in 100.324s
> git init
Initialized empty Git repository in /tmp/myApp/.git/
?･ IONIC APPFLOW ?･
Supercharge your Ionic development with the Ionic Appflow SDK
- ?? Track runtime errors in real-time, back to your original TypeScript
- ?ｲ Push remote updates and skip the app store queue
Learn more about Ionic Appflow: https://ionicframework.com/appflow
-----------------------------------------------------------
? Install the free Ionic Appflow SDK and connect your app? No
> git add -A
> git commit -m "Initial commit" --no-gpg-sign
*** Please tell me who you are.
Run
git config --global user.email "you@example.com"
git config --global user.name "Your Name"
to set your account's default identity.
Omit --global to set the identity only in this repository.
fatal: unable to auto-detect email address (got 'root@ff1f65cfb4ff.(none)')
[WARN] Error encountered during commit. Disabling further git operations.
[INFO] Next Steps:
- Go to your newly created project: cd ./myApp
- Get Ionic DevApp for easy device testing: https://bit.ly/ionic-dev-app
root@ff1f65cfb4ff:/tmp# cd myApp/
root@ff1f65cfb4ff:/tmp/myApp# ls
angular.json e2e ionic.config.json node_modules package-lock.json package.json src tsconfig.json tslint.json
root@ff1f65cfb4ff:/tmp/myApp# ionic serve
> ng run app:serve --host=0.0.0.0 --port=8100
[INFO] Waiting for connectivity with ng...
[INFO] Development server running!
Local: http://localhost:8100
External: http://172.17.0.5:8100
DevApp: myApp@8100 on ff1f65cfb4ff
Use Ctrl+C to quit this process
[INFO] Browser window opened to http://localhost:8100!
[ng]
[ng] Date: 2018-12-04T01:21:57.446Z
[ng] Hash: 7369d1ce72912a2e3e68
[ng] Time: 52522ms
[ng] chunk {common} common.js, common.js.map (common) 6.24 kB [rendered]
...(省略)
[ng] ? ｢wdm｣: Compiled successfully.
※ブラウザで http://Linux:8100/ に接続すると、画面が確認できる！！
あとはIonic3で作成したソースをコピーして動作確認するなど、色々試せるかと思います。
さいごに
- Macではないので、iOSのビルドはXCodeの起動でエラーが発生します。
ビルドは通っているはずなので、platforms/ios 配下をMacに持っていけば、iOSでも実機確認可能です。 - 今回の記事は、以前書いた dockerを使用したionic開発について と一部内容がかぶっています。お時間があれば、こちらも確認してみてください。
- どのような環境で開発しているのか気になるので、コメントにて環境を教えていただけると助かります。