Git入門（GitBucket と SourceTree の準備）

最近 Gitを手軽に利用できる環境が揃ってきました　(^^)

ローカル環境で XAMPP を使って Webの開発を行っていたのですが、Git を使用したバージョン管理を導入したかったので調べてみました

バージョン管理は、これまで subversion を少し使用していただけで、GitやGithub等の名前は聞いたことがありましたが、難しそうな感じがしたのでなんとなく避けていました

最近は Github 等のサービスを利用されている方も多いので、分散型のバージョン管理システムの知識も必要でしょうし、どんなものかは、とりあえず使用してみないとわかりません

GitBucket という Gitクローンが Github と同じような感じで使用でき、インストールが簡単に出来るらしいということで Git 未経験の私としてはなにかビビッときたわけで頑張って導入してみたいと思います (^^)

XAMPP と GitBucket で Gitサーバーを作ってみる

Git とは

その前に Git とはなんぞやと言うと…

ちょっと長めですが、動画形式なのでドキュメントを読むより頭に入ってきます (^^)

いつやるの？Git入門 on Vimeo

他には、下記を参照して頂ければ Gitの雰囲気をつかめると思います

subversion と Git の違い

バージョン管理は、subversionを少し使っているだけなので、誤解している部分もあるかも知れませんが、Subversionは、少人数向きのバージョン管理システムで、限定した範囲においてはシンプルで使いやすいと思います

サーバーを用意しなければなりませんが、プライベートネットワーク内の数人で共同に作業しているなら、作業者は近くにいるわけですから問題が起きてもコミュニケーションを取りながら対応できます
※作業を分散して進めるためにブランチを作って、後でマージするという方法もありますが、私は使ったことはありませんしそのあたりの評判も今ひとつのようです (^_^;)

一方、Git は分散型バージョン管理なので中央集権型の subversion とは、使い方が異なります。ブランチを活用して、作業を平行に進め後でマージするというのが基本的な手法のようです

Gitは、リポジトリがローカル側とリモート側にありますので、Subversion の延長線上で使用しようとすると、単に手順が増えた使いにくいバージョン管理システムに見えるかも知れません

ですが、このローカルリポジトリがあるということは、ローカル側だけでバージョン管理が出来るということです。リモート（共有）リポジトリとは、その必要が生じた時に同期させれば良いということです

どのように同期させるかも、各々の事情に応じて柔軟に対応できるので運用ルールを決めて同期をとればOKです

Gitならではの使い方があると思いますので、とりあえず subversion のことは忘れて使ってみるのが習得の早道かと思います

GitBucket リモート側の準備

ここではプライベートネットワーク内に XAMPP の Tomcat を使用して GitBucket を動作させ、リモートリポジトリを作成して見たいと思います

GitBucket

作者は日本の方のようですが、英語で公開されています
日本語の情報としては作者さんのブログ等が参考になります

情報はまだ少なめですが、今後は爆発的に使われるようになる気がします　(^^)

ダウンロード

GitBucket の the release page から gitbucket.war 最新版をダウンロードします

デプロイ（インストール）

Windows上のXAMPPを使用した場合を紹介します

デプロイというのは、ダウンロードした gitbucket.war ファイルを tomcat の webapps フォルダーに設置することです

エクスプローラで warファイルをコピーすればOKです

実行

warファイルをコピーしたら、XAMPP の Tomcat のスタートボタンをクリックすれば実行してくれます (^^)

Tomcatで Gitbucket の配置に失敗する場合

この記事自体を書いてからだいぶたってしまい、あちこち古い情報もあるのですが2018/3 に久しぶりにGitbucket を更新した時の失敗について、だれかのお役に立つかもしれないので紹介します (^_^;)

Gitbucket は更新頻度が高いのですが、しばらく更新していなくて気が付くと1年以上古いバージョンのままです

現在の最新版は 4.22.0 ですので、久しぶりに更新すると 404 not found となり Gitbacket へアクセスできなくなりました

それではということでバージョンを少しずつ変えていくと 4.9.0 では問題なくアクセス出来るが 4.10.0 からアクセス出来なくなります

localhost:8080 はアクセスできるが localhost:8080/gitbucket はアクセスできません

4.10.0 で何か大きな変更が入ったのかもと思いググると、開発言語やフレームワークを Scala 2.12、Scalatra 2.5、Slick 3.2へバージョンアップした旨の記述があるのでこれの何かしらの影響というのはわかったのですが、どうすればいいかは結局わからずじまい

どこかで Tomcat8 にすればというのを見たので試しに tomcat7 から Tomcat8.5 へ更新してみましたがやはりアクセスできません

tomcat のエラーログを見てもメッセージからは何が悪いかわかりません (>_<)

なかばあきらめつつログを見ていたら

あれ　Javaが古い？

Javaは定期的に更新していたはずでしたが、インストールしてあった古いJDKがありそちらが使われているようです　なんてこった

そこで JDK をアンインストールしてみると Gitbucket へアクセスできるようになりました　(^^)

ちなみに tomcat を 7 に戻してもアクセスできたので、結局、Javaが古かっただけというおちでしたが丸一日悩んでしまいました

Gitbucket にアクセスできない場合は、Javaが古い可能性があります。Javaのランタイムを最新版に保っていても、古いJDKがインストールされていてそちらが使われている場合もあるので注意です

動作確認

ブラウザで http://localhost:8080/gitbucket にアクセスしてみます

GitBucket の画面が表示されました。OKなようです

プライベートネットワークからアクセス

とりあえずここでは、プライベートネットワーク内の共有データとして扱っていきたいので、localhost ではなく IP アドレスまたはコンピュータ名を指定して使用することとします

IPアドレスの固定化

IPアドレスは固定化しておいたほうが都合がよいので、自分の環境に合わせて XAMPP がインストールされているコンピュータのIPアドレスを固定化して下さい

参考：http://lan-pc.pc-beginner.net/windows_7/7_ip_static.html

ネットワーク上の別PCからアクセス確認

プライベートネットワークからのアクセス時は、XAMPP をインストールしてあるパソコンのIPアドレスを指定します
あるいは Windows のネットワークブループ内で使用しているコンピュータ名を使ってもアクセス出来ると思います

http://192.168.1.100:8080/gitbucket のような感じでIPアドレス指定すればアクセス出来ます

アクセス出来ない場合

xampp/apache/conf/extra/httpd-xampp.conf ファイルの設定を確認して下さい
#
# New XAMPP security concept
#
<LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
    Order deny,allow
    Deny from all
    Allow from ::1 127.0.0.0/8 
        fc00::/7 10.0.0.0/8 172.16.0.0/12 192.168.0.0/16 
        fe80::/10 169.254.0.0/16

    ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
</LocationMatch>
一番下のあたりに、こんな記述がされていれば、おそらくLANからのアクセスは出来るはずですが、　Allow from ::1 127.0.0.0/8　しかなければ 192.168.xx.xx からのアクセスは禁止されています

上記のようにするか、Allow from all を指定すれば、アクセスできるようになるはずです

GitBucket にユーザーアカウント作成

デフォルト状態で、ユーザ名「root」、パスワード「root」で管理者登録されているので、root でサインインします

アカウント作成

レンチアイコンの Administration をクリックして User Management から New User を作成します

ユーザー情報と権限を指定して作成してみます

作成できたようです

グループの作成

とりあえず一人だけですがグループも作ってみます (^^)

グループ名 celtislab として、メンバーに enomoto を登録

グループが作成されました

リモートリポジトリ作成

ここまで root のままで作業していたので、サインアウトしてから、作成したユーザーアカウントでもう一度サインインします

右上のアカウントが切り替わりました

次にリモートリポジトリ（共有）を作成してみます
緑色で表示されている New repository ボタンをクリックします

試しに現在作成中の wordpress テーマ Celtis-one 用にリポジトリを作ってみます

Create repository ボタンをクリック

まだ中身は空ですが、これでファイルをバージョン管理するための器ができました (^^)

リポジトリ管理者の変更

作成したリポジトリはユーザーアカウントに紐付けられているので、管理者をグループに変更してみます

リポジトリの管理者を他のユーザーやグループに変更するのは Danger Zone から行こないます

グループ管理下のリポジトリに切り替わりました

これでグループに属していれば読み書きが自由に出来ると思います

複数で開発する場合は、プロジェクト毎にグループを定義するのがわかりやすそうです (^^)

ここまでで、GitBucket 側で行う2つの作業について紹介しました

ユーザー及びグループの登録管理
リモート（共有）リポジトリの作成管理

これ以外にも GitBucket は様々な機能があり、月に1回程度の割合で更新されています

