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
今回、missブランチを作成する前に、masterブランチ上でファイルを更新してしまっている（masterにコミットはしていない）。
しかし、masterブランチをコピーして作成したmissブランチにcheckoutしても、更新内容が消えるわけではなく、更新内容を保った状態でmissブランチcheckoutできる模様。
こちらのサイトにもその旨記載がある。自分でも後から試して確認した。
git で 後からブランチを作成する｜プログラムメモ
この状態でmissブランチに対しステージングとコミットをする。
git add . git commit -m "動作不具合あり"
GitHub上に新ブランチを作成する。
ブランチを選択する画面で、新しく作りたいブランチの名前を入力し、createを押す。（画像はブランチ名が「miss2」となっているが実際は「miss」。）
ローカルリポジトリから、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
おわりに
今回は後からブランチを作ってしまったが、本来であれば、問題なく動いているmasterブランチに対し、開発用のdevelopブランチで開発を進め、mergeするのが本来の使い方な気がする。
Gitは奥深そうなので再度勉強が必要そう。
第2話 ブランチとは？ポインタってどういう意味？作成・確認・切り替え方法【連載】マンガでわかるGit ～コマンド編～ - itstaffing エンジニアスタイル
感想
不具合が直ってよかった。じゃけえさんのAtomic-design講座完了。
