Непрерывная интеграция для frontend

Константин Кривленя

goo.gl/2fXwj1

git pull origin master

Uncaught ReferenceError: myCoolFunction is not defined

Как избежать

			npm test
		
			/ci/cool-module.js:3
			return myCoolFunction();
			       ^
			ReferenceError: myCoolFunction is not defined
			...
		
			
const coolModule = require('../cool-module')
const assert = require('assert')
describe('test cool module', () => {
  it(`Answer to the Ultimate Question of Life,
				the Universe, and Everything`, () => {
    assert.equal(42, coolModule.doSomething())
  })
})
			
		
Tabs vs spaces

Как избежать

			npm run lint
		
			/ci/cool-module.js
			6:2 error  Unexpected tab character  no-tabs
			6:3 error  Expected indentation of 4 spaces but found 2 tabs  indent
			✖ 2 problems (2 errors, 0 warnings) 
		

Размер сборки

Имя файла Размер до Размер после
bundle.js 72.1 kB 340 kB

Изменения

			const $ = require('jquery');
			$('someId').hide();
		

Как избежать

			npm run check-file-size
		
			Size of bundle is huge. Expected 100 but actual 102
		

Git Hooks

			.git/pre-commit
		
			npm test
			npm run lint
			npm run check-file-size
		

nlf/precommit-hook

			...
			"pre-commit": ["lint", "test"]
		

Отключаем pre-commit hook

			git commit --no-verify -m "Я знаю, что я делаю"
		

Setup CI

			.travis.yml
		
			
language: node_js
node_js:
  - "6"
script:
  npm run travis
			
		
			.package.json
		
			
{
…
	"scripts": {
	…
	"travis": "npm run test && npm run lint && npm run check…"
	…
	}
}
			
		
fail build
fail build
fail build
			
...
env:
  matrix:
  - TEST_TYPE=test
  - TEST_TYPE=lint
  - TEST_TYPE=size
script:
  - |
    if [ "$TEST_TYPE" = test ]; then
      npm test
    elif [ "$TEST_TYPE" = size ]; then
      npm run check-file-size
    elif [ "$TEST_TYPE" = lint ]; then
      npm run lint
    fi
			
		
fail build
fail build

Jenkins

jenkins view
old setup
jenkins view
			
pipeline {
  agent {
    dockerfile {
      filename 'Dockerfile'
    }
  }
  stages {
    stage('build') {
      steps {
        sh 'npm install'
      }
    }
    ...
  }
}
			
		
blue ocean
pipeline
failed pipeline
failed test
settings pipeline

	docker run -d --name jenkins -p
	8080:8080 -v $PWD/jenkins:/var/jenkins_home
	-v /var/run/docker.sock:/var/run/docker.sock
	-t logimethods/blueocean
	

Другие CI

Бенефиты

Раннее выявление багов

Избежание затяжных релизов

Артефакты сборок

Прививание дисциплины в команде

Один шаг к непрерывной доставке

Снятие метрик для кода

Покрытие кода

Сложность кода

Недостатки

Настройка системы

Не всегда отображает реальную ситуацию

Долгий отклик

Нестабильность системы

Не информативность

Вопросы?