2016 Microsoft Azure 雲的萬物論研討會．Spooky@Trunk-Studio（謝宗穎） - Web Full Stack 開發經驗，熟悉 JAVA 以及 Javascript 開發，對開發流程優化有高度興趣，提倡 TDD 開發方式，以及透過 CI Jenkins 進行自動化，利用 Docker 輔助開發或測試環境建置，現為創科資訊共同創辦人兼研發經理 Node.js / Docker 社群講者 2014 / 2015 Container Summit 技術高峰講師 - 身處各種前端技術百花齊放的 2016 年末，作為一位合格的 DevOps 如何使用適當的技術將自己從繁瑣的建置、與測試流程中解放出來已經成為一門非常重要的課題。 本分享將為大家帶來介紹如何使用 Microsoft 的雲服務 --- Azure並搭配 Docker 來搭建專屬於你的 CI/CD 管家 Jenkins，從此以後揮別肝鐵人生活，踏上 DevOps 多采多姿的奇幻旅程！ 想要瞭解更多 Container 技術、Jenkins 的使用訣竅，或者是各式各樣的前後端新知與 APP 設計/規劃的解決方案嗎？請立即訂閱**創科資訊的粉絲專頁**吧！ - Trunk-Studio 官方網站 http://trunk-studio.com/ - Trunk-Studio Facebook 粉絲專頁 https://www.facebook.com/trunk.studio.tw/

1. Jenkins + Docker
@Azure Container Service
持續整合
前端⾃自動化測試

2. SPOOKY
蹤影
trunk.studio/website
trunk.studio/blog
trunk.studio/facebook

3. DevOps

5. CI / CD

6. Docker On Azure

7. Jenkins Use Docker

8. Docker Run Jenkins
Jenkins Use Docker
全⾯面啟動

10. Create
Docker Machine
On Azure
~ docker-machine create -h
Usage: docker-machine create [OPTIONS] [arg...]

11. Create Docker Machine
• driver azure
• Required:
• --azure-subscription-id: Your Azure Subscription ID.
• Optional:
• --azure-size: Size for Azure Virtual Machine. [?]
docker-machine create
--driver azure
--azure-size Standard_A1_v2
--azure-subscription-id XXXXX
azure-docker

12. Azure Subscription Id

13. docker-machine create
--driver azure
--azure-size Standard_A1_v2
--azure-subscription-id XXXXX
azure-docker
Running pre-create checks...
(azure-docker) Completed machine pre-create checks.
Creating machine...
(azure-docker) Querying existing resource group. name="docker-machine"
(azure-docker) Resource group "docker-machine" already exists.
(azure-docker) Configuring availability set. name="docker-machine"
(azure-docker) Configuring network security group. name="azure-docker-firewall" location="westus"
(azure-docker) Querying if virtual network already exists. name="docker-machine-vnet" location="westus"
(azure-docker) Creating virtual network. name="docker-machine-vnet" location="westus"
(azure-docker) Configuring subnet. name="docker-machine" vnet="docker-machine-vnet" cidr="192.168.0.0/16"
(azure-docker) Creating public IP address. static=false name="azure-docker-ip"
(azure-docker) Creating network interface. name="azure-docker-nic"
(azure-docker) Creating storage account. name=“…” location="westus"
(azure-docker) Creating virtual machine. location="westus" size="Standard_A1_v2" username="docker-user"
osImage="canonical:UbuntuServer:16.04.0-LTS:latest" name="azure-docker"
Waiting for machine to be running, this may take a few minutes...
Detecting operating system of created instance...
Waiting for SSH to be available...
Detecting the provisioner...
Provisioning with ubuntu(systemd)...
Installing Docker...

14. Resources

15. Active
Docker Machine

16. List Docker Machine
NAME ACTIVE DRIVER STATE URL
azure-docker - azure Running tcp://104.42.230.152:2376
~ docker-machine ls

17. Active Docker Machine
export DOCKER_TLS_VERIFY="1"
export DOCKER_HOST=“…”
export DOCKER_CERT_PATH=“…”
export DOCKER_MACHINE_NAME="azure-docker"
# Run this command to configure your shell:
# eval $(docker-machine env azure-docker)
~ eval $(docker-machine env azure-docker)
~ docker-machine ls
~ docker-machine env azure-docker
NAME ACTIVE DRIVER STATE URL
azure-docker * azure Running tcp://104.42.230.152:2376

18. Docker Run
Jenkins With Docker

19. ~ docker run
--name jenkins-dind
--privileged
--detach
--restart always
--publish 8080:8080
--publish 5900:5900
--publish 5001:5001
--volume /home/docker-user/jenkins:/var/lib/jenkins
agileworks/jenkins-dind
• name：Container 識別⽤用
• privileged：root 權限
• detach：背景執⾏行行
• restart always：作業系統重啟時，Container 將⾃自動重啟

