Develop, Test & Deploy with Docker
Jonas Schwabe
me.json
Docker
• Containerization instead of virtualization
• Containers are lightweight
• Prebuilt images instead of VM installat...
The Problem
Dependency
• Modern software developers need to handle a lot of dependencies
• Operating environment
• Development tools
•...
Software parts
• There are multiple separate parts software is being composed of:
• ExtJS 6 Frontend
• Backend Service
• D...
Environments
• The software needs to work on:
• Developer’s computers (Windows / MacOS / Linux)
• CI Server (Linux)
• Stag...
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...
Dockerfile - Define an Image
• Base image
• Add your Software
• Dependencies
• Build
• Run
FROM node:latest
ADD src /opt/d...
The Container
• Derives from an image
• Statefull
• Runs a command or service
• Can interact with other containers
• Acts ...
The Host
• Docker runs with modern Linux kernel (> 3.10)
• Mac OS & Windows support is available through lightweight Virtu...
Infrastructure
DockerHub & Registry
• Images can be exported and shared
• Registries distribute images
• Docker Hub hosts loads of public...
CI Workflow Example
• CI Server
• Pulls Dockerfile and source code from your VCS
• Pulls base image from Docker Hub
• Buil...
Docker & Sencha
CMD
• Sencha CMD is being packed into the docker image
• Upgrade CMD version seamlessly, everyone is synced after a contai...
Dockerfile
• Image will contain a production app
which is being served by nginx
• For development you can run ‚sencha
app ...
Frontend & Backend
• ExtJS developers should not have to worry about their backend
• Install & Upgrade should be as easy a...
docker-compose.yml
• Defines which containers should be
started and how they should interact
• Defines volumes to map a fo...
docker-compose
• After running ‚docker-compose up‘ with the previous definition:
• A database is running
• The backend is ...
Example
# git clone git@github.com:jnugh/SenchConExample.git
# cd SenchaConExample
# docker-compose up
[Building front, Pulling DB...
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 i...
# docker-compose exec front bash
root@d63736c82620:/opt/demo# sencha generate view demo.view.main.TestView
Sencha Cmd v6.1...
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”
• Resp...
SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe
Upcoming SlideShare
Loading in …5
×

SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe

51 views

Published on

Have you ever heard the phrase: "Everything works fine on my machine?" Docker is here to rescue you. Running your toolchain, Ext JS application, back-end server, and even your database - all in a standardized container format that can be transported and reused, throughout your process. In this session, you will learn how to automate a typical workflow, including developing, testing, and deploying, by using Docker containers and common continuous integration solutions.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
51
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe

  1. 1. Develop, Test & Deploy with Docker Jonas Schwabe
  2. 2. me.json
  3. 3. Docker • Containerization instead of virtualization • Containers are lightweight • Prebuilt images instead of VM installation • “Works on my machine!” ⟷ “Works on your machine!”
  4. 4. The Problem
  5. 5. 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
  6. 6. 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
  7. 7. 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?
  8. 8. Docker - Theory
  9. 9. 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
  10. 10. 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"]
  11. 11. The Container • Derives from an image • Statefull • Runs a command or service • Can interact with other containers • Acts a lot like a VM
  12. 12. 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
  13. 13. Infrastructure
  14. 14. DockerHub & Registry • Images can be exported and shared • Registries distribute images • Docker Hub hosts loads of public images • You can host your own registry
  15. 15. 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
  16. 16. Docker & Sencha
  17. 17. 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!
  18. 18. 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
  19. 19. 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:
  20. 20. 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"
  21. 21. 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
  22. 22. Example
  23. 23. # 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
  24. 24. Bootstrap a Dev Environment • Frontend, Backend and DB are up and running as configured • Focus on the code right away
  25. 25. # 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
  26. 26. # 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
  27. 27. Demo • Pull this simple demo from: https://github.com/jnugh/SenchConExample
  28. 28. Questions?
  29. 29. 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

×