Develop, Test & Deploy with Docker

Jonas Schwabe

me.json

Docker• Containerization instead of virtualization

• Containers are lightweight• Prebuilt images instead of VM installation

• “Works on my machine!” ⟷ “Works on your machine!”

The Problem

Dependency• Modern software developers need to handle a lot of dependencies

• Operating environment• Development tools• Testing infrastructure• Build & Deployment tools

• Different projects? Different versions!

• Manually: Tedious, time-consuming

Software parts• There are multiple separate parts software is being composed of:

• ExtJS 6 Frontend • Backend Service• Database Server• Key-Value Store• …

• Install / upgrade complicated

• Docker: Get a readable & executable definition of how to install / update the stack

Environments• The software needs to work on:

• Developer’s computers (Windows / MacOS / Linux)• CI Server (Linux)• Staging/Live System (Linux)

• What could possibly go wrong?

Docker - Theory

The Image• Read-only “template” for a container• Based on an image which might be based on an image which might be

based on…• Contains:

• OS• Dependencies• Software

• Atomic - One service per image

Dockerfile - Define an Image

• Base image• Add your Software• Dependencies• Build• Run

FROM node:latest

ADD src /opt/demoWORKDIR /opt/demo

RUN npm install

CMD ["npm", "start"]

The Container• Derives from an image• Statefull• Runs a command or service• Can interact with other containers• Acts a lot like a VM

The Host• Docker runs with modern Linux kernel (> 3.10)• Mac OS & Windows support is available through lightweight Virtual

Machines

• Using Docker feels nearly the same across all systems• Same CLI for every system• Containers don’t care about the host

Infrastructure

DockerHub & Registry• Images can be exported and shared• Registries distribute images• Docker Hub hosts loads of public images• You can host your own registry

CI Workflow Example• CI Server

• Pulls Dockerfile and source code from your VCS• Pulls base image from Docker Hub• Builds an image containing your Project• Pushes the image to a private/public registry

• The destination server• Deploys from the private/public registry

Source Code Base Image

Image

Build Dockerfile

Container ContainerContainer

Docker & Sencha

CMD• Sencha CMD is being packed into the docker image• Upgrade CMD version seamlessly, everyone is synced after a container

pull• You will never have to upgrade multiple CI nodes after a local CMD upgrade!

Dockerfile

• Image will contain a production app which is being served by nginx

• For development you can run ‚sencha app watch‘ instead of nginx

FROM nginx:latest

RUN apt-get update -y && apt-get install -y \ unzip \ openjdk-7-jre \ wget \ nginx

WORKDIR /tmp

RUN wget http://cdn.sencha.com/cmd/6.1.3/no-jre/SenchaCmd-6.1.3-linux-amd64.sh.zipRUN unzip SenchaCmd-6.1.3-linux-amd64.sh.zipCOPY conf/senchacmd.varfile /tmp/senchacmd.varfile

RUN /tmp/`find SenchaCmd*.sh` -q -varfile /tmp/senchacmd.varfile -dir "/opt/sencha"RUN ln -s /opt/sencha/sencha /usr/local/bin/sencha

COPY src /opt/demoWORKDIR /opt/demoRUN sencha app buildRUN cp -r build/production/demo /usr/share/nginx/html

Frontend & Backend• ExtJS developers should not have to worry about their backend• Install & Upgrade should be as easy as running:

• docker-compose up• docker-compose up --pull

• It actually is that easy:

docker-compose.yml

• Defines which containers should be started and how they should interact

• Defines volumes to map a folder in the container to a folder on the host

• Exposes ports through the Host

version: '2'services: db: image: mariadb environment: MYSQL_ROOT_PASSWORD: your MYSQL_USER: user MYSQL_PASSWORD: and MYSQL_DATABASE: password back: build: backend ports: - "3000:3000" links: - db front: build: frontend ports: - "1841:1841" command: sencha app watch volumes: - "./frontend/src:/opt/demo"

docker-compose• After running ‚docker-compose up‘ with the previous definition:

• A database is running• The backend is running and connected to the database• The fronted is running through sencha app watch

Example

# git clone git@github.com:jnugh/SenchConExample.git# cd SenchaConExample# docker-compose up[Building front, Pulling DB]Building backStep 1 : FROM node:latestlatest: Pulling from library/node8ad8b3f87b37: Pull complete751fe39c4d34: Pull completeae3b77eefc06: Pull complete7783aac582ec: Pull complete393ad8a32e58: Pull complete2d923dade19b: Pull completeDigest: sha256:9cd81e673bde91e503fd5022df5d5ff716b4e518718b2196947b6[…]Status: Downloaded newer image for node:latest ---> e3e7156ded1fStep 2 : ADD src /opt/demo ---> a29df260324aRemoving intermediate container 107c296da3f8

Step 3 : WORKDIR /opt/demo ---> Running in 007a0cbdc760 ---> caf3f579d11dRemoving intermediate container 007a0cbdc760Step 4 : RUN npm install ---> Running in 9fd93940d56fnpm info it worked if it ends with oknpm info using npm@3.10.3npm info using node@v6.5.0npm info lifecycle demo@0.0.0~preinstall: demo@0.0.0npm info linkStuff demo@0.0.0npm info lifecycle demo@0.0.0~install: demo@0.0.0npm info lifecycle demo@0.0.0~postinstall: demo@0.0.0npm info lifecycle demo@0.0.0~prepublish: demo@0.0.0npm info ok ---> 6a3b6d45e1b8Removing intermediate container 9fd93940d56fStep 5 : CMD npm start ---> Running in 9a4d0d11a19b ---> c0bbd78dd304Removing intermediate container 9a4d0d11a19bSuccessfully built c0bbd78dd304

Bootstrap a Dev Environment

Bootstrap a Dev Environment• Frontend, Backend and DB are up and running as configured• Focus on the code right away

# docker-compose logs backAttaching to senchacon2016_back_1back_1 | npm info it worked if it ends with okback_1 | npm info using npm@3.10.3back_1 | npm info using node@v6.4.0back_1 | npm info lifecycle demo@0.0.0~prestart: demo@0.0.0back_1 | npm info lifecycle demo@0.0.0~start: demo@0.0.0back_1 | back_1 | > demo@0.0.0 start /opt/demoback_1 | > node ./bin/wwwback_1 | back_1 | npm info lifecycle demo@0.0.0~poststart: demo@0.0.0back_1 | npm info ok back_1 | npm info it worked if it ends with okback_1 | npm info using npm@3.10.3back_1 | npm info using node@v6.4.0back_1 | npm info lifecycle demo@0.0.0~prestart: demo@0.0.0back_1 | npm info lifecycle demo@0.0.0~start: demo@0.0.0back_1 | back_1 | > demo@0.0.0 start /opt/demoback_1 | > node ./bin/wwwback_1 | back_1 | GET / 200 5945.959 ms - 170back_1 | GET /stylesheets/style.css 200 46.090 ms - 111back_1 | GET /favicon.ico 404 135.085 ms - 905back_1 | npm info lifecycle demo@0.0.0~poststart: demo@0.0.0back_1 | npm info ok

# docker-compose logs frontAttaching to senchacon2016_front_1front_1 | Sencha Cmd v6.1.3.42front_1 | [INF] Processing Build Descriptor : classicfront_1 | [INF] Starting server on port : 1841[…]front_1 | [INF] Writing content to /opt/demo/classic.jsonfront_1 | [INF] merging 223 input resources into /opt/demo/build/development/demo/classic/resourcesfront_1 | [INF] merged 0 resources into /opt/demo/build/development/demo/classic/resourcesfront_1 | [INF] merging 18 input resources into /opt/demo/build/development/demofront_1 | [INF] merged 0 resources into /opt/demo/build/development/demofront_1 | [INF] Writing content to /opt/demo/sass/example/bootstrap.jsonfront_1 | [INF] Writing content to /opt/demo/sass/example/bootstrap.jsfront_1 | [INF] writing sass content to /opt/demo/build/temp/development/demo/sass/demo-all.scss.tmpfront_1 | [INF] appending sass content to /opt/demo/build/temp/development/demo/sass/demo-all.scss.tmpfront_1 | [INF] appending sass content to /opt/demo/build/temp/development/demo/sass/demo-all.scss.tmpfront_1 | [LOG] Building /opt/demo/build/temp/development/demo/sass/demo-all.scssfront_1 | [INF] Appending content to /opt/demo/bootstrap.jsfront_1 | [INF] Writing content to /opt/demo/classic.jsonfront_1 | [INF] Waiting for changes...

Logs

# docker-compose exec front bash

root@d63736c82620:/opt/demo# sencha generate view demo.view.main.TestViewSencha Cmd v6.1.3.42

root@d63736c82620:/opt/demo# ls app/view/demo/view/main/TestView* -la-rw-r--r-- 1 root root 349 Sep 15 10:28 app/view/demo/view/main/TestView.js-rw-r--r-- 1 root root 155 Sep 15 10:28 app/view/demo/view/main/TestViewController.js-rw-r--r-- 1 root root 180 Sep 15 10:28 app/view/demo/view/main/TestViewModel.js

Shell

Demo• Pull this simple demo from: https://github.com/jnugh/SenchConExample

Questions?

Please Take the Survey in the Mobile App• Navigate to this session in the mobile app

• Click on “Evaluate Session”

• Respondents will be entered into a A to win one of five $50 Amazon gift cards