Git入門(GitBucket と SourceTree の準備)

最近 Gitを手軽に利用できる環境が揃ってきたので、遅ればせながら勉強しています (^^)

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

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

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

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

GitBucket という Gitクローンが Github と同じような感じで使用でき、インストールが簡単に出来るらしいということで 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 最新版をダウンロードします

clip_image001

デプロイ(インストール)

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

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

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

clip_image001[4]

実行

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

clip_image001[8]

Tomcatが起動に失敗する場合

XAMPP1.8.1 と 1.8.2 でやってみましたが、おそらく1.8 以上なら使えるのではと思いますが、XAMPP1.8.1ではちょっと修正が必要でした

XAMPP1.8.1 でTomcat を起動しようとするとこんな画面が表示され失敗します

clip_image001[6]

調べると解決策を紹介してくれている人がいました

xamppコントロールパネルからtomcatが起動しない現象を解決

Xapmm フォルダの catalina_start.bat ファイルを修正して下記コードを追加します

IF NOT EXIST %cd%\tomcat (
    cd ../
    echo . [XAMPP]: Changed xampp root path to %cd%
)

 修正してやってみると起動出来ました (^^)

動作確認

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

clip_image001[10]

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 でサインインします

clip_image001[12]

アカウント作成

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

clip_image002

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

clip_image003

作成できたようです

グループの作成

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

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

clip_image001[14]

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

clip_image002[4]

 

リモートリポジトリ作成

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

clip_image001[16]

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

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

clip_image001[18]

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

Create repository ボタンをクリック

clip_image002[6]

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

リポジトリ管理者の変更

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

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

clip_image003[4]

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

clip_image004

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

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

 

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

  1. ユーザー及びグループの登録管理
  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 コマンドを少し意識しておいたほうが理解が深まります (^^)

インストール

clip_image001[20]

http://msysgit.github.io/

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

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

clip_image002[8]

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

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

clip_image003[6]

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

clip_image004[4]

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

clip_image005

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

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

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

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

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

SourceTree

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

http://www.sourcetreeapp.com/

clip_image001[22]

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

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

インストール

clip_image002[10]

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

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

設定

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

clip_image003[8]

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

ユーザー情報

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

clip_image004[6]

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

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

SSHクライアントの設定

clip_image005[4]

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

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

clip_image006[4]

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

これで SourceTree が起動しました

clip_image007

 

ローカルリポジトリ

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

リポジトリ新規作成

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

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

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

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

clip_image001[24]

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

clip_image002[12]

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

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

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

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

clip_image003[10]

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

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

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

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

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

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

リポジトリへコミット

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

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

clip_image004[8]

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

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

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

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

ログ

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

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

clip_image005[6]

タグ

今回は celtisone version1.2.0 という既に動作しているテーマプログラムを最初の状態としてコミットしたので タグ もセットしておきます

タグ ボタンをクリックして、タグ名にバージョン番号をセットします

clip_image006[6]

タグを追加すると、ログに表示されて見ることが出来ます

clip_image007[4]

※通常はリリースバージョン完成毎にタグをセットすればOK
※タグを設定しておくと GitBucket 上に反映した時に Tags に登録され、Zipファイルとして自動的に Download 出来るよう圧縮してくれます

プッシュ

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

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

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

clip_image008

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

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

clip_image009

clip_image010

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

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

clip_image011

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

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

clip_image012

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

clip_image013

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

clip_image014

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

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

クローン

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

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

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

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

clip_image001[26]

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

clip_image002[14]

以上です

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

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

 


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss