dockerを使った、Ionic複数バージョンの環境について

この記事は、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(イメージダウンロード)

```console
# docker pull beevelop/ionic:v4.5.0
v4.5.0: Pulling from beevelop/ionic
...(省略)
Status: Downloaded newer image for beevelop/ionic:v4.5.0
```

ダウンロードしたイメージの一覧

```console
# 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の環境です。

コンテナの起動

```console
# 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のバージョン確認
```console
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のプロジェクト作成
```console
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開発について](https://qiita.com/S_F_/items/539bede7e4fc41c4f544) と一部内容がかぶっています。お時間があれば、こちらも確認してみてください。
* どのような環境で開発しているのか気になるので、コメントにて環境を教えていただけると助かります。