Git初期設定クローズド勉強会｜WDSG策定チーム［#03］

6月2日（日）20時よりWDSG策定チーム内にて、Git初期設定クローズド勉強会をZoomで開催しました。

いなとみさん（@inatomi1717）にお願いして、GitHubとSourceTreeを連携する一連の初期設定をみんなで勉強しました。

今回は、Git初期設定クローズド勉強会で利用したドキュメントを、公開議事録として掲載します。

※MacOSをベースに解説します。

WDSG（Web Developer's Sharing Guidelines）とは、Webサイト制作関係者がガイドラインを共有することで、クリエイティブに集中できる環境を作るプロジェクトです。

１．Gitってなに？

Gitは黒い画面にコマンドをバシバシ打って使う、プログラマー専用のツールです（違う）。

Gitは、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。Linuxカーネルのソースコード管理に用いるためにリーナス・トーバルズによって開発され、それ以降ほかの多くのプロジェクトで採用されている。
出典: フリー百科事典『ウィキペディア（Wikipedia）』

変更履歴を記録・追跡しているので、指定したバージョンへ戻ったり、チームで制作を行うときにとても便利なツールです。

２．リポジトリってなに？

リポジトリの分かりやすい解説は、以下の記事をご覧ください。

履歴を管理するリポジトリ｜サルでもわかるGit入門
https://backlog.com/ja/git-tutorial/intro/02/

このGitのリモートリポジトリを提供するサービスのひとつが［GitHub］で、Git管理用のGUIクライアントが［SourceTree］です。

３．必要なアプリとサービス

１）SourceTree
Git管理用のGUIクライアントです。
公式サイトURL：https://ja.atlassian.com/software/sourcetree

２）GitHub
リモートリポジトリを提供してくれるサービスです。
公式サイトURL：https://github.com

３）SSHクライアント
SSH（セキュアシェル）でサーバーに接続する必要があるので、SSHクライントが必要です。
MacOSでは標準アプリの［ターミナル］を利用します。WindowsOSは［Tera Term］などのアプリが必要です。

まずは上記サービスを登録します。

４．ローカルマシンへGitをインストール

まず、Gitがローカルマシンにインストールされているか確認します。
ターミナルを立ち上げて、以下のコマンドを入力します。

$ git --version

※上記のコマンドが使えずに、以下の内容が表示される場合があります。

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

この場合は、以下のコマンドでxcodeをインストールすることで解決します。

$ xcode-select --install

Ａ）Gitがインストールされている場合

すでにローカルマシンへGitがインストール済みの場合は、以下の内容が表示されます（バージョンが違うことがあります）。

git version 2.20.1 (Apple Git-117)

Ｂ）Gitがインストールされていない場合
Gitがインストールされていない場合は、以下の内容が表示されます。

-bash: git: command not found

（B）のGitがインストールされていない場合は、以下のコマンドでGitをインストールします。

$ sudo yum -y install git

５．SourceTreeとGitHubの紐付け

５−１）SSH認証の公開鍵と秘密鍵を作成
ターミナルに以下のコマンドを入力します。［test@gmail.com］はご自身のものへ変更してください。

$ ssh-keygen -t rsa -C [test@gmail.com]

鍵を保存する場所を聞かれるので、このまま［Enterキー］を押します。

Enter file in which to save the key (/Users/evitch/.ssh/id_rsa):

パスフレーズを2回入力します（何も入力せずに実行して良いです）。

Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /Users/evitch/.ssh/id_rsa.

SSH認証の公開鍵と秘密鍵が作成されたので、ファイルを確認するために以下のコマンドを入力します。

ファイルは［id_rsa：秘密鍵］［id_rsa.pub：公開鍵］です。

//.ssh移動
$ cd ~/.ssh

// 現在のディレクトリに存在するファイルを確認
$ ls

以下の内容が表示されれば、問題なくファイルは作成されています。

id_rsa      id_rsa.pub