その他の機能について少しだけ紹介しておきます

リポジトリの削除

リポジトリの削除は、Settings の Danger Zone から行うことが出来ます

フォーク

これは、Gitというよりは、GitHub の機能として知られています
書き込み権限のないリポジトリに対して、複製して自分の管理下の別リポジトリとする事が出来ます（別途紹介予定）

issues（イシュー）

プロジェクト管理ツールではチケットと呼ばれている場合もあります
質問や提案、バグレポート、プルリクエスト等のコミニュケーションやマイルストーンやコミットによる簡易的なプロジェクト管理を行うことが出来ます（別途紹介予定）

データ保存場所

GitBucketのリポジトリ等のデータは、XAMPPを起動したユーザのホームディレクトリに作成された .gitbucket というディレクトリに格納されています

バックアップはこのディレクトリをコピーして保存すればOKです

GitBucketの更新

バージョンアップする場合は、Tomcatを停止させて、warファイルを差し替えるだけとのこと

とりあえずGitリモート側はここまでで、今度は Gitのローカル環境側を構築していきます

Git バージョン管理をするためのローカル側の準備

ローカル側では、Git for Windows（msysGit）, SouceTree の2つのツールを使用します。

Git for Windows

Bash を使用してコマンドラインから Git を操作出来る環境を作成します

今回はコマンドラインを使う予定はありませんが、頭の片隅で Git コマンドを少し意識しておいたほうが理解が深まります (^^)

インストール

http://msysgit.github.io/

Download ボタンをクリックします

2014/5/7 時点の最新版 Git-1.9.2-preview20140411.exe です

基本的にはデフォルトのままインストールしていけばOKです

Windows Explorer Integration は、右クリック時にコンテキストメニューへ追加される表示です、GUIツールの SourceTree を主に使用していくので外しておいたほうがスッキリしますがお好みで選択して下さい

コマンドラインから Git を使う場合の設定は、デフォルトの Git Bash only にしておきます

テキストファイルの行末の改行コードの扱いについての設定です

チェックアウト Windows style (CR,LF), コミット Unix style (LF)
チェックアウトそのまま, コミット Unix style (LF)
チェックアウトそのまま, コミットそのまま

クロスプラットホームでの扱いを考えるコミットした時は常に LF に統一されたほうが整合性が取りやすいので１か２ということだと思うのですが、作業時に LF で作業可能なら２、LF だと表示が崩れるなら１ということですかね

参考：書式設定と空白文字

ちょっと悩みますが、私の場合はプログラム開発での使用なのでエディタ上でどちらでも扱えるので２にしておきましたが、ご自身の環境に合わせて選択して下さい

これでインストールオプションの設定が終わったのでインストールを進め、終了させます

SourceTree

次に SourceTree という人気のGUI ツールをインストールします

http://www.sourcetreeapp.com/

Windows用、Mac用がありますので、Download ページからご自身の環境に合わせたものをダウンロードします

2014/5/20 現在の最新版は、SourceTreeSetup_1.5.2.exe です

インストール

基本的にはデフォルトでインストールしていけばOKです

インストールが終了したら起動してみます

設定

Mercurial が見つからないのでどうするか選択するダイアログが表示されます

今回は Git を使い Mercurial は使用するつもりがないので使いたくないをクリック

ユーザー情報

Git はコミット時にユーザ名とメールアドレスが必要なので、そのデフォルト値を設定します

とりあえずここでは、GitBucket に登録したユーザー名とEメールをセットします

改行の扱いは Git for Windows（msysGit）で行っているのでここのチェックは外しておきます
ライセンスに同意をチェックして次へをクリックします

SSHクライアントの設定

とりあえずスキップしておきます

ホスティングサービスの登録

BitBucket や Github のアカウントを既に持っているなら設定します
今回は、GitBucket を利用するのでスキップします

これで SourceTree が起動しました

ローカルリポジトリ

まだリポジトリがない状態なので、SourceTreeを使用して、新しくローカルリポジトリを作成してみます

リポジトリ新規作成

画面左端の 新規/クローンを作成する ボタンをクリックします

ここでバージョン管理を行うファイルを格納するフォルダーを 保存先のパス として指定します。指定するフォルダーは、新規に空のフォルダーを作成しても良いし、既にファイルがある既存のフォルダーを指定することも可能です

保存先パスに指定したフォルダーが 作業ツリー となり、このディレクトリにローカルリポジトリが作成されます

