CI/CDをkatacodaで体験（初心者向け） - Part7(Finding Bugs)

CI/CD入門

このぺーじでは、katacodaと呼ばれる「ブラウザから無料で勉強用のインスタンスを起動できるWebサービス」を利用してCI/CDを実践します
内容は上記リンクに沿うので、不明点があればそちらへどうぞ

Gitのバージョン管理について - Scenario 7 - Finding Bugs

ここでは、CI/CDとして欠かせないGitによるバージョン管理について学習します
このシナリオで学習することをさっと確認する場合は概要を確認
理解に間違い等がございましたら、ぜひご指摘ください

概要

• git diff <hashA> <hashB>で特定のバージョンを比較

• git log <option>で様々なログの表示が可能
  • option = --oneline：一行で各commitコメントを確認
  • option = -p：↑に加えて「誰が」、「いつ」、「どのような」変更を加えたか確認
  • option = --grep="(hoge)"：特定のcommitコメントが入ったバージョンのみ表示
• git bisectで誤りのあるcommitを二分探索
  1. git bisect startで探索開始
  2. git bisect bad/good <hash>で正誤を定義
  3. badおよびgood内のランダムなバージョンで正誤を確認
  4. 正誤に対して、git bisect bad/goodで評価
  5. 3,4を繰り返して誤りのあるcommitを発見
  6. git bisect resetで探索終了
• git blameでファイルの特定のセクション（各行）で誰が最後に作業したか確認

Git Diff Two Commits

git diffは最も簡単なコミットの差分を出力する方法
同じファイルに対してバージョンごとの差分を見る場合は以下のような使い方をする

$ git diff HEAD~2 HEAD
ESC[1mdiff --git a/list.html b/list.htmlESC[m
ESC[1mindex 96e99d0..9f53aec 100644ESC[m
ESC[1m--- a/list.htmlESC[m
ESC[1m+++ b/list.htmlESC[m
ESC[36m@@ -2,4 +2,6 @@ESC[m
 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>ESC[m
 <li>Aliquam tincidunt mauris eu risus.</li>ESC[m
 <li>Vestibulum auctor dapibus neque.</li>ESC[m
ESC[32m+ESC[mESC[32m<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in,   //変更箇所
ESC[32m+ESC[mESC[32m<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu   //変更箇所
 </ul>ESC[m

HEAD~2は、現在作業をしているbranch（HEAD）から二つ前のバージョンを示している
つまりここでは、現在作業をしているbranchとそのbranchが二つ前にcommitした際の結果を比較
git diffの結果を理解するため、git blame <hash> fileというコマンドで各バージョンごとの変遷を確認

$ git blame HEAD list.html
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 1) <ul>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 2) <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 3) <li>Aliquam tincidunt mauris eu risus.</li>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 4) <li>Vestibulum auctor dapibus neque.</li>
eddb7535 (Katacoda Scenario 2020-10-19 11:01:16 +0000 5) <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, p
93701df5 (Katacoda Scenario 2020-10-19 11:01:16 +0000 6) <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu v
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 7) </ul>
$ git blame HEAD~1 list.html
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 1) <ul>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 2) <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 3) <li>Aliquam tincidunt mauris eu risus.</li>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 4) <li>Vestibulum auctor dapibus neque.</li>
eddb7535 (Katacoda Scenario 2020-10-19 11:01:16 +0000 5) <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, p
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 6) </ul>
$ git blame HEAD~2 list.html
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 1) <ul>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 2) <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 3) <li>Aliquam tincidunt mauris eu risus.</li>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 4) <li>Vestibulum auctor dapibus neque.</li>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 5) </ul>
$ git blame HEAD~3 list.html
fatal: bad revision 'HEAD~3'

上記の結果からlist.html現在も合わせて3つのバージョンを持っていることが判明
第一世代では、<ul>~</ul>までの5行がhash値"b22862a"というバージョンで管理されている
第二世代では、<li>Morbi~の5行目がhash値"eddb7535"というバージョンで管理されている
第三世代では、<li>Praesentの6行目がhash値"93701df5"というバージョンで管理されている

Git Log

ここでは、git logを用いて該当レポジトリ内での変遷を様々な粒度で確認
git log --onelineはコミットメッセージとhash値を簡潔に確認

$ git log --oneline
ESC[33m93701dfESC[mESC[33m (ESC[mESC[1;36mHEAD -> ESC[mESC[1;32mmasterESC[mESC[33m)ESC[m Final Item
ESC[33meddb753ESC[m New Item
ESC[33mb22862aESC[m Initial commit of the list

git log -pは上記の内容に加え、「誰が」、「いつ」、「どのような」変更を加えたかlessコマンドで表示
オプションとして-n 2を付けることで、現在のhash値から何世代前まで表示するか指定可能（この場合、HEAD,HEAD~1）

$ git log -p
ESC[33mcommit 93701df5e4a964c2bf483e0d171528684699d0f4ESC[mESC[33m (ESC[mESC[1;36mHEAD -> ESC[mESC[1;32mmasterESC[mESC[33
Author: Katacoda Scenario <[e-mail]>
Date:   Mon Oct 19 11:01:16 2020 +0000

    Final Item

ESC[1mdiff --git a/list.html b/list.htmlESC[m
ESC[1mindex def310d..9f53aec 100644ESC[m
ESC[1m--- a/list.htmlESC[m
ESC[1m+++ b/list.htmlESC[m
ESC[36m@@ -3,4 +3,5 @@ESC[m
 <li>Aliquam tincidunt mauris eu risus.</li>ESC[m
 <li>Vestibulum auctor dapibus neque.</li>ESC[m
 <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a.</li>ESC[m
ESC[32m+ESC[mESC[32m<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros e
 </ul>ESC[m

ESC[33mcommit eddb7535cb88cd4000673585e2981be06cfe2375ESC[m
Author: Katacoda Scenario <[e-mail]>
Date:   Mon Oct 19 11:01:16 2020 +0000

    New Item

git log --grep="Initial"はコミットの文字列で表示するコミットを制限することができる

$ git log --grep="Initial"   //"Initial"とコメントされているcommitを表示
ESC[33mcommit b22862af361944b5ff365b094011c875c798f4efESC[m
Author: Katacoda Scenario <[e-mail]>
Date:   Mon Oct 19 11:01:16 2020 +0000

    Initial commit of the list

Git Bisect

git bisectは誤った変更等、間違いを含んだcommitを特定することが可能
今回のシナリオでは、list.html内のhtmlタグが未入力となってcommitされたバージョンを特定する

0.初めにgit logで状態を確認

$ git  log --oneline
ESC[33mbbb550fESC[mESC[33m (ESC[mESC[1;36mHEAD -> ESC[mESC[1;32mmasterESC[mESC[33m)ESC[m Adding Pel
ESC[33mefb15afESC[m Adding Quisque
ESC[33m9c5469bESC[m Adding Vestibulum
ESC[33m063f446ESC[m Final Item
ESC[33m4167e39ESC[m New Item
ESC[33m2ae3793ESC[m Initial commit of the list

1.git bisect startで探索を開始

2.git bisect bad (HEAD)で間違った結果を定義
間違った変更がいつcommitされたか探索するために、「正しい結果のcommit」、「間違った結果のcommit」を定義する必要がある
ここでは、「間違った結果のcommit」と定義

3.git bisect good HEAD~5
ここでは、「正しい結果のcommit」と定義
hash値は正しいと確証が得られるバージョンであればより新しいバージョンでも問題ない

4.「正しい結果のcommit」と「誤った結果のcommit」の間のランダムなバージョンに対して結果の正誤を確かめる

Bisecting: 2 revisions left to test after this (roughly 1 step)
[063f4464b45cbc3f2bb3c30ca33ef3c579b3318a] Final Item   //ランダムにHEAD~3のバージョンが選択された
$ cat list.html   //htmlタグ記述漏れの確認（目視）
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</li>
</ul>
$ git bisect good   //結果が正しいことをgitに伝える

HEAD~3時点では、list.htmlに記述漏れは存在しない（＝HEAD~4以前の探索は不要）

5.4の繰り返し

Bisecting: 0 revisions left to test after this (roughly 1 step)
[efb15afb8108df6760557a183592321cd803d9fc] Adding Quisque   ////ランダムにHEAD~1のバージョンが選択された
$ cat list.html
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</li>
Vestibulum auctor dapibus neque   //htmlタグの記述漏れを発見
<li>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed.</li>
</ul>
$ git bisect bad   //結果が間違っていることをGitに伝える

4と5の探索から誤りの混入したcommitはHEAD~3とHEAD~1の間
すなわち、HEAD~2の"Adding Vestibulum"のcommit時と断定

6.探索終了

$ git bisect reset
Previous HEAD position was 9c5469b Adding Vestibulum
Switched to branch 'master'
$ git branch -va
* ESC[32mmasterESC[m bbb550f Adding Pellentesque

確認のため、以下に各バージョンのlist.htmlを順に表記
一つずつバージョンを遡って確認するより、手間がかからないことを実感できるはず

$ git blame HEAD list.html
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000  1) <ul>
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000  2) <li>Lorem ipsum dolor sit amet, consectet
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000  3) <li>Aliquam tincidunt mauris eu risus.</l
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000  4) <li>Vestibulum auctor dapibus neque.</li>
3dd56b54 (Katacoda Scenario 2020-10-19 13:04:18 +0000  5) <li>Morbi in sem quis dui placerat ornare
59b68ac6 (Katacoda Scenario 2020-10-19 13:04:19 +0000  6) <li>Praesent dapibus, neque id cursus fau
6c0c7e6a (Katacoda Scenario 2020-10-19 13:04:42 +0000  7) Vestibulum auctor dapibus neque
3abf424c (Katacoda Scenario 2020-10-19 13:04:42 +0000  8) <li>Quisque sit amet est et sapien ullamc
45b0dc5d (Katacoda Scenario 2020-10-19 13:04:42 +0000  9) <li>Pellentesque fermentum dolor</li>
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 10) </ul>
$ git blame HEAD~1 list.html
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 1) <ul>
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 2) <li>Lorem ipsum dolor sit amet, consectetu
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 3) <li>Aliquam tincidunt mauris eu risus.</li
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 4) <li>Vestibulum auctor dapibus neque.</li>
3dd56b54 (Katacoda Scenario 2020-10-19 13:04:18 +0000 5) <li>Morbi in sem quis dui placerat ornare.
59b68ac6 (Katacoda Scenario 2020-10-19 13:04:19 +0000 6) <li>Praesent dapibus, neque id cursus fauc
6c0c7e6a (Katacoda Scenario 2020-10-19 13:04:42 +0000 7) Vestibulum auctor dapibus neque
3abf424c (Katacoda Scenario 2020-10-19 13:04:42 +0000 8) <li>Quisque sit amet est et sapien ullamco
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 9) </ul>
$ git blame HEAD~2 list.html
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 1) <ul>
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 2) <li>Lorem ipsum dolor sit amet, consectetu
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 3) <li>Aliquam tincidunt mauris eu risus.</li
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 4) <li>Vestibulum auctor dapibus neque.</li>
3dd56b54 (Katacoda Scenario 2020-10-19 13:04:18 +0000 5) <li>Morbi in sem quis dui placerat ornare.
59b68ac6 (Katacoda Scenario 2020-10-19 13:04:19 +0000 6) <li>Praesent dapibus, neque id cursus fauc
6c0c7e6a (Katacoda Scenario 2020-10-19 13:04:42 +0000 7) Vestibulum auctor dapibus neque
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 8) </ul>
$ git blame HEAD~3 list.html
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 1) <ul>
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 2) <li>Lorem ipsum dolor sit amet, consectetu
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 3) <li>Aliquam tincidunt mauris eu risus.</li
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 4) <li>Vestibulum auctor dapibus neque.</li>
3dd56b54 (Katacoda Scenario 2020-10-19 13:04:18 +0000 5) <li>Morbi in sem quis dui placerat ornare.
59b68ac6 (Katacoda Scenario 2020-10-19 13:04:19 +0000 6) <li>Praesent dapibus, neque id cursus fauc
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 7) </ul>
$ git blame HEAD~4 list.html
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 1) <ul>
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 2) <li>Lorem ipsum dolor sit amet, consectetu
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 3) <li>Aliquam tincidunt mauris eu risus.</li
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 4) <li>Vestibulum auctor dapibus neque.</li>
3dd56b54 (Katacoda Scenario 2020-10-19 13:04:18 +0000 5) <li>Morbi in sem quis dui placerat ornare.
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 6) </ul>
$ git blame HEAD~5 list.html
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 1) <ul>
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 2) <li>Lorem ipsum dolor sit amet, consectetu
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 3) <li>Aliquam tincidunt mauris eu risus.</li
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 4) <li>Vestibulum auctor dapibus neque.</li>
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 5) </ul>

Git Blame

git blameはファイルの特定のセクション（各行）で誰が作業したかを知ることができます
また、行数が多いファイルに対しては、確認したい行を指定することが可能です

$ git blame list.html
^2ae3793 (Katacoda Scenario 2020-10-19 13:41:30 +0000  1) <ul>
^2ae3793 (Katacoda Scenario 2020-10-19 13:41:30 +0000  2) <li>Lorem ipsum dolor sit amet, consectet
^2ae3793 (Katacoda Scenario 2020-10-19 13:41:30 +0000  3) <li>Aliquam tincidunt mauris eu risus.</l
^2ae3793 (Katacoda Scenario 2020-10-19 13:41:30 +0000  4) <li>Vestibulum auctor dapibus neque.</li>
4167e39f (Katacoda Scenario 2020-10-19 13:41:30 +0000  5) <li>Morbi in sem quis dui placerat ornare
063f4464 (Katacoda Scenario 2020-10-19 13:41:30 +0000  6) <li>Praesent dapibus, neque id cursus fau
9c5469be (Katacoda Scenario 2020-10-19 13:41:47 +0000  7) Vestibulum auctor dapibus neque
efb15afb (Katacoda Scenario 2020-10-19 13:41:47 +0000  8) <li>Quisque sit amet est et sapien ullamc
bbb550f2 (Katacoda Scenario 2020-10-19 13:41:47 +0000  9) <li>Pellentesque fermentum dolor</li>
^2ae3793 (Katacoda Scenario 2020-10-19 13:41:30 +0000 10) </ul>
$ git blame -L 6,8 list.html   //6行目から8行目を確認
063f4464 (Katacoda Scenario 2020-10-19 13:41:30 +0000 6) <li>Praesent dapibus, neque id cursus fauc
9c5469be (Katacoda Scenario 2020-10-19 13:41:47 +0000 7) Vestibulum auctor dapibus neque
efb15afb (Katacoda Scenario 2020-10-19 13:41:47 +0000 8) <li>Quisque sit amet est et sapien ullamco