ホームページ制作・大阪インフォメーションメディアデザイン

06-6809-5021

Staff Blog
スタッフブログ

  • Twitterでシェア
  • このエントリーをはてなブックマークに追加
  • Google+でシェア
  • follow us in feedly

Gitを1からようやく始める、Git運用パータン例

f0e79a6ec02b2077299d1e4bd45b7f0b

gitはじよめようって時のレベル(3ヶ月前)

  •  なんかややこしそう…..覚えたとこで役立つ?
  •  使って仕事が余計にややこしくなるんでは?
  •  概念とか使い方とか覚えるのに頭使うしつかず離れずで距離おくか…
  •  WEB制作でGITを使えば便利になったというお話をよく聞く
  •  svnでバージョン管理初めて1年程(tortise svn)
  •  共有環境でバージョン管理してたら、コンフリクトしたら、逃げたいし放置したい
  •  javaとjavascript、gitとgithubは似たような同意語?
  •  gitを見ない日はないしマストアイテムとようやく気づいたけども…SVNでいいんでねーの
  •  ブランチってなんか公園で休憩するような、ベンチとブランコを混ぜた乗り物でないの?
  •  gitgitうるさいぁ

自分のgit管理に関しての3ヶ月後のレベル

コマンド覚えてgit 触ってる

  • git add
  • git commit -m
  • git push origin master
  • git pull origin develop
  • git checkout
  • git merge develop
  • git log
  • git status
  • git checkout akfjahkgd89fvilhd98439238kbugels path/file
  • git branch develop
  • git remote -v
  • git fetch
  • git reset –hard HEAD^
  • git checkout -b newbranch origin/newbranch
  • git init
  • git clone
  • git submodule add git:github.com/~~
  • git submodule init
  • git submodule update
  • git rm
  • git rm –cache
  • git samasama
  • git様様、プロジェクトの管理が大きく変わるよね
  • git管理しとけばとりあえずみんなでファイル触りまくってもプロジェクト進みやすいよね
  • gitでやれば、ファイルあげなくてもがさっといけるよね O型な自分にはあってる
  • いろんな開発環境作って、綱渡りなことも試せるしいいね
  • このようなコマンドやオプションにははかりしれない便利なものがあるね〜
  • gitのない世の中なんて…考えれんよね
  • 3ヶ月前の自分の考え方が恥ずかしい

WEBサイト制作、WEBサイトシステム制作等をメインに行います

上記コマンドを利用して、サイトを切り替えて公開ができる方法をご紹介

〜 TOP・メインコンテンツ先方案内編〜

■プロジェクトテーマ

CMSを組み込んだ、新規立ち上げコーポレートサイト制作

シチュエーション

開発環境

  • リモートリポジトリ ホスティングサービスVPSサーバ上 ← ここにgitがいます
  • デザイン制作環境 社内VPSサーバ上 ← ここにgitがいます
  • 開発環境はローカルPC上 ← ここにgitがいます
  • 公開環境は、ホスティングVPSサーバ ← ここにgitが2ついます

 

登場される方は
デザイナ、エンジニア、クライアント様

48px-Crystal_Clear_app_klaptopエンジニア      git覚えたて

48px-Crystal_Clear_app_kpaintデザイナ       git知らんなにそれ?

クライアント様  テニスのgutは腸でできてるからgutなんだよ。ガッツポーズのgutとgutは同じ英単語ですってね

 

48px-Crystal_Clear_app_klaptopエンジニア

とりあえずプロジェクトディレクトリと、リモートリポジトリ作成します

  • ssh リモートリポジトリVPSサーバ
  • mkdir project
  • cd project
  • git –bare init –share

リモートリポジトリ作成しましたよ

じゃあデザイン制作環境にリポジトリ作成します

  • ssh 社内VPS
  • cd 制作ディレクトリ
  • git clone ssh://[リモートサーバuser]@[リモートサーバ名とかIPとか] /home/admin/project/project.git

クローンすれば、バージョン管理配下に置かれます。

 

※ここでSSH接続を鍵認証、.ssh/config にリモート設定しておけば楽です

SSHで行う場合は以下参考サイト

http://easyramble.com/access-gitrepo-over-ssh.html

 

制作ディレクトリ/project

projectディレクトリがgitによってクローンされましたよ。

 

48px-Crystal_Clear_app_kpaintデザイナ

html,css,jsのファイルやCMS等を導入しサイト制作進めていきます。

の前に、※開発用ブランチへ移動して、masterブランチでファイル編集はしないというルール使用らしいよ

 

48px-Crystal_Clear_app_klaptopエンジニア

masterは一方通行が原則で、軸となるブランチです。

まず2本のブランチにすることで、開発環境、本番環境を分けることで、本番環境のリビジョンを大きく区切ることができるんで本番のリビジョン管理がわかりやすくなりますね

本番環境でバージョン戻すときに、区切りの位置がわかりやすくなることがメリットとかうんたらかんたらでね…

