Dockeriser une application Ionic

English English

Introduction

docker + ionic

Ionic Framework est un mélange d’outils et de technos pour développer des applications mobiles hybrides rapidement et facilement. Il s’appuie sur Angular pour la partie application web du framework et sur Cordova  pour la partie construction des applications natives. Ce framework open source permet de développer une application déployable sur plusieurs environnements tel qu’un site web ou une application mobile pour des systèmes tel que Android ou iOS ou Windows Phone

Dans cet article, il n’est pas question de découvrir cet framwework, mais plutôt de mettre en place notre environnement de test. À partir de docker, ici, nous allons voir comment préparer votre dockerfile pour y arriver .

 

Configuration

Dans ce tutoriel nous allons créer une image permettant de développer une application Ionic 2 et de générer les fichiers .apk

De nombreuses images existent déjà pour du développement IONIC notamment https://github.com/beevelop/docker-ionic. Celle que nous allons créer maintenant est différente car elle est basée sur Alpine et a donc l’avantage d’être plus lègère.

Vous aurez juste besoin d’avoir docker installé.

Dockeriser une application Ionic – Création du Dockerfile

Trève de mondanités, rentrons dans le vif du sujet.

Commencez par créer un dossier pour y mettre votre dockerfile

mkdir ~/my-project
cd~/my-project

Créer un fichier nommé Dockerfile . Dans notre image nous aurons besoin d’installer Ionic et cordova (bien évidemment), mais aussi JAVA, ANDROID et GRADLE pour pouvoir générer nos .apk . Comme vous l’aurez compris, l’image que nous allons créer dans ce tutoriel ne nous permettra pas de générer des applications IOS ou Windows mobile. Je vous laisses vous occuper de cette partie 😉 Nous partirons de l’image alpine 8.9 de nodeJS. C’est une image officielle, et si vous voulez être plus hardcore vous pouvez aussi partir d’ alpine 10.15.3 et installer nodeJS vous même.

FROM node:10.15.3-alpine

Ensuite nous allons créer des variables d’environnement pour définir les versions de JAVA, GRADLE et ANDROID que nous allons utiliser. Vous pouvez ainsi plus facilement changer les versions utilisées dans votre image plus tard. Il faudra juste faire attention à la compatibilité des versions. Toutes les versions de java ne marchent pas avec toutes les versions d’Android et etc…

# ENVIRONNEMENT
ENV GLIB_PACKAGE_BASE_URL https://github.com/sgerrand/alpine-pkg-glibc/releases/download
ENV GLIB_VERSION 2.25-r0

ENV JAVA_HOME /usr/lib/jvm/java-1.8-openjdk

ENV GRADLE_HOME /usr/local/gradle
ENV GRADLE_VERSION 4.4

ENV ANDROID_HOME /usr/local/android-sdk-linux
ENV ANDRDOID_TOOLS_VERSION r25.2.5
ENV ANDROID_API_LEVELS android-26
ENV ANDROID_BUILD_TOOLS_VERSION 26.0.2
ENV IONIC_VERSION 4.12.0

ENV PATH ${GRADLE_HOME}/bin:${JAVA_HOME}/bin:${ANDROID_HOME}/tools:$ANDROID_HOME/platform-tools:$PATH

Installation de JAVA8 (jdk et jre)

# INSTALL JAVA
RUN apk update && apk add curl openjdk8-jre openjdk8

Installation d’ionic.

# INSTALL IONIC AND CORDOVA
RUN npm install -g cordova ionic@${IONIC_VERSION}

Installons ensuite Gradle.

