Introduction to Continuous Delivery (CD) with GitLab

This tutorial will allow you to quickly get a feel for teamwork using GitLab. Overall, it's easier to get started with DevOps / CD practice with GitLab than with other products because GitLab is an all-in-one solution.

During this tutorial, we

set up basic project management at GitLab.com;
Let's create a continuous delivery pipeline
let's spend several cycles of work with GitLab Flow
CI/CD GitLab

Git;
Node.js;
React;
Docker;

- . "!". .

- " ". habr' , " !".

, -. . , "" "", GitLab , .

" " , create-react-app.

React? -, UI- JavaScript, . - create-react-app .

! .

git clone https://github.com/ntaranov/gitlab-cd-react

cd gitlab-cd-react

create-react-app.

create-react-app, , .

! npm ,

npm install

npm ci

npm install

! ""

npm run build

, ./build

, JavaScript CSS.

npm run test -- --coverage --watchAll=false --forceExit

! "", -, - .

npm start

, ./build

- — . , , :

- ;
- code review;
- ;
- ;
- ;
- ;
- ;
- ;
.

, , GitLab. , GitLab.com.

GitLab job runners, "" "" GitLab merge request' . GitLab .

️ GitLab.com

GitLab , Kanban- .

GitLab

GitLab.com GitLab .

! GitLab.com, https://gitlab.com

.

GitLab push

.

! :

git push https://gitlab.com/<user name>/gitlab-cd-react

<user name>

— GitLab.com.

gitlab-cd-react

GitLab.com.

! https://gitlab.com/<user name>/gitlab-cd-react

.

-, .

️

! Issues , New Issue . . " ".

   ,    .
- [ ]  
- [ ]  
- [ ]    
- [ ]    GitLab Flow
- [ ]

, . . Submit issue.

, , . GitLab, , Markdown .

!

. Edit 0 Assignees .

, — . .. , .

! , . , . " "

, .

, 3 . 6 .

!

. Issues -> List Issues -> Board Close issue.

(workflow) , . Continuuos Delivery, Kanban DevOps , .

value streams. value streams . , .

Open
Dev
Dev: done
QA
Closed

Open. (pull) Dev. , , Dev: done.

? Lean, CD, Kanban DevOps, (work center) . , , "" " ".

, QA , "" QA .

" , - — , Staging !" — . , GitLab - Kubernetes.

️

GitLab (labels). , .

!

. Issues -> Labels , New label . 3 , .

Dev
Dev: done
QA

GitLab .

! ,

Closed.

Kanban-.

GitLab Kanban-. . Kanban, Scrum . .

! .

! Issues -> Boards . . - Open Closed. Add list .

Dev
Dev: done
QA

, , " ".

! Issues -> Boards

Open Dev. , .

. Dev.

! , Dev: done.

QA. , , , , .

! QA. -. , . . Closed .

— To-Do List( ). , . , .

(Continuous Delivery) GitLab.

️ GitLab

, GitLab.com (shared runners) docker executors. , .

! issue

Dev.

! (CI/CD pipeline). .gitlab-ci.yaml

.

.

gitlab-cd-react
Project overview / Details Repository .
New file . .
File name .gitlab-ci.yml

, Template , Apply a template. , . Bash

— bash, .

. .gitlab-ci.yml

.

, GitLab — .

image: busybox:latest

before_script:
  - echo "Before script section"
  - echo "For example you might run an update here or install a build dependency"
  - echo "Or perhaps you might print out some debugging details"

after_script:
  - echo "After script section"
  - echo "For example you might do some cleanup here"

build1:
  stage: build
  script:
    - echo "Do your build here"

test1:
  stage: test
  script:
    - echo "Do a test here"
    - echo "For example run a test suite"

test2:
  stage: test
  script:
    - echo "Do another parallel test here"
    - echo "For example run a lint test"

deploy1:
  stage: deploy
  script:
    - echo "Do your deploy here"

image: busybox:latest

image

docker jobs . GitLab Docker Hub, . Node.js.

image: node:14-alpine

before_script

after_script

. , Node.js.

! .

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - .npm/

before_script:
  - npm ci --cache .npm --prefer-offline

, — .npm

.

${CI_COMMIT_REF_SLUG}

, Git.
before_script

package-lock.json

, .npm

.

, .gitlab-ci.yml

.

after_script

.

build1

, - :

build1:
  stage: build
  script:
    - echo "Do your build here"

stage: build

. stage

, . , .

! :

build1:
  stage: build
  script:
  - npm run build
  artifacts:
    expire_in: 1 week
    paths:
    - 'build/'

npm ci

package-lock.json

node_modules

.
npm run build

React-.
artifacts

. Webpack create-react-app build

. expires_in

.

stage: test

test1:
  stage: test
  script:
    - echo "Do a test here"
    - echo "For example run a test suite"

test2:
  stage: test
  script:
    - echo "Do another parallel test here"
    - echo "For example run a lint test"