※git flowいれたらgit のチーターになれますよっと

http://danielkummer.github.io/git-flow-cheatsheet/index.ja_JP.html

 

  • git branch develop
  • git checkout develop

この状態で制作始めます

ファイル作成後、作業の切りの良いところで

  • git add ファイルパス

→addとは、ファイルをインデックスに追加、更新しますという指示作業のようなもの

  • git commit -m ‘コミットします’

commitとは、addしたものをリポジトリにいれ登録する作業

※いざ戻したいところに戻せるようにコミットログは、正確に書くことで幸せがおとずれます

 

48px-Crystal_Clear_app_klaptopエンジニア

公開サーバ上にリポジトリ設定

リモートと同じくクローンしてディレクトリ作成しまっす

  • git clone -b master ssh://[リモートサーバuser]@[リモートサーバ名 or ip] /home/admin/project/project.git

※公開・公開用テストサーバ上は原則masterブランチのみを使用します。

 

48px-Crystal_Clear_app_kpaintデザイナ

TOPとメインコンテンツを一旦先方に案内しましょうか?

48px-Crystal_Clear_app_klaptopエンジニア

じゃあ今のチェックバックいりますよね?

 

48px-Crystal_Clear_app_kpaintデザイナ

デザイン制作環境に今の状態あげて社内でチェックバックしてもらいましょう

48px-Crystal_Clear_app_klaptopエンジニア

そうですね?じゃあ一旦開発関連のファイルもまとめましょうか?

 

48px-Crystal_Clear_app_kpaintデザイナ

うん

制作環境はコミット済なんで、まとめあげてくれる?

48px-Crystal_Clear_app_klaptopエンジニア

デザイン制作環境からリモートに一旦アップしま〜す。

  • git push origin develop

OKいけましたよっと

自分のところでマージします

  • git pull orgin develop

ファイル読み込まれた、コンフリクトしてないOK〜

じゃあ社内案内流してチェックバックしてもらいます。

 

社内チェッカー

  • レイアウトずれてるよ
  • 画像伸びてる
  • 文言かえたほうがいい
  • スマホじゃあなんかあれやね

※前のメインビジュアルの方がいいんでね?

 

48px-Crystal_Clear_app_kpaintデザイナ

まじか〜修正しますか

じゃあ上記対応します

新規修正はファイル修正してっと…

画像前のやつに差し戻すか。こんな時GITでいけんよね

  • git log

どのコミットかなっと….

この画像だけこれに戻したい

どうすんの?

48px-Crystal_Clear_app_klaptopエンジニア

コミットログに有る

ede82fe636a0145a8ca686bf8342544ad4349d

みたいなやつを教えて下さい

 

48px-Crystal_Clear_app_kpaintデザイナ

ede82fe63ajk637676l5a8ca686bf8342544ad4349d

のfiles/main.jpgにしたい

48px-Crystal_Clear_app_klaptopエンジニア

じゃあ指定のコミットのファイル指定して戻しましょうか

  • git checkout ede82fe63ajk637676l5a8ca686bf8342544ad4349d files/main.jpg

ブラウザで見てみてください。

 

48px-Crystal_Clear_app_kpaintデザイナ

おっ画像変わってる

修正終わったしもっかいあげました

じゃあこれでチェックバック2するか?

 

社内チェッカー

  • 画像やっぱ前のがいい

 

48px-Crystal_Clear_app_kpaintデザイナ