バージョン管理は、作業ツリー（指定ディレクトリとそのサブディレクトリ）単位に行われます

ここでは例として作成中の wordpress のテーマ celtisone のフォルダーを選択して、作成ボタンをクリックします

作業ディレクトリに空のローカルリポジトリが作成されました

なにが行われたかというと作業フォルダ内にバージョン管理用のリポジトリ（ .git フォルダー）が生成されましたが、作業フォルダー内に存在するファイルはまだそのリポジトリには登録されていないということです

ステージ(Index）エリアへ追加

作業ツリーのファイルをバージョン管理の対象ファイルとしてリポジトリに追加してみます

まずは、作業ツリー内でステージに追加するファイル（コミットに関係するファイルだけ）を選択します

今回は最初の登録で除外するファイルもないので、左にある矢印が２つ並んでいるアイコンをクリックして全てのファイルをステージエリアに追加しました

ステージ(Index）エリアとは

Git のバージョン管理は、コミット単位で行われ、元々がコマンドラインから操作するためのものでしたので、コミットに関連するファイルだけをまとめてグループ化するための、ステージというエリアを設けることで扱いやすくなっています

GUIベースのツールからしか操作しないのであれば、もう少し別のやり方もあるとは思いますが、コマンドラインからの操作を考えると優れた方法であります

また、ステージエリアがあるお陰でファイル単位でなく、修正箇所（HUNK）単位にコミットすることも可能です

リポジトリへコミット

次にステージ（index）からローカルリポジトリへコミットしてみます
ステージに登録した追加や修正、削除内容をコミットしてローカルリポジトリに記録します

コミットボタンをクリック

コメントを記入して、コミットするファイルに間違えがないか確認してコミットします

コミットメッセージは、出来るだけ具体的にその内容（機能追加、バグ対応等）を記述します
また、コミットに関係しない修正ファイルまで含めてしまうと後々バージョン履歴に支障をきたすので、そのあたりも意識しながら適正にコミットしていきます

バージョン管理の履歴はコミット単位が基本となります。漠然とコミットしてると履歴を追いかけるときにわけがわからなくなるので気をつけましょう (^_^;)

とりあえずここではコミットだけ（プッシュは行いません）を行います

ログ

コミットした内容は、ログから確認することが出来ます

ブランチ master をクリックして画面下のログのタブを選択すると、ログが見れるので今コミットしたものが表示されます

プッシュ

次にリモートリポジトリにプッシュしてみます

事前に GitBucketで作成してあるリモートリポジトリ celtisone にプッシュしてみます

まだ、このリモートリポジトリは、SourceTreeに登録されていないので、画面右上の設定をクリックして先に登録を行います

追加ボタンをクリックします

デフォルトリモートをチェックして、URLパスに GitBucket 上のリモートリポジトリの URL をセットします

詳細タブでユーザー情報等に間違いがないかを確認します

それでは今登録したリモートリポジトリにプッシュしてみます
プッシュ ボタンをクリックするとダイアログが表示されます

まだリモートリポジトリがひとつしかないので自動的にそれが選択されているようです
プッシュ対象の master をチェックして OK をクリックします

ユーザー名とパスワード入力します

リモートリポジトリにプッシュされたようです

ブラウザを使って GitBucket 上のリポジトリを見てみます

Readme.txt も表示されるし、タグも出来てます (^^)

これで、リモート側、ローカル側共にリポジトリが作られた状態で、バージョン管理を行う準備が整いました

クローン

次は、もう一つのローカルリポジトリの作成方法である、既に存在するリモートリポジトリをローカルリポジトリとして複製（クローン）して作業ツリーに取得するまでの手順を紹介します

画面左端の 新規/クローンを作成する ボタンをクリックします

リモートリポジトリのURLを設定して、ローカルリポジトリを作成する空のフォルダーを指定します

とりあえず作ってみるだけなのでテンポラリエリアに適当なフォルダーを作り保存先として指定しました

クローン ボタンをクリックするとリモートリポジトリが複製されて、指定したフォルダーにローカルリポジトリにコピーされて、作業ツリー内のファイルが作成されます

以上です

だいぶ長い記事になってしまいましたが、ここまでが準備編です　(^^)

次回は、 Git入門（SourceTree の使い方）の紹介です

開発ツールGit, GitBucket, SourceTree