! test2

, test1

:

test1:
  stage: test
  script:
  - "CI=true npm test" 
  dependencies:
  - build1

npm test

, .
dependencies

test1

build1

.

deploy1:
  stage: deploy
  script:
    - echo "Do your deploy here"

. GitLab Kubernetes . . . GitLab, , React GitLab Pages, GitLab.com.

! job deploy1

.

pages:
  stage: deploy
  script:
  - mv public _public
  - mv build public
  only:
  - master
  artifacts:
    paths:
    - public
  dependencies:
  - build1

deploy1

pages

GitLab GitLab Pages.

2 .

mv public _public

public

, create-react-app. GitLab Pages public

.
mv build public

— - GitLab Pages .

! .gitlab-ci.yml

, "Add CI/CD pipeline" Commit message, master

.

!

Dev: done.

GitLab Flow

Git — -. Git -, , . . Git, Git workflow.

GitLab Flow GitLab :

Git(Git workflow) ;
, GitLab ;
merge request`;
GitLab Flow.

Git

, GitLab Flow

- ( Git master

);
merge request ( pull request) ;
(, ..) ;
" ", ;
;
c feature branch " " " ".

CD Git trunk based development, GitLab. , GitLab GitLab Flow , .

GitLab

, .

Instance administrator — , .
Owner — , - .
Maintainer — , .
Developer — Maintainer .
Reporter — , .
Guest — issue , .

, .

Merge requests

Merge requests — GitLab. , merge request, , code review. Merge request , .

! GitLab Flow

, Dev.

!

QA.

, , . , .

. , . , . 2 , .

! src/App.js

(Repository -> Files, Edit) .

import {useEffect} from 'react';

Commit message , , "Add React imports". Target branch master

Commit changes.

, master

. workflow , GitLab Flow. GitLab (protected branches). , , .

! Settings -> Repository. Protected Branches.

master

, .

force push
push Maintainers
merge Maintainers

! Allowed to push No one.

! , src/App.js

.

function App() {

  return (

  useEffect(() => {
    alert('Consent to cookies and everything!');
  }, []);

// ...other code
function App() {
  useEffect(() => {
    alert('Consent to cookies and everything!');
  }, []); 

  return (
// ...other code

"Add the annoying popup" commit message.

. Git, .

! master

Commit changes.

You are not allowed to push into this branch

. ! . .

! master

feature-cookies-consent

. Start a new merge request with these changes . . merge request'.

merge request' .
Assignee Reviewer Unassigned

.
.

Submit merge request

Assignee — merge request' ,
Reviewer .

merge request', . . .

(feature-cookies-consent

master

).
pipeline feature-cookies-consent

.
merge request .
Merge merge request' , master

.
, , merge commit'.
:
- ;
- .
Close merge request, merge request master

.

"" merge request', .

Changes, , . , .

, merge requests , .

… . window.alert

Node.js - .

, (Continuous Deployment) — , . — .

! src/App.js

, . , window.alert

, . feature-cookies-consent

.

// ...other code
function App() {
  useEffect(() => {
    if (typeof process === 'undefined' || process.release === undefined) {
      alert('Consent to cookies and everything!');
    }
  }, []); 

  return (
// ...remaining code

"Ensure running in a browser" commit message. Target Branch feature-cookies-consent

.

! merge request Add the annoying popup

Merge . Delete source branch .

GitLab Flow feature branches . .

! Repository -> Graph feature-cookies-consent

master

.

src/App.js

master

.

! GitLab Flow

Create merge request. , merge request. feature-notifications-consent

. source branch master

.

merge request' .

merge request' Draft:

. merge request . as is . Mark as draft .

! . merge request' Open in Web IDE. . src/App.js

.

      Notification.requestPermission().then(function(result) {
        alert(`You ${result} notifications`);
      });

      alert('Consent to cookies and everything!');

! Commit . , commit message "Add the notifications users want". Commit.

! merge request, , . Mark as ready merge request'. Merge Merge when pipeline succeeds .

! "" , .

! ,

Closed .

, , GitLab .

CI/CD GitLab

. .

, - "" , . Agile , . , DevOps (time to market, TTM) . : .

GitLab . .

! Analytics. Value stream. Lean DevOps . , value stream.

Issue — " " .. Milestone.
Plan — , . ", ".
Code — , , merge request'a.
Test — .
Review — merge request' .
Staging — merge request .

Issue, Plan, Code, Review Staging, (TTM).

Analytics -> Repository , code coverage ( ), (, , ).

Analytics -> CI/CD pipelines, "" pipelines.

!

(CD) GitLab - .

Introduction to Continuous Delivery (CD) with GitLab

Introduction to Continuous Delivery (CD) with GitLab

️ GitLab.com

GitLab

️

️

️ GitLab

GitLab Flow

Git

GitLab

Merge requests

CI/CD GitLab

!

More articles: