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/demo
WORKDIR /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.zip
RUN unzip SenchaCmd-6.1.3-linux-amd64.sh.zip
COPY 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/demo
WORKDIR /opt/demo
RUN sencha app build
RUN 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 back
Step 1 : FROM node:latest
latest: Pulling from library/node
8ad8b3f87b37: Pull complete
751fe39c4d34: Pull complete
ae3b77eefc06: Pull complete
7783aac582ec: Pull complete
393ad8a32e58: Pull complete
2d923dade19b: Pull complete
Digest:
sha256:9cd81e673bde91e503fd5022df5d5ff716b4e518718b2196947b6[…]
Status: Downloaded newer image for node:latest
---> e3e7156ded1f
Step 2 : ADD src /opt/demo
---> a29df260324a
Removing intermediate container 107c296da3f8
Step 3 : WORKDIR /opt/demo
---> Running in 007a0cbdc760
---> caf3f579d11d
Removing intermediate container 007a0cbdc760
Step 4 : RUN npm install
---> Running in 9fd93940d56f
npm info it worked if it ends with ok
npm info using npm@3.10.3
npm info using node@v6.5.0
npm info lifecycle demo@0.0.0~preinstall: demo@0.0.0
npm info linkStuff demo@0.0.0
npm info lifecycle demo@0.0.0~install: demo@0.0.0
npm info lifecycle demo@0.0.0~postinstall: demo@0.0.0
npm info lifecycle demo@0.0.0~prepublish: demo@0.0.0
npm info ok
---> 6a3b6d45e1b8
Removing intermediate container 9fd93940d56f
Step 5 : CMD npm start
---> Running in 9a4d0d11a19b
---> c0bbd78dd304
Removing intermediate container 9a4d0d11a19b
Successfully 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 back
Attaching to senchacon2016_back_1
back_1 | npm info it worked if it ends with ok
back_1 | npm info using npm@3.10.3
back_1 | npm info using node@v6.4.0
back_1 | npm info lifecycle demo@0.0.0~prestart: demo@0.0.0
back_1 | npm info lifecycle demo@0.0.0~start: demo@0.0.0
back_1 |
back_1 | > demo@0.0.0 start /opt/demo
back_1 | > node ./bin/www
back_1 |
back_1 | npm info lifecycle demo@0.0.0~poststart: demo@0.0.0
back_1 | npm info ok
back_1 | npm info it worked if it ends with ok
back_1 | npm info using npm@3.10.3
back_1 | npm info using node@v6.4.0
back_1 | npm info lifecycle demo@0.0.0~prestart: demo@0.0.0
back_1 | npm info lifecycle demo@0.0.0~start: demo@0.0.0
back_1 |
back_1 | > demo@0.0.0 start /opt/demo
back_1 | > node ./bin/www
back_1 |
back_1 | GET / 200 5945.959 ms - 170
back_1 | GET /stylesheets/style.css 200 46.090 ms - 111
back_1 | GET /favicon.ico 404 135.085 ms - 905
back_1 | npm info lifecycle demo@0.0.0~poststart: demo@0.0.0
back_1 | npm info ok
# docker-compose logs front
Attaching to senchacon2016_front_1
front_1 | Sencha Cmd v6.1.3.42
front_1 | [INF] Processing Build Descriptor : classic
front_1 | [INF] Starting server on port : 1841
[…]
front_1 | [INF] Writing content to /opt/demo/classic.json
front_1 | [INF] merging 223 input resources into
/opt/demo/build/development/demo/classic/resources
front_1 | [INF] merged 0 resources into
/opt/demo/build/development/demo/classic/resources
front_1 | [INF] merging 18 input resources into /opt/demo/build/development/demo
front_1 | [INF] merged 0 resources into /opt/demo/build/development/demo
front_1 | [INF] Writing content to /opt/demo/sass/example/bootstrap.json
front_1 | [INF] Writing content to /opt/demo/sass/example/bootstrap.js
front_1 | [INF] writing sass content to
/opt/demo/build/temp/development/demo/sass/demo-all.scss.tmp
front_1 | [INF] appending sass content to
/opt/demo/build/temp/development/demo/sass/demo-all.scss.tmp
front_1 | [INF] appending sass content to
/opt/demo/build/temp/development/demo/sass/demo-all.scss.tmp
front_1 | [LOG] Building /opt/demo/build/temp/development/demo/sass/demo-all.scss
front_1 | [INF] Appending content to /opt/demo/bootstrap.js
front_1 | [INF] Writing content to /opt/demo/classic.json
front_1 | [INF] Waiting for changes...
Logs

# docker-compose exec front bash
root@d63736c82620:/opt/demo# sencha generate view demo.view.main.TestView
Sencha 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