前端工程師一定要知道的 Docker 虛擬化容器技巧

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

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


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

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


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


▲ angular-seed e2e tests demo on Docker (2:52)

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


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


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


▲ Offline Show of virtualization with Docker container for F2E (basic)

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

2016-07-09


補上線上版簡報 - 前端工程師一定要知道的 Docker 虛擬化容器技巧 | iCloud Keynote

延伸閱讀:
於 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

Popular Articles

sudo 指令使用說明