LoginSignup
18

More than 5 years have passed since last update.

Dockerで開発環境をつくる - IonicとCordovaとAndroid SDKをインストール

Last updated at Posted at 2014-12-30

MBaaSを調査しているところですがCordovaをベースにしてIonicOnsen UISupersonicをつかったHTML5ハイブリッドモバイルアプリを作ってみようと思います。開発環境はなるべくクラウド上のDockerコンテナで行いたいです。DockerコンテナにAndroid SDKはヘッドレスでインストールしてIonicの開発環境を構築します。ローカルのサーバーを起動することでリモートからブラウザでプレビューができるようになります。

Dockerfile

今回作成したDockerイメージは、masato/ionic-cordovaにpushしています。GitHubのリポジトリはここです。開発環境用のDockerイメージはphusion/baseimageをベースにしています。

~/docker_apps/ionic-cordova/Dockerfile
FROM phusion/baseimage:0.9.15
MAINTAINER Masato Shimizu <ma6ato@gmail.com>

# Set correct environment variables.
ENV HOME /root

# Regenerate SSH host keys.
RUN /etc/my_init.d/00_regen_ssh_host_keys.sh

## Enabling the insecure key permanently
RUN /usr/sbin/enable_insecure_key

## oracle-java8
RUN add-apt-repository ppa:webupd8team/java && \
    echo oracle-java7-installer shared/accepted-oracle-license-v1-1 select true | /usr/bin/debconf-set-selections

## apt-get update
RUN apt-get update && \
    DEBIAN_FRONTEND=noninteractive \
    apt-get install -y build-essential software-properties-common \
                       python emacs24-nox emacs24-el \
                       git byobu wget curl unzip tree elinks \
                       oracle-java7-installer oracle-java7-set-default ant \
                       lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6
ENV JAVA_HOME /usr/lib/jvm/java-7-oracle

## Japanese Environment
ENV LANG ja_JP.UTF-8
RUN locale-gen $LANG && update-locale $LANG && \
    ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime

## Development Environment
RUN update-alternatives --set editor /usr/bin/vim.basic

ENV USERNAME docker
ENV HOME /home/${USERNAME}
ENV PATH $PATH:${HOME}/bin

# Add Un-Root User
RUN useradd -m -d ${HOME} -s /bin/bash ${USERNAME} && \
    echo "${USERNAME}:${USERNAME}" | chpasswd && \
    mkdir ${HOME}/.ssh ${HOME}/tmp && \
    chmod 700 ${HOME}/.ssh && \
    cp /root/.ssh/authorized_keys ${HOME}/.ssh && \
    chmod 600 ${HOME}/.ssh/authorized_keys && \
    chown -R ${USERNAME}:${USERNAME} ${HOME}/.ssh && \
    echo "export LANG=ja_JP.UTF-8" >> ${HOME}/.profile && \
    echo "docker ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers

ENV USERNAME docker
ENV HOME /home/${USERNAME}
WORKDIR /data
ENV DATA_DIR /data

ADD dotfiles ${HOME}
RUN mkdir -p /data && \
    chown -R ${USERNAME}:${USERNAME} ${HOME} ${DATA_DIR}

USER ${USERNAME}

## Cask
RUN curl -fsSkL https://raw.github.com/cask/cask/master/go | python && \
    echo export PATH='${HOME}/.cask/bin:$PATH' >> ${HOME}/.profile && \
    /bin/bash -c 'source ${HOME}/.profile && cd ${HOME}/.emacs.d && cask install'

## auto-java-complete
RUN cd ${HOME}/.emacs.d && \
    git clone https://github.com/emacs-java/auto-java-complete && \
    cd auto-java-complete && \
    javac Tags.java -encoding UTF-8 && \
    java -cp "/usr/lib/jvm/java-7-oracle/jre/lib/rt.jar:." Tags

## Android SDK
ENV ANDROID_SDK_VERSION r24.0.2
ENV ANDROID_API_LEVEL 19
ENV ANDROID_BUILD_TOOLS_VERSION 21.1.1
ENV ANDROID_HOME ${HOME}/android-sdk-linux