#INSTALL Graddle
RUN mkdir -p ${GRADLE_HOME} && \
  curl -L https://services.gradle.org/distributions/gradle-${GRADLE_VERSION}-bin.zip > /tmp/gradle.zip && \
  unzip /tmp/gradle.zip -d ${GRADLE_HOME} && \
  mv ${GRADLE_HOME}/gradle-${GRADLE_VERSION}/* ${GRADLE_HOME} && \
  rm -r ${GRADLE_HOME}/gradle-${GRADLE_VERSION}/

Installons maintenant Android SDK.

# INSTALL ANDROID
RUN mkdir -p ${ANDROID_HOME} && \
  curl -L https://dl.google.com/android/repository/tools_${ANDRDOID_TOOLS_VERSION}-linux.zip > /tmp/tools.zip && \
  unzip /tmp/tools.zip -d ${ANDROID_HOME}

Nous aurons aussi besoin de GLIBC pour qu’Android puisse marcher correctement.

# INSTALL GLIBC
RUN curl -L https://raw.githubusercontent.com/wassim6/alpine-pkg-glibc/master/sgerrand.rsa.pub > /etc/apk/keys/sgerrand.rsa.pub && \
  curl -L ${GLIB_PACKAGE_BASE_URL}/${GLIB_VERSION}/glibc-${GLIB_VERSION}.apk > /tmp/glibc.apk && \
  curl -L ${GLIB_PACKAGE_BASE_URL}/${GLIB_VERSION}/glibc-bin-${GLIB_VERSION}.apk > /tmp/glibc-bin.apk && \
  apk add /tmp/glibc-bin.apk /tmp/glibc.apk

Maintenant nous installons les outils d’android et on accepte la licence.

# CONFIGURATION
RUN echo y | android update sdk --no-ui -a --filter platform-tools,${ANDROID_API_LEVELS},build-tools-${ANDROID_BUILD_TOOLS_VERSION}

# Make license agreement
RUN mkdir $ANDROID_HOME/licenses && \
    echo 8933bad161af4178b1185d1a37fbf41ea5269c55 > $ANDROID_HOME/licenses/android-sdk-license && \
    echo d56f5187479451eabf01fb78af6dfcb131a6481e >> $ANDROID_HOME/licenses/android-sdk-license && \
    echo 24333f8a63b6825ea9c5514f83c2829b004d1fee >> $ANDROID_HOME/licenses/android-sdk-license && \
    echo 84831b9409646a918e30573bab4c9c91346d8abd > $ANDROID_HOME/licenses/android-sdk-preview-license

Pour finir on supprime les fichiers inutiles histoire d’alléger l’image.

#FILES DELETION
RUN rm -rf /tmp/* /var/cache/apk/*

En résumé, voilà le résultat que vous devriez avoir à la fin :

FROM node:10.15.3-alpine

#ENVIRONNEMENT
ENV GLIB_PACKAGE_BASE_URL https://github.com/sgerrand/alpine-pkg-glibc/releases/download
ENV GLIB_VERSION 2.25-r0

ENV JAVA_HOME /usr/lib/jvm/java-1.8-openjdk

ENV GRADLE_HOME /usr/local/gradle
ENV GRADLE_VERSION 4.4

ENV ANDROID_HOME /usr/local/android-sdk-linux
ENV ANDRDOID_TOOLS_VERSION r25.2.5
ENV ANDROID_API_LEVELS android-26
ENV ANDROID_BUILD_TOOLS_VERSION 26.0.2
ENV IONIC_VERSION 4.12.0

ENV PATH ${GRADLE_HOME}/bin:${JAVA_HOME}/bin:${ANDROID_HOME}/tools:$ANDROID_HOME/platform-tools:$PATH

# INSTALL JAVA
RUN apk update && \
  apk add curl openjdk8-jre openjdk8

# INSTALL IONIC AND CORDOVA
RUN npm install -g cordova ionic@${IONIC_VERSION}

#INSTALL Graddle
RUN mkdir -p ${GRADLE_HOME} && \
  curl -L https://services.gradle.org/distributions/gradle-${GRADLE_VERSION}-bin.zip > /tmp/gradle.zip && \
  unzip /tmp/gradle.zip -d ${GRADLE_HOME} && \
  mv ${GRADLE_HOME}/gradle-${GRADLE_VERSION}/* ${GRADLE_HOME} && \
  rm -r ${GRADLE_HOME}/gradle-${GRADLE_VERSION}/

# INSTALL ANDROID
RUN mkdir -p ${ANDROID_HOME} && \
  curl -L https://dl.google.com/android/repository/tools_${ANDRDOID_TOOLS_VERSION}-linux.zip > /tmp/tools.zip && \
  unzip /tmp/tools.zip -d ${ANDROID_HOME}

# INSTALL GLIBC
RUN curl -L https://raw.githubusercontent.com/wassim6/alpine-pkg-glibc/master/sgerrand.rsa.pub > /etc/apk/keys/sgerrand.rsa.pub && \
  curl -L ${GLIB_PACKAGE_BASE_URL}/${GLIB_VERSION}/glibc-${GLIB_VERSION}.apk > /tmp/glibc.apk && \
  curl -L ${GLIB_PACKAGE_BASE_URL}/${GLIB_VERSION}/glibc-bin-${GLIB_VERSION}.apk > /tmp/glibc-bin.apk && \
  apk add /tmp/glibc-bin.apk /tmp/glibc.apk

# CONFIGURATION
RUN echo y | android update sdk --no-ui -a --filter platform-tools,${ANDROID_API_LEVELS},build-tools-${ANDROID_BUILD_TOOLS_VERSION}

# Make license agreement
RUN mkdir $ANDROID_HOME/licenses && \
    echo 8933bad161af4178b1185d1a37fbf41ea5269c55 > $ANDROID_HOME/licenses/android-sdk-license && \
    echo d56f5187479451eabf01fb78af6dfcb131a6481e >> $ANDROID_HOME/licenses/android-sdk-license && \
    echo 24333f8a63b6825ea9c5514f83c2829b004d1fee >> $ANDROID_HOME/licenses/android-sdk-license && \
    echo 84831b9409646a918e30573bab4c9c91346d8abd > $ANDROID_HOME/licenses/android-sdk-preview-license


#FILES DELETION
RUN rm -rf /tmp/* /var/cache/apk/*

WORKDIR
RUN npm install

Testons notre image

Commencez par construire l’image. Dans le dossier de votre dockerfile tapez la commande docker build -t ionic .. La construction de l’image risque de prendre du temps. Vous pouvez aller faire une sieste en attendant 🙂 .

Une fois votre image créée vous pouvez faire un docker images pour la voir. Vous aurez donc :

REPOSITORY                    TAG                 IMAGE ID            CREATED             SIZE
ionic                         latest              3eb186c9ee21        7 seconds ago       1.42GB

Ensuite lancez votre image avec la commande : docker run -p 8100:8100 -it ionic ash

Créons une application. (En pratique vous voudrez surement créer un volume pour partager votre code avec le docker)

ionic ionic start helloWorld tabs
cd helloWorld/
ionic serve

Votre application est maintenant accessible depuis l’adresse http://localhost:8100/

Vous pouvez aussi tester la génération du fichier apk et le copier sur votre ordinateur avec docker cp

ionic cordova platform add android
ionic cordova build android android

Votre apk se trouve à platforms/android/app/build/outputs/apk/debug/app-debug.apk

Conclusion

Voilà voilà vous avez maintenant votre Android d’installer, vous pouvez dès a présent tester votre application. 🙂 .