以下のコマンドでファイルのパーミッションを確認します。

// 現在のディレクトリに存在するファイルのパーミンションを確認
$ ls -al

［id_rsa］のパーミッションが［600］であれば問題ありません。

// id_rsaが、600になっていることが分かる
-rw-------  1 inatomitakahiro  staff  1823  2 17 18:39 id_rsa

パーミッション早見表
http://hayakawa.ddo.jp/beginner/ux/permit.html

［id_rsa］のパーミッションが［600］でなければ、以下のコマンドでパーミッションを変更します。

// id_rsaのパーミッションを変更
$ chmod 600 id_rsa

重要：
鍵にパスフレーズを設定した場合のみ、以下のコマンドを実行する。
これでssh-agentに鍵を登録しないと、SourceTreeが正常に鍵情報を読み込んでくれません。

// 鍵にパスフレーズを設定した場合は以下を実行
$ ssh-add -K

以下のコマンドで［~/.ssh/］ディレクトリに［config］ファイルを作成します。

// config作成
$ touch config

作成したconfigファイルを編集するため、［viコマンド］でエディタを開きます。

// configファイルを編集するためにviエディタを開く（ファイルの中が見える状態）
$ vi config

viエディタが開いた状態（ファイルの中が見える状態）で［Iキー］を押すと、insertモード（編集モード）に切り替わり、configファイルの中を編集可能になります。

編集モードの状態で、configに以下を入力します。

// 以下の内容をコピペで貼り付ける。
Host github.com
 HostName github.com
 IdentityFile ~/.ssh/id_rsa
 User git

貼り付けが完了したので、insertモード（編集モード）を解除するために［ESCキー］を押します。

そして［:wq］コマンドで［編集した内容を保存］＋［viエディタを閉じる］を実行。（［:w］（保存）と［:q］（エディタを閉じる）という命令を同時に実行している。）

configファイルの設定が完了しました。

５−２）GitHubへ公開鍵を登録

（１）GitHubにログインした状態で、画面右上のアカウント画像をクリックします。

（２）ドロップダウンメニューの中から［Settings（設定）］をクリックします。

（３）［Settings（設定）］ページの［SSH and GPG keys］をクリックします。

（４）［SSH Keys］の［New SSH key］ボタンをクリックします。

（５）［Title（タイトル）］には任意の名前を入力し［Key（キー）］には以下のコマンドで、ターミナルからクリップボードにコピーした［Key（キー）］を貼り付けます。

// クリップボードにid_rsa.pubの内容をコピー
$ pbcopy < ~/.ssh/id_rsa.pub

５−３）SourceTreeの設定

（１）［SourceTree］ツールバーの［環境設定…］から、アカウント画面を開きます。

（２）［追加］をクリックし、ホストを［GitHub］に［接続アカウント］をクリックします。

（３）ブラウザへジャンプするので［SourceTreeを開く］をクリックすると、SourceTreeにGitHubのアカウントが連携されます。

参照記事：
https://qiita.com/evitch/items/5d87b8aab5cd72695d2b

６．リモートリポジトリ

GitHubにログインして、以下のページを開きます。

Create a new repository
https://github.com/new

（１）［Repository name］に利用したい名前を入力します。

（２）公開できないプロジェクトは［Private］を選択します。

（３）［Initialize this repository with a README］にチェックを入れます。

（４）［Create repository］をクリックして作成します。

これで、リモートリポジトリの設定は完了です。

７．ローカルリポジトリ

まず、リモートリポジトリから［クローン］を行います。

（１）GitHubにログインした状態で、画面右上のアカウント画像をクリックします。

（２）ドロップダウンメニューの中から［Your repositories］をクリックします。

（３）先ほど作成したリモートリポジトリのリンクが表示されるので、クリックします。

（４）［Clone or download］をクリックして［Clone with SSH］のURLをコピーします。

（５）［Source tree］を立ち上げて、［新規…］から［URLからクローン］を選択します。

