Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Un Docker dans le front

Un Docker dans le front

Comment faire une image Docker d'un projet front.
Retrouvez le code sur https://github.com/xebia-france/moisdujs-docker

Antoine Le Taxin

June 21, 2016
Tweet

More Decks by Antoine Le Taxin

Other Decks in Technology

Transcript

  1. Un Docker dans le front Antoine Le Taxin @ModuloM Jean-Pascal

    Thiery @jpthiery https://github.com/xebia-france/moisdujs-docker.git
  2. @XebiaFr Définition conteneur / Docker #moisdujs @ModuloM • La technologie

    du conteneur n’est pas nouvelle, elle date des années 2000, notamment avec les Linux Containers ou « LCX » et les namespaces. • Docker est une surcouche qui rend le développement et le déploiement des conteneurs beaucoup plus simple tout en les standardisant.
  3. @XebiaFr Les conteneurs ne sont pas de la virtualisation #moisdujs

    @ModuloM • À l'opposé d’une machines virtuelles, un conteneur ne requiert aucun système d'exploitation séparé et n'en fournit aucun. Il s'appuie plutôt sur les fonctionnalités du noyau et utilise l'isolation de ressources (CPU, mémoire, I/O, connexions réseau etc.) ainsi que des espaces de noms séparés pour isoler le système d'exploitation tel que vu par l'application. • Docker communique avec le noyau Linux par socket Unix ou TCP
  4. @XebiaFr Quel intérêt principal pour le front ? #moisdujs @ModuloM

    • Builder sans m’inquiéter de la gestion de node sur la machine d’un autre dev (back par exemple) ou sur le CI.
  5. @XebiaFr • Créer une image de build avec la bonne

    version de node. • Copier nos sources dans le conteneur de build. • Installer nos dépendances dans le conteneur de build. • Jouer dans le conteneur les tests. • Si aucune erreur, builder l’application. • Copier les fichiers buildés dans un dossier qui fournit le serveur. • Packager l’application dans une autre image avec le serveur. • Cette dernière image Docker pourra être lancée via Docker (docker run ou docker-compose). Les étapes nécessaires #moisdujs @ModuloM
  6. @XebiaFr D’abord il nous faut une image builder #moisdujs @ModuloM

    • Un fichier.sh pour simplifier l’enchaînement des commandes npm dans le conteneur (npm clean, install, test, etc.) et éviter la création de trop de layers (un par commande, commité sur l’image d’origine à la volée). • Un Dockerfile qui donne à Docker les indications nécessaires pour le build de l’image.
  7. @XebiaFr Dockerfile de notre builder en détail #moisdujs @ModuloM FROM

    node:5.11.1 # image docker de base pour notre builder # si l'image docker pour cette version de node n'existe pas sur la machine, elle sera téléchargée ENV NODE_ENV development # on définie les variables d'environnements ENV BABEL_ENV production # le path du dossier de référence pour toutes instructions lancées dans le conteneur WORKDIR /src/ ADD build.sh /build.sh # on copie le fichier bash de build dans l'image RUN chmod +x /build.sh # on modifie les droits du fichier pour l'exécuter avec CMD CMD ["/build.sh"] # on enregistre la commande par défaut, lancée au build
  8. @XebiaFr Puis une image avec application et serveur #moisdujs @ModuloM

    • Dans le dossier où nous avons copié le dossier dist généré avec le builder, nous ajoutons : ◦ Un package.json avec notre dépendance à http-server (paquet npm choisi pour faire notre serveur http). ◦ Un Docker file qui donne à Docker les indications nécessaires pour le build de l’image finale.
  9. @XebiaFr Dockerfile pour l’image de notre application #moisdujs @ModuloM FROM

    node:5.11.1 # image docker de base pour notre builder WORKDIR /app # le path du dossier de référence pour l'instruction CMD COPY . /app # on copie les fichiers du dossier courant dans le dossier /app du conteneur RUN npm i # on install les dépendances, en l'occurence http-server EXPOSE 80 # port à exposé lors du run de l'image ENTRYPOINT ["npm","run","start"] # on enregistre la commande par défaut (c.f. ci-dessous) Dans docker/delivery/ package.json : "scripts": { "start": "http-server dist/ -p 80" },
  10. @XebiaFr Enfin, un script pour lancer les tâches docker #moisdujs

    @ModuloM Dans ./build-docker.sh : MOISDUJS_REACT_VERSION="0.1.0" # on set la version docker build --no-cache -t="moisdujs/react:builder" docker/builder/ # on build l'image qui servira à construire l'image finale (sans les sources) containerId=$(docker create -e "MOISDUJS_REACT_VERSION="${MOISDUJS_REACT_VERSION} moisdujs-react:builder) # on crée une nouvelle instance du builder docker cp $(pwd)/. ${containerId}:/src/ # on copie tout notre dossier de l’app dans /src du conteneur docker start -a $containerId # on démarre l'image docker cp ${containerId}:/target/dist $(pwd)/docker/delivery/ # on copie le contenu de /target du conteneur de build vers le dossier docker/delivery de notre dossier courant rc=$(docker inspect -f {{.State.ExitCode}} $containerId) # on enregistre le code de sortie docker rm $containerId # on supprime le conteneur de build
  11. @XebiaFr suite... #moisdujs @ModuloM Dans ./build-docker.sh (la suite) : #

    si la sortie n'était pas en erreur on continue sinon on exit if [ "$rc" != 0 ]; then exit $rc fi # on build l'image finale, contenant les sources buildées et le serveur docker build -t="moisdujs/react:${MOISDUJS_REACT_VERSION}" docker/delivery
  12. @XebiaFr On peut maintenant démarrer notre image #moisdujs @ModuloM •

    docker images On voit nos images et leur dates de création. • docker run -d -p 8080:80 moisdujs/react:0.1.0 On lance notre image finale sur le port 8080, depuis le port 80 du conteneur. • docker ps On voit le conteneur en train de tourner. • open http://192.168.99.100:8080 On peut utiliser notre application qui tourne sur notre machine virtuelle (car nous sommes sur Mac).
  13. @XebiaFr Conclusion #moisdujs @ModuloM • Docker permet de builder une

    application front sans se souci des softs installés sur la machine (sur un CI par exemple), d’y jouer les tests et d’en resortir uniquement la partie utile (ici /dist). • Il peut être utile pour tester une montée de version de node facilement. • Le build est reproductible et aura toujours le même comportement (est indépendant de la machine sur laquelle le build est lancé). • L’image finale d’une application peut être utilisée par n’importe quelle plate forme capable de faire tourner Docker (aussi bien localement, que sur du cloud, etc.) et est donc plus facile à déployer. https://www.docker.com/products/docker-toolbox https://www.docker.com/products/docker https://docs.docker.com/engine/reference/builder/