Date post: | 11-Apr-2017 |
Category: |
Technology |
Upload: | sencha |
View: | 76 times |
Download: | 3 times |
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 [email protected]: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 [email protected] info using [email protected] info lifecycle [email protected]~preinstall: [email protected] info linkStuff [email protected] info lifecycle [email protected]~install: [email protected] info lifecycle [email protected]~postinstall: [email protected] info lifecycle [email protected]~prepublish: [email protected] 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 [email protected]_1 | npm info using [email protected]_1 | npm info lifecycle [email protected]~prestart: [email protected]_1 | npm info lifecycle [email protected]~start: [email protected]_1 | back_1 | > [email protected] start /opt/demoback_1 | > node ./bin/wwwback_1 | back_1 | npm info lifecycle [email protected]~poststart: [email protected]_1 | npm info ok back_1 | npm info it worked if it ends with okback_1 | npm info using [email protected]_1 | npm info using [email protected]_1 | npm info lifecycle [email protected]~prestart: [email protected]_1 | npm info lifecycle [email protected]~start: [email protected]_1 | back_1 | > [email protected] 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 [email protected]~poststart: [email protected]_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