（６）［ソースURL］に先程のURLを入力します。

（７）［保存先のパス］を設定します（ローカルマシンに保存するディレクトリを指定します）。

（８）［名前］にリモートリポジトリの名前を入力します（自動で入力されます）。

（９）［クローン］をクリックします。

以上で、ローカルリポジトリの設定は完了です。

８．Gitの仕組み

Gitの仕組みについて簡単にご紹介します。

commit：
ファイルの追加や編集、削除をリポジトリに記録するために［コミット］を行います。［コミット］を実行するときには［コミットメッセージ］を入力する必要があります（必須です）。

push：
ローカルリポジトリの変更をリモートリポジトリに反映させることを［プッシュ］と呼びます。

pull：
リモートリポジトリにある最新の変更を、自分のローカルリポジトリに反映させることを［プル］と呼びます。

merge：
他の履歴での変更を取り込むことを［マージ］と呼びます。

fetch：
pullを実行すると、リモートリポジトリの内容のマージが自動的に行われてしまいます。 しかし、単にリモートリポジトリの内容を確認したいだけの時はマージをしたくない場合もあります。
そのような時はfetchを使用します。fetchを実行すると、リモートリポジトリの最新の履歴の取得だけを行うことができます。

Gitの詳しい情報は以下のサイトを参照してください。

サルでもわかるGit入門
https://backlog.com/ja/git-tutorial/

９．デプロイ環境（本番サーバー）に適用

まず、ターミナルでSSH接続するために、以下のコマンドを入力します。

// デプロイ環境へのログイン
$ ssh ユーザー名@ドメイン
// パスワードを聞かれるのでパスワード入力

以下、サーバー内を移動したり、ファイルの中を見るためのコマンド一覧です。これらのコマンドでGit管理を行うディレクトリへ移動します。

// 今いるディレクトリがルートから見てどの位置にあるか知りたい
$ pwd

// 今いるディレクトリの中を見たい
$ ls

// 移動したい場所へいく
$ cd git管理したい場所へのパスを入力

// cdでルートに行きたい時
$ cd /

// cdで一階層上に戻りたい時
$ cd ../

Git管理を行うディレクトリへ移動した状態で、リモートリポジトリから以下のコマンドでファイルを［pull］します。

$git clone https://ina-taka2:aoihpadf76apfija@github.com/ina-taka2/test.git .

// リモートの変更を適用したい場合
$ git pull origin master

※本番環境にすでにファイルがある場合

本番環境にすでにファイルがある場合は、通常だと最初のpullやcloneがうまく出来ません。そのような場合は、以下のような手順で行うと良いです。

（１）本番環境にあるファイルをすべてローカルリポジトリにダウンロードします（FTPを利用）。

（２）ローカルリポジトリからリモートリポジトリへ［push］します。

（３）デプロイ環境（本番環境）にSSH接続して、リモートリポジトリからファイルを以下のコマンドで［pull］します。

// 本番環境のGit管理したいディレクトリ上で行う
$ git fetch origin

$ git reset --hard origin/master

１０．最後に

勉強会で利用したドキュメントを基にリライトしているので、分かりづらくてすみません（専用Slackへジョインして頂ければ録画データを見れます）。。。

環境の構築は慣れるまでが大変ですが、こうしてみると意外と簡単にGitの初期設定は行えることが分かりました！

具体的なGitの利用方法の勉強会を開いたときには、またnoteで記事にしたいと思います。

１１．WDSG策定チーム専用Slack

WDSG策定チームは、専用Slackで一緒に意見交換をしてくれるメンバーを募集しています！

意見出しチャンネルで制作方法について質問したり、判断に迷っていることや制作の悩みなど、自由な雰囲気で意見交換を行いながら、少しずつガイドライン化を進めています。

この活動が気になった方は、是非とも僕のTwitter（@design_hikaru）へご連絡ください！

最後までお読み頂き、ありがとうございました！