エンジニアを目指す日常ブログ

日々勉強したことのメモ。間違っていたらコメント等で教えてください。

Gitのbranchを使って不具合発生前のアプリにロールバックする方法メモ

はじめに

今回の記事の目的

Gitで作っていたアプリがうまく動作しなくなったため、Gitのブランチを利用して「昨日の状態に戻す」ことをしてから、アプリを修正し、「修正版のアプリをマージする」ことで対処した。gitのbranchの作成方法やmergeの方法を学んだのでメモ。

そもそもGitを導入したときの話はこちら。 tomiko0404.hatenablog.com

前提

  • ローカルのブランチ
    • master : 昨日の時点で、「ヘッダまで完成」の状態でコミット済。
  • リモートブランチ
    • master :GitHub上に存在。同じく昨日の時点で、「ヘッダまで完成」の状態でコミット済。

この状態から作業を始めたところ、不具合が発生。どこが悪いか見当がつかず。

昨日の状態に戻す

まずは、昨日の状態に戻したい。ただ、今日作成した分も消したくない。

今日作成したコードを、別ブランチに退避する

以下の構成に変更する。

  • ローカルのブランチ
    • master : 昨日の時点で、「ヘッダまで完成」の状態でコミット済。
    • miss : 今日作った分。動作に不具合あり。
  • リモートブランチ
    • master :GitHub上に存在。同じく昨日の時点で、「ヘッダまで完成」の状態でコミット済。
    • miss : 今日作った分。動作に不具合あり。

ローカルに新ブランチを作成する。

git branch miss

によりブランチの作成。

git branch

を実行すると

$ git branch
* master
  miss

missブランチが作成できている。

今日作成したコードを新ブランチにコミットする。

ここで、作成したmissブランチにチェックアウトする。

git checkout miss

今回、ブランチを作成する前に手元のファイルを更新してしまっているが、この場合、新規のブランチには変更後のファイルを保ったままcheckoutできる模様。
(あとから別フォルダで試して確認した)

こちらのサイトにもその旨記載がある。
git で 後からブランチを作成する|プログラムメモ


この状態でステージングとコミット。

git add .
git commit -m "動作不具合あり"

GitHub上に新ブランチを作成する。

ブランチを選択する画面で、新しく作りたいブランチの名前を入力し、createを押す。(画像はブランチ名を「miss2」としている)

GitHub上でブランチを作成する
GitHub上でブランチを作成する

ローカルリポジトリから、pushしておく。

git push  origin miss

昨日の状態を復元する

今日作ったコードの退避ができたので、昨日の状態をもつmasterブランチにチェックアウトする。

git checkout master

これで、フォルダ上のコードが昨日の状態に復元された。

また

git checkout miss

とすれば最新の不具合ありバージョンと行き来することができる。

バグ解消後、マージする

確認したところ、styledコンポーネントの中に書いているCSSにスペルミスを発見。missブランチ上で、スペルミスを修正することで正しいアプリを完成させることができた。

元のブランチにマージする

missブランチが正しい状態になったためmasterブランチにマージする。

missブランチ上で正しいコードをコミットしたのち、masterブランチにチェックアウトした状態で、missブランチをマージする。

git merge miss

コンフリクトの解消

mergeを実行したところ、以下のエラーが発生。

CONFLICT (content): Merge conflict in src/App.js
Auto-merging src/App.css
CONFLICT (content): Merge conflict in src/App.css
Automatic merge failed; fix conflicts and then commit the result.

ソースコードを見てみると、以下の記載が自動で追加されている。

<<<<<<< HEAD
  return (
    <BrowserRouter>
      <HeaderOnly>
・・・
      </HeaderOnly>
    </BrowserRouter>
  );
=======
  return <Router />
>>>>>>> miss

どうやら、

<<<<<<< HEAD
 衝突した部分の、マージ先(masterブランチ)のコードに書かれていた内容
=======
  衝突した部分の、マージ元(missブランチ)のコードに書かれていた内容
>>>>>>> miss

ということらしい。そこで、

  return <Router />

以外の部分は削除した。

コミットしたうえで再度マージを実行。

git add .
git commit -m "コンフリクトの解消"
git merge miss

これでmasterブランチにマージが完了した。

リモートリポジトリにもpushして、完了。

git push origin master

GitHubのmasterブランチも最新にすることができた
GitHubのmasterブランチも最新にすることができた

おわりに

今回は後からブランチを作ってしまったが、本来であれば、問題なく動いているmasterブランチに対し、開発用のdevelopブランチで開発を進め、mergeするのが本来の使い方な気がする。

Gitは奥深そうなので再度勉強が必要そう。
第2話 ブランチとは?ポインタってどういう意味?作成・確認・切り替え方法【連載】マンガでわかるGit ~コマンド編~ - itstaffing エンジニアスタイル

感想

不具合が直ってよかった。じゃけえさんのAtomic-design講座完了。

じゃけえさんのAtomic-design講座完了
じゃけえさんのAtomic-design講座完了