20160707_virtualization with docker container basic for f2e.html

---

title: "前端工程師一定要知道的 Docker 虛擬化容器技巧" date: 2016-07-07 type: blog author: 凍仁翔 link: http://note.drx.tw/2016/07/virtualization-with-docker-container-basic-for-f2e.html layout: post comments: true

感謝強者同事 Ralph Hsu 的邀請，讓使用 Docker 不到一年的凍仁可以到 07/04 Javascript 設計模式讀書會 (11) 磨磨上台演講這門技藝，並分享些近來的學習心得。

這是一份從 IT Engineer 的角度寫給前端工程師的 Docker 入門簡報，包含了 Docker 觀念介紹、入門指令和一個小小的 End-to-End Test (簡稱 e2e test) demo。相信藉由一步步的等級提升，我們都可以早日成為大師，並提早下班的。(笑)

<script async class="speakerdeck-embed" data-id="5767db3221f448e3b2c0a6c28fcebeaf" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
▲ My sildes of Virtualization with Docker container (Basic) for F2E

這次凍仁參考了《Docker —— 從入門到實踐》、Docker 官方文件、appleboy 的 Docker 基礎介紹與實戰簡報等文件。也把先前《Keynote 大師班》一書中提到的一些進階技巧給練習了一遍，例如：彈出動畫、減法遮罩、Adobe Color CC 配色 ... 等。

為了串起 angular/angular-seed 的 End-to-End Test 和 Docker 的凍仁，還臨時研究了 selenium/standalone-chrome-debug 的 docker image。

感謝前人的教導，現在突然遇到簡報改需求也不怕，凍仁只需小小修改 Dockerfile 即可套用先前所寫的 #ansible playbook，這下明晚 demo 用的 #docker image 有著落了！#devops #presentation #takaojs1607

— 凍仁翔 (@chusiang_lai) 2016年7月3日

原先很傻很天真的以為只要用 Dockerfile 繼承別人的 image，再套用之前寫好的 chusiang.gitbook Ansible Role 就可以輕鬆解決這一回合；但在試後五六個版本後才發現只有 selenium/standalone-chrome-debug:2.48.2 才可正常的把 angular-seed e2e test 給 run 起來 ......。

<iframe width="560" height="315" src="https://www.youtube.com/embed/XqCt8gk9AdI" frameborder="0" allowfullscreen></iframe>
▲ angular-seed e2e tests demo on Docker (2:52)

錄完 Demo 影片後，完美主義的凍仁還加上了操作指令的字幕。完工時已過 05:30。演講後還被台下眼尖的友人 Hashman Lin 發現，該影片是當日凌晨 03:33 時錄製的，真令人難以啟齒啊。

好在最後有把 e2e test 的部份串起來，不然今晚的簡報就整個就弱掉了。

#selenium #autotest #docker https://t.co/u0bfWFLIa3

— 凍仁翔 (@chusiang_lai) 2016年7月4日

雖說早已接觸過 Git, GitHub, Docker, Dockerfile, Docker Hub (Automated Build), Jenkins, Selenium (Python) 等技藝，卻一直沒機會把它們都串起來實作自動化測試 (Autotest)。還記得當時在 Docker 裡把 angular-seed e2e test 跑起來時，還差點開心到跳起來呢！

「學到最多東習的人永遠都是那些肯主動站出來分享主題的人！」 https://t.co/LffN4gxYcO 這次凍仁學習到了 Dockerfile 繼承之美、簡易 e2e test、對 Keynote 簡報軟體的熟練度提升，還有消化了 Docker 的核心觀念。#可拋棄式玩具

— 凍仁翔 (@chusiang_lai) 2016年7月4日

本機自錄的部份，由於當時未設置好 OBS，錄錯了視窗。所以這是事後重錄簡報、剪接聲音後的版本。

<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/k5iwKUZY9tk" width="560"></iframe>
▲ Offline Show of virtualization with Docker container for F2E (basic)

希望這份簡報可以降低大家入門 Docker 的門壏。接下來是該收收心準備下一場 SA 群英會分享的簡報了，各位我們交大見！

2016-07-09

補上線上版簡報 － 前端工程師一定要知道的 Docker 虛擬化容器技巧 | iCloud Keynote。
<script async="" charset="utf-8" src="//latform.twitter.com/widgets.js"></script>
延伸閱讀：
★ 於 Ubuntu 14.04 安裝 Docker 1.9.1+
★ 在 OSX 10.11.4 安裝 Docker for Mac (v1.11.0-beta8)

相關連結：
★ 前端工程師一定要知道的 Docker 虛擬化容器技巧 | Speaker Deck
★ 前端工程師一定要知道的 Docker 虛擬化容器技巧 | slideshare
★ chusiang/takaojs1607 | Docker Hub
★ chusiang/takaojs1607-docker-demo: docker demo for takaojs meetup | GitHub
★ F2E x Docker | JS 設計模式讀書會 #11 共筆 | HackMD
★ Find & run the whalesay image | Docker
★ 四個常用的簡報影像設計方法（下） | 簡報。小學堂
★ 3399CC 顏色主題作者 meteoric_cry - Adobe Color CC

資料來源：
★ 《Docker —— 從入門到實踐­》正體中文版 | GitBook
★ Docker Overview | Docker
★ 前端自動化測試之 Selenium docker 環境 debug 指南 | 蹤影 Smlsun
★ Docker selenium 記錄——Selenium conf 2015 » 社區 » TesterHome
★ start | npm Documentation