20. ~ docker run
--name jenkins-dind
--privileged
--detach
--restart always
--publish 8080:8080
--publish 5900:5900
--publish 5001:5001
--volume /home/docker-user/jenkins:/var/lib/jenkins
agileworks/jenkins-dind
• publish 8080：使⽤用於 Jenkins
• publish 5900：使⽤用於 VNC
• publish 5001：使⽤用於 Website
• volume：持久化 Jenkins Home

21. ~ docker run
--name jenkins-dind
--privileged
--detach
--restart always
--publish 8080:8080
--publish 5900:5900
--publish 5001:5001
--volume /home/docker-user/jenkins:/var/lib/jenkins
agileworks/jenkins-dind
• 使⽤用 Docker 運⾏行行 Jenkins 並且 Jenkins 運⾏行行 Docker
• https://github.com/smlsunxie/docker-jenkins-dind

22. Setting
Azure Static IP

25. Setting
Azure Firewall

31. Check Docker Version

32. Scenario

35. Demo

37. Debug With VNC
~ open vnc://104.42.230.152:5900

39. Dev & Prod
Environment
Dockerfile

40. Development / Test
FROM mhart/alpine-node:5.12.0
RUN apk add --update git
RUN apk add --update build-base libffi-dev ruby ruby-dev
&& gem install sass compass --no-ri --no-rdoc
&& apk del build-base libffi-dev ruby-dev
&& rm -rf /var/cache/apk/*
RUN apk add --no-cache make gcc g++ python && rm -rf /var/cache/apk/*
FROM agileworks/sails_sample_env
COPY ./ /sailsSample
WORKDIR /sailsSample
EXPOSE 5011
CMD /bin/sh -l -c 'npm start --production'
Production

41. Continuous Integration
Flow
Jenkinsfile

42. stage('build'){
sh "docker build -t agileworks/sails_sample_env dockers/node"
sh "docker-compose run --rm build"
}
stage('test'){
sh "docker-compose run --rm --service-ports --name debug test"
sh "docker-compose run -d --rm --service-ports --name dev dev"
try{
def url = 'http://localhost:5001/'
input message: "Does staging at $url look good? ", ok: "ok! build production image."
}finally{
sh "docker rm -f dev"
}
}
stage('production'){
sh "docker build -t agileworks/sails_sample_prod ."
try{
sh "docker rm -f sails_sample_prod"
} catch(e) {}
sh "docker run -d --name sails_sample_prod -p 8800:5011 --restart always agileworks/sails_sample_prod"
}
建置環境與專案安裝
⾃自動化測試與 UAT
產品發布與部署

43. stage('build'){
sh "docker build -t agileworks/sails_sample_env dockers/node"
sh "docker-compose run --rm build"
}
stage('test'){
sh "docker-compose run --rm --service-ports --name debug test"
sh "docker-compose run -d --rm --service-ports --name dev dev"
try{
def url = 'http://localhost:5001/'
input message: "Does staging at $url look good? ", ok: "ok! build production image."
}finally{
sh "docker rm -f dev"
}
}
stage('production'){
sh "docker build -t agileworks/sails_sample_prod ."
try{
sh "docker rm -f sails_sample_prod"
} catch(e) {}
sh "docker run -d --name sails_sample_prod -p 8800:5011 --restart always agileworks/sails_sample_prod"
}
建置環境與專案安裝
⾃自動化測試與 UAT
產品發布與部署

44. test:
container_name: debug
image: agileworks/sails_sample_env
command: "npm run test-e2e-docker"
expose:
- "1338"
ports:
- "5001:5001"
working_dir: /sailsSample
volumes:
- ./:/sailsSample
depends_on:
- "e2e-env"
module.exports = {
port: 4444,
host: "e2e-env",
browser: 'firefox',
screenshotPath: '/app/test/e2e/report/',
webdriverio: {
baseUrl: 'http://debug:1338',
waitforTimeout: 5000,
},
};
e2e-env:
container_name: e2e-env
image: selenium/standalone-firefox-debug
expose:
- "4444"
ports:
- “5900:5900" VNC
Preview
docker-compose.yml
chimp config
webDriver API
test

45. browser.windowHandleSize({width:1280,height:900}).url('/');
browser.click('#login');
browser.setValue('#identifier', 'admin')
browser.setValue('#password', 'admin')
browser.click('#submit-button');
browser.element('#logout-link').state.should.be.equal('success');
#identifier
#password
#submit-button
#login

46. 結論

47. • 使⽤用 Azure 透過 docker-machine 快速建置 Docker 運
⾏行行環境。
• 使⽤用 Azure ⽅方便便管理理容器與監控效能。
• 使⽤用 Docker 運⾏行行 Jenkins，讓持續整合更更有彈性。
• 使⽤用 Docker 模擬 CI 環境，⽅方便便除錯與⾃自動化建置。
• 透過 Docker 讓⾃自動化測試環境即使沒有桌⾯面環境也可以
進⾏行行前端⾃自動化測試。