BFT名古屋 TECH BLOG

日々の業務で得た知識を所属するエンジニアたちがアウトプットしていきます。

【GitLab】【Sourcetree】開発超★初心者が GitLab + Sourcetree で最小限のバージョン管理を始めてみる 第2回(全2回)

はじめに

こんにちは!
BFT名古屋支店・インフラ女子(?)のやまぐちです。

前回に引き続きGitLabの非公開レポジトリへSourcetreeというGitクライアントソフトを用いてSSHでアクセスすることで成果物や資料を共有する方法をご紹介します。

f:id:bftnagoya:20210524110844p:plain:w550
前回の記事では全2回の第1回目として

  • Sourcetreeのインストール・設定
  • GitLabからのクローン

を紹介し、本記事では

  • Sourcetreeを使って成果物・資料を操作
  • Slack連携部分の紹介

を行います。

前提条件

第一回目の記事の設定、テストファイルの配置が完了していること。

bftnagoya.hateblo.jp

また必須ではありませんが「Visual Studio Code」を使うと変更が見やすい(開発自体もしやすくなる)ので、前もってダウンロードしておいて損はありません。

azure.microsoft.com

Sourcetreeを使ってGitLabのレポジトリを操作する

それでは早速やってみましょう。前回の記事でGitLabのレポジトリの内容をそのまま作業端末上(ローカル)にコピー(クローン)した状態です。

ローカルレポジトリにファイルを新規作成してみる

ローカルレポジトリを更新すると、GitLabにあるリモートレポジトリにも更新するようにわかりやすくナビしてくれます。

これは「テストです.txt」というファイルを「99_テスト用」フォルダに作成し保存すると、Sourcetreeでは自動的にその更新を検知し、以下の画像のように [ 作業ツリーのファイル ]ペインに更新したファイルパス、 右側のペインにはその更新内容(日本語は文字化けします)が表示されます。
f:id:bftnagoya:20210531170520p:plain:w550

当然ながらこの時点ではGitLabのリモートレポジトリ上へ同期はされません。Sourcetreeでの変更をリモートレポジトリへ反映させるには、① ステージング、② コミット、③ プッシュという3つの操作が必要です。
f:id:bftnagoya:20210531170708p:plain:w550

この3つの操作はイメージとしてこのように捉えるといいと思います。

  • ステージング
    • 変更したファイルの中でリモートレポジトリに反映しようと思っている(変更が完了した)ファイルを「次コミットするぞ」という印付け
    • 編集中のファイルが複数あるとして、まだ反映しないものもあるのでその区別のために使う
  • コミット
    • 変更内容を他の人にもわかるようにファイルの情報としてレポジトリに登録する
    • ローカルリポジトリへコミットした内容がそのままリモートレポジトリでも確認できる(他の人も確認できる)
  • プッシュ
    • ローカルリポジトリの変更(コミットしたもの)をリモートレポジトリに反映させる

ではさっそく① ステージングです。
Sourcetreeでステージングさせたいファイルを選択し、インデックスを追加([ 全てインデックスに追加 ]、[ 選択をインデックスに追加 ]またはプラスマーク)すると左上のペイン [ インデックスにステージしたファイル ] に移動します。
f:id:bftnagoya:20210531170842p:plain:w550

次に② コミットです。
ここにはどんな変更をしたのか、を書いて他の人にも見えるようにするのが一般的です。一番下のペインにコメントを書いて [ コミット ] を押します。
f:id:bftnagoya:20210531170935p:plain:w550

すると一番上の [ プッシュ ] に①と数字が出ました。プッシュすべきファイルが1つあるよ、ということです。
f:id:bftnagoya:20210531171005p:plain:w550

では最後に③ プッシュをしましょう。
操作は簡単、上の [ プッシュ ] を押すだけです。

リモートブランチのどこに反映させるかを選択する画面が表示されます。今はmasterしかないのでこのままでプッシュして構いません。
f:id:bftnagoya:20210531171043p:plain:w550

GitLab側でも更新されていることが確認できました(GitLabで更新されたことを確認できるのは管理者のみです)。
f:id:bftnagoya:20210531171152p:plain:w550

今回は新規作成しましたが、既存のファイルを更新しても同じ流れです。簡単ですね!

