davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 Commits
1 Branch
Tree: 2e4d51a7b7
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '2e4d51a7b7'
${ noResults }
larlet-fr-david-cache/cache/37adabe90396072db9cfdd99baa.../index.html

index.html 43KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Docker in Action - fitter, happier, more productive - Real Python (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://realpython.com/blog/python/docker-in-action-fitter-happier-more-productive/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Docker in Action - fitter, happier, more productive - Real Python (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://realpython.com/blog/python/docker-in-action-fitter-happier-more-productive/">Source originale du contenu</a></h3>

  463.     <div class="center-text">

  464.   <img class="no-border" src="https://realpython.com/images/blog_images/docker-in-action/docker-in-action.png" alt="docker in action"/>

  465. </div>

  466. 

  467. <p>With Docker you can easily deploy a web application along with it’s dependencies, environment variables, and configuration settings – everything you need to recreate your environment quickly and efficiently.</p>

  468. 

  469. <p>This tutorial looks at just that.</p>

  470. 

  471. <p><strong>Updated 02/28/2015</strong>: Added <a href="https://docs.docker.com/compose/">Docker Compose</a> and upgraded Docker and boot2docker to the latest versions.</p>

  472. 

  473. <hr/>

  474. 

  475. <p><strong>We’ll start by creating a Docker container for running a Python Flask application. From there, we’ll look at a nice development workflow to manage the local development of an app as well as continuous integration and delivery, step by step …</strong></p>

  476. 

  477. <blockquote><p>I (<a href="https://twitter.com/mikeherman">Michael Herman</a>) originally presented this workflow at <a href="https://www.pytennessee.org/"> PyTennessee</a> on February 8th, 2015. You can view the slides <a href="http://realpython.github.io/fitter-happier-docker/">here</a>, if interested.</p></blockquote>

  478. 

  479. <h2>Workflow</h2>

  480. 

  481. <ol>

  482. <li>Code locally on a feature branch</li>

  483. <li>Open a pull request on Github against the master branch</li>

  484. <li>Run automated tests against the Docker container</li>

  485. <li>If the tests pass, manually merge the pull request into master</li>

  486. <li>Once merged, the automated tests run again</li>

  487. <li>If the second round of tests pass, a build is created on Docker Hub</li>

  488. <li>Once the build is created, it’s then automatically (err, automagically) deployed to production</li>

  489. </ol>

  490. 

  491. <div class="center-text">

  492.   <img class="no-border" src="https://realpython.com/images/blog_images/docker-in-action/steps.jpg" alt="docker in action workflow"/>

  493. </div>

  494. 

  495. <blockquote><p>This tutorial is meant for Mac OS X users, and we’ll be utilizing the following tools/technologies – Python v2.7.9, Flask v0.10.1, Docker v1.5.0, Docker Compose, v1.1.0, boot2docker 1.5.0, Redis v2.8.19</p></blockquote>

  496. 

  497. <p>Let’s get to it…</p>

  498. 

  499. <hr/>

  500. 

  501. <p>First, some Docker-specific terms:</p>

  502. 

  503. <ul>

  504. <li>A <em>Dockerfile</em> is a file that contains a set of instructions used to create an <em>image</em>.</li>

  505. <li>An <em>image</em> is used to build and save snapshots (the state) of an environment.</li>

  506. <li>A <em>container</em> is an instantiated, live <em>image</em> that runs a collection of processes.</li>

  507. </ul>

  508. 

  509. <blockquote><p>Be sure to check out the Docker <a href="https://docs.docker.com/">documentation</a> for more info on <a href="https://docs.docker.com/reference/builder/">Dockerfiles</a>, <a href="https://docs.docker.com/terms/image/">images</a>, and <a href="https://docs.docker.com/terms/container/">containers</a>.</p></blockquote>

  510. 

  511. <h2>Why Docker?</h2>

  512. 

  513. <p>You can truly mimic your production environment on your local machine. No more having to debug environment specific bugs or worrying that your app will perform differently in production.</p>

  514. 

  515. <ol>

  516. <li>Version control for infrastructure</li>

  517. <li>Easily distribute/recreate your entire development environment</li>

  518. <li>Build once, run anywhere – aka The Holy Grail!</li>

  519. </ol>

  520. 

  521. <h2>Docker Setup</h2>

  522. 

  523. <p>Since Darwin (the kernel for OS X) does not have the Linux kernel features required to run Docker containers, we need to install <a href="http://boot2docker.io/">boot2docker</a> – which is a <em>lightweight</em>t Linux distribution designed specifically to run Docker. In essence, it starts a small VM that’s configured to run Docker containers.</p>

  524. 

  525. <p>Create a new directory called “fitter-happier-docker” to house your Flask project.</p>

  526. 

  527. <p>Next follow the instructions from the guide <a href="https://docs.docker.com/installation/mac/">Installing Docker on Mac OS X</a> to install both Docker and the official boot2docker package.</p>

  528. 

  529. <p>Test the install:</p>

  530. 

  531. <figure class="code"><figcaption><span/></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class="line-number">1</span>

  532. <span class="line-number">2</span>

  533. <span class="line-number">3</span>

  534. </pre></td><td class="code"><pre><code class="sh"><span class="line"><span class="nv">$ </span>boot2docker version

  535. </span><span class="line">Boot2Docker-cli version: v1.5.0

  536. </span><span class="line">Git commit: ccd9032

  537. </span></code></pre></td></tr></table></div></figure>

  538. 

  539. <h2>Compose Up!</h2>

  540. 

  541. <p><a href="http://docs.docker.com/compose/">Docker Compose</a> is an orchestration framework that handles the building and running of multiple services (via separate containers) using a simple <em>.yml</em> file. It makes it super easy to link services together running in different containers.</p>

  542. 

  543. <blockquote><p>Following along with me? Grab the code in a pre-Compose state from the <a href="https://github.com/realpython/fitter-happier-docker/releases/tag/pre-compose">repository</a>.</p></blockquote>

  544. 

  545. <p>Start by installing the requirements via pip and then make sure Compose is installed:</p>

  546. 

  547. <figure class="code"><figcaption><span/></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class="line-number">1</span>

  548. <span class="line-number">2</span>

  549. <span class="line-number">3</span>

  550. </pre></td><td class="code"><pre><code class="sh"><span class="line"><span class="nv">$ </span>pip install docker-compose

  551. </span><span class="line"><span class="nv">$ </span>docker-compose --version

  552. </span><span class="line">docker-compose 1.1.0

  553. </span></code></pre></td></tr></table></div></figure>

  554. 

  555. <p>Now let’s get our Flask application up and running along with Redis.</p>

  556. 

  557. <p>Add a new file called <em>docker-compose.yml</em> to the root directory:</p>

  558. 

  559. <figure class="code"><figcaption><span/></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class="line-number">1</span>

  560. <span class="line-number">2</span>

  561. <span class="line-number">3</span>

  562. <span class="line-number">4</span>

  563. <span class="line-number">5</span>

  564. <span class="line-number">6</span>

  565. <span class="line-number">7</span>

  566. <span class="line-number">8</span>

  567. <span class="line-number">9</span>

  568. <span class="line-number">10</span>

  569. <span class="line-number">11</span>

  570. <span class="line-number">12</span>

  571. <span class="line-number">13</span>

  572. </pre></td><td class="code"><pre><code class="yaml"><span class="line"><span class="l-Scalar-Plain">web</span><span class="p-Indicator">:</span>

  573. </span><span class="line">    <span class="l-Scalar-Plain">build</span><span class="p-Indicator">:</span> <span class="l-Scalar-Plain">web</span>

  574. </span><span class="line">    <span class="l-Scalar-Plain">volumes</span><span class="p-Indicator">:</span>

  575. </span><span class="line">        <span class="p-Indicator">-</span> <span class="l-Scalar-Plain">web:/code</span>

  576. </span><span class="line">    <span class="l-Scalar-Plain">ports</span><span class="p-Indicator">:</span>

  577. </span><span class="line">        <span class="p-Indicator">-</span> <span class="s">"80:5000"</span>

  578. </span><span class="line">    <span class="l-Scalar-Plain">links</span><span class="p-Indicator">:</span>

  579. </span><span class="line">        <span class="p-Indicator">-</span> <span class="l-Scalar-Plain">redis</span>

  580. </span><span class="line">    <span class="l-Scalar-Plain">command</span><span class="p-Indicator">:</span> <span class="l-Scalar-Plain">python app.py</span>

  581. </span><span class="line"><span class="l-Scalar-Plain">redis</span><span class="p-Indicator">:</span>

  582. </span><span class="line">    <span class="l-Scalar-Plain">image</span><span class="p-Indicator">:</span> <span class="l-Scalar-Plain">redis:2.8.19</span>

  583. </span><span class="line">    <span class="l-Scalar-Plain">ports</span><span class="p-Indicator">:</span>

  584. </span><span class="line">        <span class="p-Indicator">-</span> <span class="s">"6379:6379"</span>

  585. </span></code></pre></td></tr></table></div></figure>

  586. 

  587. <p>Here we add the services that make up our stack:</p>

  588. 

  589. <ol>

  590. <li><strong>web</strong>: First, we build the image from the “web” directory and then mount that directory to the “code” directory within the Docker container. The Flask app is ran via the <code>python app.py</code> command. This exposes port 5000 on the container, which is forwarded to port 80 on the host environment.</li>

  591. <li><strong>redis</strong>: Next, the Redis service is built from the Docker Hub “Redis” <a href="https://registry.hub.docker.com/_/redis/">image</a>. Port 6379 is exposed and forwarded.</li>

  592. </ol>

  593. 

  594. <p>Did you notice the Dockerfile in the “web” directory? This file is used to build our image, starting with an Ubuntu base, the required dependencies are installed and the app is built.</p>

  595. 

  596. <h2>Build and run</h2>

  597. 

  598. <p>With one simple command we can build the image and run the container:</p>

  599. 

  600. <figure class="code"><figcaption><span/></figcaption></figure>

  601. 

  602. <div class="center-text">

  603.   <img class="no-border" src="https://realpython.com/images/blog_images/docker-in-action/figup.png" alt="fig up"/>

  604. </div>

  605. 

  606. <p>This command builds an image for our Flask app, pulls the Redis image, and then starts everything up.</p>

  607. 

  608. <p>Grab a cup of coffee. Or two. This will take some time the first time you build the container. That said, since Docker caches each step (or <em><a href="https://docs.docker.com/terms/layer/">layer</a></em>) of the build process from the Dockerfile, rebuilding will happen <em>much</em> quicker because only the steps that have <em>changed</em> since the last build are rebuilt.</p>

  609. 

  610. <blockquote><p>If you do change a line/step/layer in your Dockerfile, it will recreate/rebuild everything in that line – so be mindful of this when you structure your Dockerfile.</p></blockquote>

  611. 

  612. <p>Docker Compose brings each container up at once in parallel. Each container also has a unique name and each process within the stack trace/log is color-coded for readability.</p>

  613. 

  614. <p>Ready to test?</p>

  615. 

  616. <p>Open your web browser and navigate to the IP address associated with the <code>DOCKER_HOST</code> variable – i.e., <a href="http://192.168.59.103/,">http://192.168.59.103/,</a> in this example. (Run <code>boot2docker ip</code> to get the address.)</p>

  617. 

  618. <p>You should see the text, “Hello! This page has been seen 1 times.” in your browser:</p>

  619. 

  620. <div class="center-text">

  621.   <img class="no-border" src="https://realpython.com/images/blog_images/docker-in-action/test.png" alt="test flask app running on docker"/>

  622. </div>

  623. 

  624. <p>Refresh. The page counter should have incremented.</p>

  625. 

  626. <p>Kill the processes (Ctrl-C), and then run the following command to run the process in the background.</p>

  627. 

  628. <figure class="code"><figcaption><span/></figcaption></figure>

  629. 

  630. <p>Want to view the currently running processes?</p>

  631. 

  632. <figure class="code"><figcaption><span/></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class="line-number">1</span>

  633. <span class="line-number">2</span>

  634. <span class="line-number">3</span>

  635. <span class="line-number">4</span>

  636. <span class="line-number">5</span>

  637. </pre></td><td class="code"><pre><code class="sh"><span class="line"><span class="nv">$ </span>docker-compose ps

  638. </span><span class="line">            Name                          Command             State              Ports

  639. </span><span class="line">--------------------------------------------------------------------------------------------------

  640. </span><span class="line">fitterhappierdocker_redis_1     /entrypoint.sh redis-server   Up      0.0.0.0:6379-&gt;6379/tcp

  641. </span><span class="line">fitterhappierdocker_web_1       python app.py                 Up      0.0.0.0:80-&gt;5000/tcp, 80/tcp

  642. </span></code></pre></td></tr></table></div></figure>

  643. 

  644. <blockquote><p>Both processes are running in a different container, connected via Docker Compose!</p></blockquote>

  645. 

  646. <h2>Next Steps</h2>

  647. 

  648. <p>Once done, kill the processes via <code>docker-compose stop</code>, then run <code>boot2docker down</code> to gracefully shutdown the VM. Commit your changes locally, and then push to Github.</p>

  649. 

  650. <p>So, what did we accomplish?</p>

  651. 

  652. <p>We set up our local environment, detailing the basic process of building an <em>image</em> from a <em>Dockerfile</em> and then creating an instance of the <em>image</em> called a <em>container</em>. We tied everything together with Docker Compose to build and connect different containers for both the Flask app and Redis process.</p>

  653. 

  654. <p><strong>Now, let’s look at a nice continuous integration workflow powered by <a href="https://circleci.com/">CircleCI</a></strong>.</p>

  655. 

  656. <blockquote><p>Still with me? You can grab the updated code from the <a href="https://github.com/realpython/fitter-happier-docker/releases/tag/added-compose">repository</a>.</p></blockquote>

  657. 

  658. <h2>Docker Hub</h2>

  659. 

  660. <p>Thus far we’ve worked with Dockerfiles, images, and containers (abstracted by Docker Compose, of course).</p>

  661. 

  662. <p>Are you familiar with the Git workflow? Images are like Git repositories while containers are similar to a cloned repository. Sticking with that metaphor, <a href="https://hub.docker.com/">Docker Hub</a>, which is repository of Docker images, is akin to Github.</p>

  663. 

  664. <ol>

  665. <li>Signup <a href="https://hub.docker.com/account/signup/">here</a>, using your Github credentials.</li>

  666. <li>Then add a new automated build. And add your Github repo that you created and pushed to. Just accept all the default options, except for the “Dockerfile Location” – change this to “/web”.</li>

  667. </ol>

  668. 

  669. <p>Once added, this will trigger an initial build. Make sure the build is successful.</p>

  670. 

  671. <h3>Docker Hub for CI</h3>

  672. 

  673. <p>Docker Hub, in itself, acts as a continuous integration server since you can configure it to create an <a href="https://docs.docker.com/userguide/dockerrepos/#automated-builds">automated build</a> every time you push a new commit to Github. In other words, it ensures you do not cause a regression that completely breaks the build process when the code base is updated.</p>

  674. 

  675. <blockquote><p>There are some drawbacks to this approach – namely that you cannot push (via <code>docker push</code>) updated images directly to Docker Hub. Docker Hub must pull in changes from your repo and create the images itself to ensure that their are no errors. Keep this in mind as you go through this workflow. The Docker documentation is not clear with regard to this matter.</p></blockquote>

  676. 

  677. <p>Let’s test this out. Add an assert to the test suite:</p>

  678. 

  679. <figure class="code"><figcaption><span/></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class="line-number">1</span>

  680. </pre></td><td class="code"><pre><code class="python"><span class="line"><span class="bp">self</span><span class="o">.</span><span class="n">assertNotEqual</span><span class="p">(</span><span class="n">four</span><span class="p">,</span> <span class="mi">102</span><span class="p">)</span>

  681. </span></code></pre></td></tr></table></div></figure>

  682. 

  683. <p>Commit and push to Github to generate a new build on Docker Hub. Success?</p>

  684. 

  685. <p><strong>Bottom-line:</strong> It’s good to know that if a commit does cause a regression that Docker Hub will catch it, but since this is the last line of defense before deploying (to either staging or production) you ideally want to catch any breaks before generating a new build on Docker Hub. Plus, you also want to run your unit and integration tests from a <em>true</em> continuous integration server – which is exactly where CircleCI comes into play.</p>

  686. 

  687. <h2>CircleCI</h2>

  688. 

  689. <div class="center-text">

  690.   <img class="no-border" src="https://realpython.com/images/blog_images/docker-in-action/circleci.png" alt="circleci"/>

  691. </div>

  692. 

  693. <p><a href="https://circleci.com/">CircleCI</a> is a continuous integration and delivery platform that supports testing within Docker containers. Given a Dockerfile, CircleCI builds an image, starts a new container, and then runs tests inside that container.</p>

  694. 

  695. <p>Remember the workflow we want? <a href="https://realpython.com/blog/python/docker-in-action-fitter-happier-more-productive/#workflow">Link</a>.</p>

  696. 

  697. <p>Let’s take a look at how to achieve just that…</p>

  698. 

  699. <h3>Setup</h3>

  700. 

  701. <p>The best place to start is the excellent <a href="https://circleci.com/docs/getting-started">Getting started with CircleCI</a> guide…</p>

  702. 

  703. <p>Sign up with your Github account, then add the Github repo to create a new project. This will automatically add a webhook to the repo so that anytime you push to Github a new build is triggered. You should receive an email once the hook is added.</p>

  704. 

  705. <p>Next we need to add a configuration file to the root folder of repo so that CircleCI can properly create the build.</p>

  706. 

  707. <h3><em>circle.yml</em></h3>

  708. 

  709. <p>Add the following build commands/steps:</p>

  710. 

  711. <figure class="code"><figcaption><span/></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class="line-number">1</span>

  712. <span class="line-number">2</span>

  713. <span class="line-number">3</span>

  714. <span class="line-number">4</span>

  715. <span class="line-number">5</span>

  716. <span class="line-number">6</span>

  717. <span class="line-number">7</span>

  718. <span class="line-number">8</span>

  719. <span class="line-number">9</span>

  720. <span class="line-number">10</span>

  721. <span class="line-number">11</span>

  722. <span class="line-number">12</span>

  723. </pre></td><td class="code"><pre><code class="yaml"><span class="line"><span class="l-Scalar-Plain">machine</span><span class="p-Indicator">:</span>

  724. </span><span class="line">  <span class="l-Scalar-Plain">services</span><span class="p-Indicator">:</span>

  725. </span><span class="line">    <span class="p-Indicator">-</span> <span class="l-Scalar-Plain">docker</span>

  726. </span><span class="line">

  727. </span><span class="line"><span class="l-Scalar-Plain">dependencies</span><span class="p-Indicator">:</span>

  728. </span><span class="line">  <span class="l-Scalar-Plain">override</span><span class="p-Indicator">:</span>

  729. </span><span class="line">    <span class="p-Indicator">-</span> <span class="l-Scalar-Plain">pip install -r requirements.txt</span>

  730. </span><span class="line">

  731. </span><span class="line"><span class="l-Scalar-Plain">test</span><span class="p-Indicator">:</span>

  732. </span><span class="line">  <span class="l-Scalar-Plain">override</span><span class="p-Indicator">:</span>

  733. </span><span class="line">    <span class="p-Indicator">-</span> <span class="l-Scalar-Plain">docker-compose run -d --no-deps web</span>

  734. </span><span class="line">    <span class="p-Indicator">-</span> <span class="l-Scalar-Plain">python web/tests.py</span>

  735. </span></code></pre></td></tr></table></div></figure>

  736. 

  737. <p>Essentially, we create a new image, run the container, then run your unit tests.</p>

  738. 

  739. <blockquote><p>Notice how we’re using the command <code>docker-compose run -d --no-deps web</code>, to run the web process, instead of <code>docker-compose up</code>. This is because CircleCI already has Redis <a href="https://circleci.com/docs/environment#databases">running</a> and available to us for our tests. So, we just need to run the web process.</p></blockquote>

  740. 

  741. <p>With the <em>circle.yml</em> file created, push the changes to Github to trigger a new build. <em>Remember: this will also trigger a new build on Docker Hub.</em></p>

  742. 

  743. <p>Success?</p>

  744. 

  745. <p>Before moving on, we need to change our workflow since we won’t be pushing directly to the master branch anymore.</p>

  746. 

  747. <h3>Feature Branch Workflow</h3>

  748. 

  749. <blockquote><p>For these unfamiliar with the Feature Branch workflow, check out <a href="https://www.atlassian.com/git/tutorials/comparing-workflows/feature-branch-workflow">this</a> excellent introduction.</p></blockquote>

  750. 

  751. <p>Let’s run through a quick example…</p>

  752. 

  753. <h3>Create the feature branch</h3>

  754. 

  755. <figure class="code"><figcaption><span/></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class="line-number">1</span>

  756. <span class="line-number">2</span>

  757. </pre></td><td class="code"><pre><code class="sh"><span class="line"><span class="nv">$ </span>git checkout -b circle-test master

  758. </span><span class="line">Switched to a new branch <span class="s1">'circle-test'</span>

  759. </span></code></pre></td></tr></table></div></figure>

  760. 

  761. <h3>Update the app</h3>

  762. 

  763. <p>Add a new assert in <em>tests.py</em>:</p>

  764. 

  765. <figure class="code"><figcaption><span/></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class="line-number">1</span>

  766. </pre></td><td class="code"><pre><code class="python"><span class="line"><span class="bp">self</span><span class="o">.</span><span class="n">assertNotEqual</span><span class="p">(</span><span class="n">four</span><span class="p">,</span> <span class="mi">60</span><span class="p">)</span>

  767. </span></code></pre></td></tr></table></div></figure>

  768. 

  769. <h3>Issue a Pull Request</h3>

  770. 

  771. <figure class="code"><figcaption><span/></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class="line-number">1</span>

  772. <span class="line-number">2</span>

  773. <span class="line-number">3</span>

  774. </pre></td><td class="code"><pre><code class="sh"><span class="line"><span class="nv">$ </span>git add web/tests.py

  775. </span><span class="line"><span class="nv">$ </span>git commit -m <span class="s2">"circle-test"</span>

  776. </span><span class="line"><span class="nv">$ </span>git push origin circle-test

  777. </span></code></pre></td></tr></table></div></figure>

  778. 

  779. <p>Even before you create the actual pull request, CircleCI starts creating the build. Go ahead and create the pull request, then once the tests pass on CircleCI, press the Merge button. Once merged, the build is triggered on Docker Hub.</p>

  780. 

  781. <h3>Refactoring the workflow</h3>

  782. 

  783. <p>If you jump back to the overall workflow at the <a href="https://realpython.com/blog/python/docker-in-action-fitter-happier-more-productive/#workflow">top of this post</a>, you’ll see that we don’t actually want to trigger a new build on Docker Hub until the tests pass against the master branch. So, let’s make some quick changes to the workflow:</p>

  784. 

  785. <ol>

  786. <li>Open your repository on Docker Hub, and then under <em>Settings</em> click <em>Automated Build</em>.</li>

  787. <li>Uncheck the Active box: “When active we will build when new pushes occur”.</li>

  788. <li>Save.</li>

  789. <li>Click <em>Build Triggers</em> under <em>Settings</em></li>

  790. <li>Change the status to on.</li>

  791. <li>Copy the example curl command – i.e., <code>$ curl --data "build=true" -X POST https://registry.hub.docker.com/u/mjhea0/fitter-happier-docker/trigger/84957124-2b85-410d-b602-b48193853b66/</code></li>

  792. </ol>

  793. 

  794. <p>Now add the following code to the bottom of your <em>circle.yml</em> file:</p>

  795. 

  796. <figure class="code"><figcaption><span/></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class="line-number">1</span>

  797. <span class="line-number">2</span>

  798. <span class="line-number">3</span>

  799. <span class="line-number">4</span>

  800. <span class="line-number">5</span>

  801. </pre></td><td class="code"><pre><code class="yaml"><span class="line"><span class="l-Scalar-Plain">deployment</span><span class="p-Indicator">:</span>

  802. </span><span class="line">  <span class="l-Scalar-Plain">hub</span><span class="p-Indicator">:</span>

  803. </span><span class="line">    <span class="l-Scalar-Plain">branch</span><span class="p-Indicator">:</span> <span class="l-Scalar-Plain">master</span>

  804. </span><span class="line">    <span class="l-Scalar-Plain">commands</span><span class="p-Indicator">:</span>

  805. </span><span class="line">      <span class="p-Indicator">-</span> <span class="l-Scalar-Plain">$DEPLOY</span>

  806. </span></code></pre></td></tr></table></div></figure>

  807. 

  808. <p>Here we fire the <code>$DEPLOY</code> variable <em>after</em> we merge to master <em>and</em> the tests pass. We’ll add the actual value of this variable as an environment variable on CircleCI:</p>

  809. 

  810. <ol>

  811. <li>Open up the <em>Project Settings</em>, and click <em>Environment variables</em>.</li>

  812. <li>Add a new variable with the name “DEPLOY” and paste the example curl command (that you copied) from Docker Hub as the value.</li>

  813. </ol>

  814. 

  815. <p>Now let’s test.</p>

  816. 

  817. <figure class="code"><figcaption><span/></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class="line-number">1</span>

  818. <span class="line-number">2</span>

  819. <span class="line-number">3</span>

  820. </pre></td><td class="code"><pre><code class="sh"><span class="line"><span class="nv">$ </span>git add circle.yml

  821. </span><span class="line"><span class="nv">$ </span>git commit -m <span class="s2">"circle-test"</span>

  822. </span><span class="line"><span class="nv">$ </span>git push origin circle-test

  823. </span></code></pre></td></tr></table></div></figure>

  824. 

  825. <p>Open a new pull request, and then once the tests pass on Circle CI, merge to master. Another build is trigged. Then once the tests pass again, a new build will be triggered on Docker Hub via the curl command. Nice.</p>

  826. 

  827. <blockquote><p>Remember how I said that I configured Docker Hub to pull updated code to create a new image? Well, you could also set it up to where you can push images directly to Docker Hub. So once these test pass, you could simply push the image to update Docker Hub and then deploy to staging or production, directly from CircleCI. Since I have it set up differently, I handle the push to production from Docker Hub, not CircleCI. There’s positives and negatives to both approaches, as you will soon find out.</p></blockquote>

  828. 

  829. <h2>Conclusion</h2>

  830. 

  831. <p>So, we went over a nice development workflow that included setting up a local environment coupled with continuous integration via <a href="https://circleci.com/">CircleCI</a> (steps 1 through 6):</p>

  832. 

  833. <ol>

  834. <li>Code locally on a feature branch</li>

  835. <li>Open a pull request on Github against the master branch</li>

  836. <li>Run automated tests against the Docker container</li>

  837. <li>If the tests pass, manually merge the pull request into master</li>

  838. <li>Once merged, the automated tests run again</li>

  839. <li>If the second round of tests pass, a build is created on Docker Hub</li>

  840. <li>Once the build is created, it’s then automatically (err, automagically) deployed to production</li>

  841. </ol>

  842. 

  843. <p>What about the final piece – delivering this app to the production environment (step 7)? You can actually follow another one of my Docker blog <a href="https://blog.rainforestqa.com/2015-01-15-docker-in-action-from-deployment-to-delivery-part-3-continuous-delivery">posts</a> to extend this workflow to include delivery.</p>

  844. 

  845. <p>Comment below if you have questions. Grab the final code <a href="https://github.com/realpython/fitter-happier-docker/releases/tag/final-code">here</a>. Cheers!</p>

  846. 

  847. <hr/>

  848. 

  849. <p><strong>If you have a workflow of your own, please let us know. I am currently experimenting with <a href="https://github.com/saltstack/salt">Salt</a> as well as <a href="https://www.tutum.co/">Tutum</a> to better handle orchestration and delivery on Digital Ocean and Linode.</strong></p>

  850.   </article>

  851. </section>

  852. 

  853. 

  854. <nav id="jumpto">

  855.   <p>

  856.     <a href="/david/blog/">Accueil du blog</a> |

  857.     <a href="https://realpython.com/blog/python/docker-in-action-fitter-happier-more-productive/">Source originale</a> |

  858.     <a href="/david/stream/2019/">Accueil du flux</a>

  859.   </p>

  860. </nav>

  861. 

  862. <footer>

  863.   <div>

  864.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  865.     <p>

  866.       Bonjour/Hi!

  867.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  868.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  869.     </p>

  870.     <p>

  871.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  872.     </p>

  873.     

  874.     <p>

  875.       Voici quelques articles choisis :

  876.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  877.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  878.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  879.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  880.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  881.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  882.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  883.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  884.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  885.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  886.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  887.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  888.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  889.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  890.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  891.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  892.     </p>

  893.     <p>

  894.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  895.     </p>

  896.     <p>

  897.       Je ne traque pas ta navigation mais mon

  898.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  899.       conserve des logs d’accès.

  900.     </p>

  901.   </div>

  902. </footer>

  903. <script type="text/javascript">

  904.   ;(_ => {

  905.     const jumper = document.getElementById('jumper')

  906.     jumper.addEventListener('click', e => {

  907.       e.preventDefault()

  908.       const anchor = e.target.getAttribute('href')

  909.       const targetEl = document.getElementById(anchor.substring(1))

  910.       targetEl.scrollIntoView({behavior: 'smooth'})

  911.     })

  912.   })()

  913. </script>