Windows10 + Docker でionic環境を作る

#はじめに
Windows10にDocker for Windowsをインストールしてionic用コンテナを作成した際の覚書き。
気軽にDocker、ionicに触れてみたい方には参考になるかと。

#前提
- Windows10
- Git (version 2.10.1.windows.1)
- Docker for Windows (Vesion 1.12.3-beta29.3)
- Network Interface(ipconfigで確認)
  - IF1 : 192.168.200.185

なお執筆時点(2016年11月)では、Windows10はHyper-Vが動かせる環境かつ、Dockerはbeta版じゃないと正常に稼働しないようです。
またコンテナのイメージをプルする際にGitが必要となるので、事前に導入しておいて下さい。
http://qiita.com/taipon_rock/items/632c117220e57d555099

#構築手順

大まかな流れとしては、Hyper-V有効化 -> Docker for Windows インストール -> コンテナ作成 、となります。

##Hyper-V有効化

Docker for Windowsを使うため、Hyper-Vの機能を有効化します。

___1.BIOSの設定___
BIOSでHyper-V関連の機能を有効化します。端末によって設定の仕方が変わると思いますが、筆者のPC(HP EliteBook)では
「Virtualization Technology(VTx)」と「Virtualization Technology for Directed I/O(VTd)」を有効化する必要がありました。

___2.Windowsの機能の有効化___
コントロールパネル -> プログラムと機能 -> windowsの機能の有効化または無効化、において「Hyper-V」にチェックをつけます。

![キャプチャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/148705/bfb2e5d7-c3df-4ff8-a3b9-919fedffbe45.jpeg)

##Docker for Windows インストール

Docker for Windows をインストールします。
Beta版を導入するのでセットアップファイルは下記サイトより入手しました。

https://stefanscherer.github.io/run-linux-and-windows-containers-on-windows-10/

___1.インストール___

セットアップファイル「InstallDocker.msi」を実行。

![image](https://qiita-image-store.s3.amazonaws.com/0/148705/a27058b9-bb2d-6104-37ef-b8bff893b9e3.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/148705/e87e2885-b7e1-1a29-1a95-619732b3738d.png)

しばらくするとDockerが起動する。

![image](https://qiita-image-store.s3.amazonaws.com/0/148705/906f584c-e9c5-c98b-99c5-50598541a028.png)

___2.動作確認___

PowerShellでdockerがインストールされていることを確認

    # docker --version
    Docker version 1.12.3, build 6b644ec, experimental

PowerShellでネットワークインタフェースに「192.168.99.1」と「10.0.75.1」が追加されていることを確認

    # ipconfig /all
    ～
    イーサネット アダプター vEthernet (DockerNAT):
    
    接続固有の DNS サフィックス . . . . .:
    説明. . . . . . . . . . . . . . . . .: Hyper-V Virtual Ethernet Adapter #3
    物理アドレス. . . . . . . . . . . . .: 00-15-5D-4B-01-04
    DHCP 有効 . . . . . . . . . . . . . .: いいえ
    自動構成有効. . . . . . . . . . . . .: はい
    リンクローカル IPv6 アドレス. . . . .: fe80::91a9:3b84:1934:9464%8(優先)
    IPv4 アドレス . . . . . . . . . . . .: 10.0.75.1(優先)
    サブネット マスク . . . . . . . . . .: 255.255.255.0
    ～
    イーサネット アダプター vEthernet (DummyDesperatePoitras):
    
      接続固有の DNS サフィックス . . . . .:
      説明. . . . . . . . . . . . . . . . .: Hyper-V Virtual Ethernet Adapter #2
      物理アドレス. . . . . . . . . . . . .: 00-15-5D-4B-01-03
      DHCP 有効 . . . . . . . . . . . . . .: はい
      自動構成有効. . . . . . . . . . . . .: はい
      リンクローカル IPv6 アドレス. . . . .: fe80::34ae:c631:8178:81ae%4(優先)
      IPv4 アドレス . . . . . . . . . . . .: 192.168.99.1(優先)
      サブネット マスク . . . . . . . . . .: 255.255.255.0
    ～

Hyper-Vマネージャで仮想マシン「MobyLinuxVM」が作成されていることを確認。
(IPは10.0.75.2)

![image](https://qiita-image-store.s3.amazonaws.com/0/148705/121d823b-f8ee-711c-5748-b9ecf5f1b508.png)

##コンテナ作成

___1.ionicコンテナ起動___

ionicコンテナのイメージを取得

    # docker pull beevelop/ionic:latest

イメージが取得されていることを確認

    # docker images
    REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
    beevelop/ionic      latest              c3ec50fd11fe        18 hours ago        3.336 GB

ionicコンテナを起動

    # docker run -it --rm beevelop/ionic
    root@8592dde1ee04:/tmp $

ionicコンテナが起動する。「-i」オプション(Interactive)を付与しているのでコンテナにアタッチされる。
(以降ionicコンテナのプロンプトは「$」と表記)

ionicコンテナにアタッチできたので、ユーザ、ホスト名、OSを確認

    $ id
    uid=0(root) gid=0(root) groups=0(root)

    $ uname
    Linux

    $ uname -n
    0f8e2f65b418

    $ ip addr show
    1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1
      link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
      inet 127.0.0.1/8 scope host lo
      valid_lft forever preferred_lft forever
      inet6 ::1/128 scope host
      valid_lft forever preferred_lft forever
    2: tunl0@NONE: <NOARP> mtu 1480 qdisc noop state DOWN group default qlen 1
      link/ipip 0.0.0.0 brd 0.0.0.0
    3: gre0@NONE: <NOARP> mtu 1476 qdisc noop state DOWN group default qlen 1
      link/gre 0.0.0.0 brd 0.0.0.0
    4: gretap0@NONE: <BROADCAST,MULTICAST> mtu 1462 qdisc noop state DOWN group default qlen 1000
      link/ether 00:00:00:00:00:00 brd ff:ff:ff:ff:ff:ff
    5: ip_vti0@NONE: <NOARP> mtu 1428 qdisc noop state DOWN group default qlen 1
      link/ipip 0.0.0.0 brd 0.0.0.0
    6: ip6_vti0@NONE: <NOARP> mtu 1500 qdisc noop state DOWN group default qlen 1
      link/tunnel6 :: brd ::
    7: sit0@NONE: <NOARP> mtu 1480 qdisc noop state DOWN group default qlen 1
      link/sit 0.0.0.0 brd 0.0.0.0
    8: ip6tnl0@NONE: <NOARP> mtu 1452 qdisc noop state DOWN group default qlen 1
      link/tunnel6 :: brd ::
    9: ip6gre0@NONE: <NOARP> mtu 1448 qdisc noop state DOWN group default qlen 1
      link/gre6 00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00 brd 00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00
    20: eth0@if21: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc noqueue state UP group default
      link/ether 02:42:ac:11:00:02 brd ff:ff:ff:ff:ff:ff link-netnsid 0
      inet 172.17.0.2/16 scope global eth0
      valid_lft forever preferred_lft forever
      inet6 fe80::42:acff:fe11:2/64 scope link
      valid_lft forever preferred_lft forever

ホスト名「0f8e2f65b418」のLinuxにrootユーザでログインしている状態。
またネットワークインタフェースとしてlocalhostと172.17.0.2が存在する。

肝心のionicのバージョンを確認

    $ ionic -v
    2.1.4

2.1.4がインストールされている。

ただし現時点ではionicコンテナに外部からアクセスできないため、WEBサービスを起動してもサイトを参照できません。(ionicコンテナのIP「172.17.0.2」にどこからも通信が疎通しない)

一度exitでコンテナから抜けます。

    $ exit
    #  <- プロンプトが自端末のPowerShellに変わる

ionicコンテナからデタッチされ、プロンプトが自端末のPowerShell(#)に変わる。

___2.動作確認___

ionicコンテナで起動するWEBサービスにアクセスするため、コンテナ起動の際にポートフォワードを指定します。

    # docker run -it -p 1080:8100 --rm beevelop/ionic

これで自端末(localhost)の1080ポートにアクセスするとionicコンテナの8100ポートにアクセスできるようになります。試しにionicコンテナでテストプロジェクトを起動し、自端末のブラウザで参照できるか試してみます。

    $ cd /tmp
    $ ionic start todo blank
    (todoプロジェクトがダウンロードされます)
    $ cd /tmp/todo
    $ ionic serve --port 8100

    --------------------------------
    ******************************************************
     Dependency warning - for the CLI to run correctly,
     it is highly recommended to install/upgrade the following:
    
     Please install your Cordova CLI to version  >=4.2.0 `npm install -g cordova`
    
    ******************************************************
    
    Multiple addresses available.
    Please select which address to use by entering its number from the list below:
     1) 172.17.0.2 (eth0)
     2) localhost
    Address Selection: 1
    Selected address: 172.17.0.2
    Running live reload server: http://172.17.0.2:35729
    Watching: www/**/*, !www/lib/**/*, !www/**/*.map
     Running dev server:  http://172.17.0.2:8100
    Ionic server commands, enter:
      restart or r to restart the client app from the root
      goto or g and a url to have the app navigate to the given url
      consolelogs or c to enable/disable console log output
      serverlogs or s to enable/disable server log output
      quit or q to shutdown the server and exit
    ionic $

自端末のブラウザで「http://localhost:1080/」を参照します。

![image](https://qiita-image-store.s3.amazonaws.com/0/148705/de74cf7a-5633-45e7-fe8d-3a9427252309.png)

正常にionicテストプロジェクトが参照できます。

##ローカルファイルシステム利用

ionicコンテナを作成し、テストプロジェクトを導入しても、ionicコンテナを停止したら導入したプロジェクトは全て消えてしまいます。コンテナで利用するファイルを永続化するため、自端末(windows10)のファイルシステムをコンテナから読み書きできるよう設定します。

___1.Docker設定変更___

システムトレイのDockerアイコンを右クリックし「Settings」を押下。
Cドライブにチェックを入れ「Apply」を押下。
(環境によってはこのタイミングでwindowsアカウントへの認証を求められます)

![image](https://qiita-image-store.s3.amazonaws.com/0/148705/60df7be4-e871-85dd-1d6d-fa7014ae3b30.png)

___2.ionicコンテナ起動___

ionicコンテナで自端末のファイルシステムにアクセスするため、コンテナ起動の際にマウント元(自端末のパス)とマウント先(ionicコンテナのパス)を指定します。

    # docker run -v /c/tmp/test:/tmp/test -p 1080:8100 -it --rm beevelop/ionic

これで、自端末(Windows10)の「C:\tmp\test」とionicコンテナの「/tmp/test」が紐づいた状態となり、ionicコンテナから自端末の「C:\tmp\test」に対して読み書きが可能な状態となります。なお自端末の「C:\tmp\test」には「test.txt」が存在している状態です。

![image](https://qiita-image-store.s3.amazonaws.com/0/148705/905c68c8-2a90-d13c-1cd1-97fb05b9a1ed.png)

ionicコンテナで「/tmp/test」を参照してみます。

    $ ls -l /tmp/test
    total 0
    -rwxr-xr-x 1 root root 0 Nov 11  2016 test.txt

自端末の「C:\tmp\test」にある「test.txt」が参照できます。
試しに該当パスにテストプロジェクトを作ってみます。

    $ cd /tmp/test
    $ ionic start todo blank
    (todoプロジェクトがダウンロードされます)

自端末の「C:\tmp\test」を確認するとtodoプロジェクトが作成されています。

![image](https://qiita-image-store.s3.amazonaws.com/0/148705/601551b7-fb87-f5fb-020a-cbb7572d8060.png)

プロジェクトが自端末のファイルシステムに在る状態でionicを起動します。

    $ cd /tmp/test/todo
    $ ionic serve --port 8100

![image](https://qiita-image-store.s3.amazonaws.com/0/148705/de74cf7a-5633-45e7-fe8d-3a9427252309.png)

問題なくプロジェクトが参照できます
ionicコンテナを停止しても自端末に保存されたプロジェクト(C:\tmp\test\todo)は消えないので、次回起動時はプロジェクトを作成することなく起動できます。

#終わりに
Windows端末で簡単にionic環境を作れるので非常に便利なのですが、個人的にはコンテナのホストVMとなる「MobyLinuxVM」にsshで接続して、teratermから作業できるようになってほしいです。(PowerShellが嫌いです...)