誰かが更新した分をローカルリポジトリに反映する

みんなで更新できる、ということはもしかして変更がかぶっちゃうことがあるかもしれないですよね。そんな時Sourcetreeではどのように見えるのでしょうか。

まずは先ほどの「テストです.txt」に追記します。
また、別の作業端末に導入したSourcetreeでも「テストです.txt」に追記し、先にリモートレポジトリにプッシュしておきます。これで、今追記している「テストです.txt」は、リモートレポジトリにあるものが最新となり、古いバージョンのものに追記してしまっている状態になります。
f:id:bftnagoya:20210531171244p:plain:w500

この状態でプッシュしてみるとどうなるのでしょうか。 ステージング、コミット、プッシュと先ほどと同じように操作すると下図のようなエラーが表示されます。更新があった時にそれとわからずに上書きはできない仕組みになっていますね。
f:id:bftnagoya:20210531171326p:plain:w500

エラー文を見るとローカルリポジトリが古くなっていることが原因とのこと。プッシュする前にプルしてねと出ています。ではプルをしてみましょう。よく見たら上のメニューでプルに1の数字が見えます。
f:id:bftnagoya:20210531171404p:plain:w550

プルするとまたしてもエラーが表示されます。どうやら更新中のファイルの最新がリモートレポジトリにあるのでどうするのかを衝突したファイルのメニューから選択しろと言ってます。
f:id:bftnagoya:20210531171445p:plain:w550

メモ帳で開くとこんな感じで表示されます。
f:id:bftnagoya:20210531171520p:plain:w500

Visual Studio Codeで開くと色分けされるのとどちらが自分の更新なのかもわかるので便利です。
f:id:bftnagoya:20210531171609p:plain:w550

しかし、テキストエディタから編集すると結構面倒なのでSourcetree上でできる限り解決します。ポイントは [ ファイルステータス ] メニューで競合のあるファイルを表示~を選択することです。 左下ペインのファイル名を選択すると、右ペインに自分の変更した内容(<<<<<<HEADから=======の間)、リモートレポジトリにあった更新内容(=======から>>>>>> e59~)がわかります。
f:id:bftnagoya:20210531171931p:plain:w550

右クリックのメニューから [ 競合を解決 ] でどうするかを選択します。今回は自分の更新量より相手の更新量が多かったので相手の変更を正としてその後に自分の変更を再度追加することにします。
f:id:bftnagoya:20210531172105p:plain:w550
f:id:bftnagoya:20210531172131p:plain:w550

競合がなくなったので何も表示されなくなりました。
f:id:bftnagoya:20210531172207p:plain:w550

再度自分の追記したかった内容でファイルを更新します。
[ 保留中のファイルを表示~ ] に変更することを忘れないようにしてください。

これでコミット、プッシュができるようになりました。 感覚でやろうとするとなかなかうまくいかず、悪戦苦闘しました…。

Slackと連携するとどうなるか

GitLabとSlackを連携し、変更があった場合にSlackの特定チャンネルへ通知するように設定しています。ここでは設定方法は置いておいて、Slackでどんな風に見えるかをご紹介します。

実装した経緯:誰かが何かを更新をした場合に「何を更新したのか」が分かるようにする。

Slackへ連携された内容を見ると、

① どこのブランチに
② 誰が
③ どんなコミットをしたか

ということが確認できます。残念ながら「どのファイルに対して」ということはわからないので、コミット内容に「○○.txtに」という対象を含めるのがよさそうですね。
f:id:bftnagoya:20210531172541p:plain:w550

ちなみにここで表示される② 誰が の情報はSourcetreeのユーザ名です。変更は、 [ ツール ] - [ オプション ] の [ 全般 ] タブで変更できます。最初のユーザ登録時の情報ですね。
f:id:bftnagoya:20210531174659p:plain:w500

終わりに

衝突が発生した時の解決方法はちゃんと手順を踏む必要があり、結構迷いました。まだまだ仕組みを理解できていない証拠ですね。勉強あるのみ!

あとはブランチを切って開発、マージという流れも必要になって来るのでまた別記事で書こうと思います。
ここまで読んでいただきありがとうございました~!