![JS/css trasform& copy & pack & uglify
₋ ./travis_grunt.sh
if [ "$TRAVIS_BRANCH" == "master" ]; then
grunt ci
grunt test
fi
grunt.registerTask('ci',['shell:start
','shell:bower','shell:npm','concat',
'cssmin','browserify:prod','uglify','
shell:deploy']);
Gruntfile.js
(.travis.yml)](https://image.slidesharecdn.com/966dc984-6ae0-4c5b-a4c2-6c658ffd16c3-170106051745/85/ModemFrontEndops-34-320.jpg)
![Test
Gruntfile.js
grunt.registerTask('test', ['mochaTest:test']);
mochaTest: { test: { src: ['test/*.js']}}
var request = require('supertest');
var should = require('should');
describe('Basic Server Test',
function(){ this.timeout(10000); //timeout with 10 secs
it('Get / should respond 200 and check some keyword',
function(done){
request("http://127.0.0.1:3000")
.get('/')
.expect(200, done)
.end(function(err,res) {
res.text.should.containEql('/js/bundle.js');
done(err); });
/test/RootBasicTest.js (ServerSide Test)
Next](https://image.slidesharecdn.com/966dc984-6ae0-4c5b-a4c2-6c658ffd16c3-170106051745/85/ModemFrontEndops-35-320.jpg)
![HotDeploy
- ./travis_notify.sh
if [ "$TRAVIS_BRANCH" == "master" ]; then
echo "master deploy"
curl --data ""
http://ithomefedevops.cloudapp.net:3000/travis_web_hook
fi](https://image.slidesharecdn.com/966dc984-6ae0-4c5b-a4c2-6c658ffd16c3-170106051745/85/ModemFrontEndops-38-320.jpg)
![HotDeploy
server.js
app.post('/travis_web_hook',function(req, res) {
spawn('grunt', [],{cwd: '/home/azureuser/code'});
res.end();
});
Gruntfile.js
grunt.registerTask('default',['shell:tar',
'shell:rsync','shell:npm','shell:deploy']);](https://image.slidesharecdn.com/966dc984-6ae0-4c5b-a4c2-6c658ffd16c3-170106051745/85/ModemFrontEndops-39-320.jpg)
ModemFrontEndops
- 1. Moden FrontEnd Devops 104 兒童美術館自動部署分享 Kenny Lee
- 2. Kenny Lee 平台研發 Team Leader / Devops 專案經理 / cicisasa 架構規劃開發 網站軟體架構的狂熱分子，擅長各項新技術的研發導入 Email : microbean@gmail.com Github : https://github.com/KennyTw 104+ : http://plus.104.com.tw/李坤承
- 3. Today Topic cicisasa tech stack
- 5. 由於前端開發技術越來越複雜 So many Js & CSS
- 10. 使用自動化 降低人工操作的成本
- 11. 需要有好的 JS/CSS 框架
- 13. CI/CD 實現隨時都可以上線
- 19. FrontEnd Framework simple and quickly
- 22. Dependency manager require('modules') is simple
- 23. Continuous Integration most popular Perfectly integrates with GitHub
- 24. Template Engine Both Client/Server render
- 25. Test Framework Love “TJ Holowaychuk” (ejs..) supertest , should
- 26. Client/Server Avoid too many ajax request
- 28. • Zero downtime deployment project • Node cluster : Clustering in Node.js allows you to create separate processes which can share same server port • naught start --ipc-file server.ipc --stdout stdout.log --stderr stderr.log ./apps/server/server.js • naught deploy server.ipc var domain = require('domain') , serverDomain = domain.create() , gracefulExit = require('express-graceful-exit'); serverDomain.run(function() { var server = http.createServer(app); process.on('message', function(message) { if (message === 'shutdown') { gracefulExit.gracefulExitHandler(app,server,{log:true, suicideTimeout:6*1000}); server.js naught Next
- 30. Azure File Storage Web Server rsync Developer Next HotDeploy Deploy Procedure
- 31. Code Commit • HotDeploy • CI initial (Npm install , redis-db , test data) • JS/css trasform& copy & pack & uglify/minify • Test • Source Code transfer to Azure Next
- 32. CI initial (.travis.yml) services: - redis-server before_install: ₋ npm install -g grunt-cli ₋ npm install -g bower@1.4.1 ₋ npm install -g azure-cli ₋ npm install ₋ node travis_ini.js var redis = require('redis'); var db = redis.createClient(); db.set("data","helloworld"); Next
- 33. CI initial (.travis.yml) ₋ chmod -R 777 ./travis_notify.sh ₋ chmod -R 777 ./travis_grunt.sh ₋ chmod -R 777 ./travis_azure.sh ₋ chmod -R 777 ./app ₋ bower install
- 34. JS/css trasform& copy & pack & uglify ₋ ./travis_grunt.sh if [ "$TRAVIS_BRANCH" == "master" ]; then grunt ci grunt test fi grunt.registerTask('ci',['shell:start ','shell:bower','shell:npm','concat', 'cssmin','browserify:prod','uglify',' shell:deploy']); Gruntfile.js (.travis.yml)
- 35. Test Gruntfile.js grunt.registerTask('test', ['mochaTest:test']); mochaTest: { test: { src: ['test/*.js']}} var request = require('supertest'); var should = require('should'); describe('Basic Server Test', function(){ this.timeout(10000); //timeout with 10 secs it('Get / should respond 200 and check some keyword', function(done){ request("http://127.0.0.1:3000") .get('/') .expect(200, done) .end(function(err,res) { res.text.should.containEql('/js/bundle.js'); done(err); }); /test/RootBasicTest.js (ServerSide Test) Next
- 36. Test /test/RootJsTest.js (Client Side Test) var request = require('supertest'); var should = require('should'); var phantom = require('phantom'); describe('Basic Client Test with PhantomJS', function(){ var page; … it('get / should return data back and no js error', function (done) { page.set('onError', function(error) { done(error); }); page.open('http://127.0.0.1:3000', function (status) { page.evaluate( function () { return document.title; } , function (result) { if (result.length > 0) { done(); } else { done("document.title null"); } Next
- 37. SourceCode transfer to Azure - ./travis_azure.sh echo "tar files..." tar -zcvf "./source.tgz" "./" echo "Uploading files..." azure storage file upload -q "./source.tgz" deploy
- 38. HotDeploy - ./travis_notify.sh if [ "$TRAVIS_BRANCH" == "master" ]; then echo "master deploy" curl --data "" http://ithomefedevops.cloudapp.net:3000/travis_web_hook fi
- 39. HotDeploy server.js app.post('/travis_web_hook',function(req, res) { spawn('grunt', [],{cwd: '/home/azureuser/code'}); res.end(); }); Gruntfile.js grunt.registerTask('default',['shell:tar', 'shell:rsync','shell:npm','shell:deploy']);
- 41. QA
- 43. Q: Javascript Unit Test與 End to End Test的重要性， 是否都得進行？
- 44. Q: 自動部屬的學習門檻高嗎?
- 45. Q: 自動部署的可靠性
- 51. Thank You