RUN echo 'export ANDROID_HOME=${ANDROID_HOME}' >> ${HOME}/.profile
ENV PATH ${PATH}:${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools
RUN echo 'export PATH=${PATH}:${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools' >> ${HOME}/.profile

RUN wget -qO- "http://dl.google.com/android/android-sdk_${ANDROID_SDK_VERSION}-linux.tgz" \
    | tar -zxv -C ${HOME} && \
    echo y | android update sdk --no-ui --all --filter platform-tool,android-${ANDROID_API_LEVEL},sysimg-${ANDROID_API_LEVEL},build-tools-${ANDROID_BUILD_TOOLS_VERSION}

ENV NODE_VERSION v0.10

## Node.js/Cordova/Ionic
RUN curl https://raw.githubusercontent.com/creationix/nvm/v0.22.0/install.sh | bash && \
    /bin/bash -c 'source ${HOME}/.nvm/nvm.sh && \
                  nvm install ${NODE_VERSION} && \
                  nvm use ${NODE_VERSION} && \
                  nvm alias default ${NODE_VERSION} && \
                  npm install -g npm && \
                  npm install -g cordova ionic && \
                  npm cache clear'

## Create Cordova and ionic sample apps
RUN /bin/bash -c 'source ${HOME}/.nvm/nvm.sh && nvm use ${NODE_VERSION} \
    cd ${DATA_DIR} && \
    cordova create cordova_test com.example.test "CordovaTestApp" && \
    cd ${DATA_DIR}/cordova_test && \
    cordova platform add android && \
    cordova build && \
    cd ${DATA_DIR} && \
    ionic start ionicTestApp tabs && \
    cd ${DATA_DIR}/ionicTestApp && \
    ionic platform add android && \
    ionic build android'

USER root
ENV HOME /root

VOLUME ["/data"]
EXPOSE 8100 35729

CMD ["/sbin/my_init"]
RUN apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

32bit版のライブラリ

IonicのインストールにはOracle JDK 7、Ant、Android SDK、Node.jsが必要です。今回のDockerコンテナはUbuntu 14.04の64bit版ですが、Androidが一部32bit版のライブラリに依存しているようです。Installing and setting up Android Developer Tools in Ubuntu 13.10を参考にして、lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6のライブラリをインストールします。

Android SDK

Android SDKはヘッドレスで使います。今回の設定は以下のフィルタしました。

android update sdk --no-ui --all --filter platform-tool,android-19,sysimg-19,build-tools-21.1.1

APIレベルはuses-sdkを参照にしてandroid-19を指定しました。Android 4.4(Kitkat)を対象にします。

Build Toolsのバージョンも SDK Build Tools Release Notesを参照して、最新の21.1.1を指定しています。

CordovaとIonic

CordoavとIonicはどちらもnpmでインストールするためNode.jsが必要です。nvmでv0.10.35をインストールします。そのあと確認のためCordovaとIonicのサンプルを/dataディレクトリに作成しました。

Dockerコンテナの起動

使い捨てのDockerコンテナを起動します。開発ユーザーのdockerにスイッチします。

$ docker run -it --rm masato/ionic-cordova /sbin/my_init bash
$ su - docker

Ionicのサンプルアプリのディレクトリに移動します。nvmを使いionic serveを実行してローカルにWebサーバーを起動します。

$ cd /data/ionicTestApp/
$ ionic serve

Multiple addresses available.
Please select which address to use by entering its number from the list below:
 1) 172.17.3.90 (eth0)
 2) localhost
Address Selection:  1
Selected address: 172.17.3.90
Running dev server: http://172.17.3.90:8100
Running live reload server: http://172.17.3.90:35729
Watching : [ 'www/**/*', '!www/lib/**/*' ]
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

DockerコンテナのIPアドレスを確認して、ngrokでトンネルします。

$ docker inspect --format="{{ .NetworkSettings.IPAddress }}" e0c6dac55a79
172.17.3.90
$ docker run -it --rm wizardapps/ngrok:latest ngrok 172.17.3.90:8100

ブラウザでngrokのトンネルしたURLを開くと、Ionicのtabsサンプルをプレビューできます。

ionic-chats.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18