(どの前のよ ちっ…

(今のデザインには最新のメイン画像が必要やからまた最新にして押し通すぜ

  • git checkout developっと

このデザインにはこのビジュアルがあるからでありまして…..

 

社内チェッカー

いいんでないでしょうか

 

48px-Crystal_Clear_app_kpaintデザイナ

じゃあこれでいきますか

  • git push origin develop

先方案内第一弾完了

これ公開用サーバのテスト環境にあげてほしいです

48px-Crystal_Clear_app_klaptopエンジニア

じゃあマージしま〜す

  • git pull origin develop
  • git checkout master
  • git merge develop

おっけ〜コンフリクトないしこれでリモートmasterにあげます

  • git push orgin master
  • ssh 公開用サーバに接続

テスト公開ドメインディレクトリに移動して

  • cd ~/test/project
  • git pull origin master

公開用サーバ確認願います

 

48px-Crystal_Clear_app_kpaintデザイナ

OKじゃあ先方に案内しまっす。

 

クライアント様

いい感じですね〜ありがとうございます

じゃあ、これの公開3ヶ月先なんでとりあえずカミングスーンのページ作ってもらえます?

 

48px-Crystal_Clear_app_kpaintデザイナ

えっ?

 

クライアント様

えっ?

 

48px-Crystal_Clear_app_kpaintデザイナ

分かりました。ただ今回カミングスーンは、見積もっておりませんので見積もらせていただきます?

こちらの金額でよろしいでしょうか?

 

クライアント様

えっ?..ええ..お願いいたします。

 

48px-Crystal_Clear_app_kpaintデザイナ

お願いいたします。

カミングスーン作成事案発生しました。

作成します。

 

48px-Crystal_Clear_app_klaptopエンジニア

急な話ですね〜でもきっちりさばきこなすデザイナ氏すごい

てっことで、カミングスーン公開用ブランチがあれば、一時公開もサクサクですね。

とりあえずローカルにカミングスーン公開用ブランチ作成しまっす

  • git branch commigsoon
  • git push origin commigsoon

 

制作統合環境にもcommigsoonブランチいれますね

  • git checkout -b commigsoon origin commigsoon

これで、一時公開用ページ作成お願いいたします

 

48px-Crystal_Clear_app_kpaintデザイナ

OK〜作成します

できました

  • git add files/index.php
  • git commit -m ‘一時公開用TOPページ’
  • git push origin commigsoon

じゃあこれ先方にみせますかっと

公開用テストにあげてもらえますか?

 

48px-Crystal_Clear_app_klaptopエンジニア

了解です

  • ssh 公開用テストディレクトリに接続
  • cd ~/test/project
  • git checkout -b commigsoon origin commigsoon

先方案内お願いいたします。

 

48px-Crystal_Clear_app_kpaintデザイナ

OK〜クライアント様いかがでしょうか?

 

クライアント様

あの見積でこんなデザイン…いやぁ素晴らしいですね

会社のイメージアップへの近道ができた気がします

ありがとうございます

カミングスーン公開お願いいたします

 

48px-Crystal_Clear_app_kpaintデザイナ

うけたまわりました。

(うっし!完璧!!

エンジニア氏カミングスーン公開して

 

48px-Crystal_Clear_app_klaptopエンジニア

OK!良かったですね〜

じゃあ本番公開用ディレクトリに移動してっと

  • cd ~/www/project
  • git checkout -b commigsoon orgin commigsoon

本番公開できましたよっと

 

48px-Crystal_Clear_app_kpaintデザイナ

サクッといくね〜素晴らしいねgitって

じゃあ、全コンテンツの制作・開発すすめるか!

ブランチ戻して、制作進めたらいいんよね?

 

48px-Crystal_Clear_app_klaptopエンジニア

そうです、その通りです。

じゃあブランチ開発用ブランチに戻して置いてください

  • git checkout develop

じゃあ作業再開っと

忘れないうちに、テスト公開用もマスターに戻しておくか

ssh テスト公開用接続

  • git checkout master

48px-Crystal_Clear_app_kpaintデザイナ

クライアント様

今後の開発の進捗は公開テスト用環境でどんどん更新していきますので

3ヶ月後を楽しみにお待ちくださいませ

 

使用コマンド要約

プロジェクトを作成してgit管理する

  • init

立ち上げたプロジェクトにファイルを積んでいく

  • add commit

環境違えど、どこにでもあげて、更新ができる。(mac linux windows)

  • clone pull

差し戻したい場合は、指定したところに戻れる

  • log status checkout

複数人編集したファイルが、gitによって一つの成果物によしなにまとめあげてくれる

  • merge push pull

別の開発を進めておける

  • branch checkout

bf013d9149d0b2a1ba7718d10f83dac2

今回のメリット要約

  • 画像元に戻してとかはcheckoutでいい感じ
  • 一時公開など、開発が分岐してしまう場合にはbranchでいい感じ
  • 環境によって、ファイルの差分が必要、でもそれがコマンド一つで管理できるからいい感じ
  • 複数人で作業してファイルを統合するときにはgitがいてくれて助かる。
  • git覚えるのに使っていくほどに便利さがわかって、どんどん身についてコストを感じられない
  • 覚えたての自分の知識が、git知らない人にも派生して開発環境がどんどんスマートになっていってすごい

 

今回の事案でエンジニアは語らなかったが困っておられたポイント

mergeしたとき何かコンフリクトして先に進まないし、もうイヤ

  • mergetoolや、手動でマージするときは必要

違うブランチのPullしてしもた

  • 焦らず、戻す。git reset –hard HEAD^等

sass等のキャッシュファイルもバージョン管理されてしまってカオスな感じになってしまった

git ignoreする改行コードがおかしくなってコンフリクトして、イヤ

以下のサイトに助けられました。ありがとうございます。

http://qiita.com/shuhei/items/2da839de8803cb335f86

・パーミッションがサーバによって変わってその度ファイルが更新対象になってgit statusが役に立たない

以下のサイトでスッキリして、ファイルの変更がわかりやすくなりました。

http://tetsuwo.tumblr.com/post/36066698390/git-chmod-git-config

この記事を共有する

投稿者:i.M.D. Staff
    2014年09月05日金曜日 | 14:46
    ホームページ制作・Web制作・WEBコンサルティングならお任せあれ

    この人が書いたその他のブログ記事

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    ranking 人気記事ランキング

    • I.M.Dコーポレートサイト
    お問い合わせ