遅ればせながらGit/GitHubに入門しました

# **はじめに**
今日は、これからGit/GitHubを使い始めるにあたって、超入門レベルの知識を覚え書きしていきたいと思います。Gitはコミットしてソース管理するレベルで使った事があるくらいで、SVNでもいいのでは？というレベルの使い方しか経験がありません。また、ずっと前にGitHubのアカウントを作成してはいたけど、アカウントに埃がかぶるくらい触っていませんでした。今回、DockerやVSCode等を色々触っているので、そこにGit/GitHubも絡ませていきたいと思い、アカウントを引っ張り出してきました。ただ、目的もなく闇雲に触っていても仕方がないので、今回は以前の投稿で構築した自分用のDocker開発環境でソース管理を開始したいと思います。

# **環境周りの情報**
こちらの投稿に詳しく記載してあります。この環境に対して、今回の作業を行なっていきます。

https://qiita.com/829yasubee/items/93ab15182f93b2689afa

# **環境構築手順**
最初に、Gitでソース管理を行えるように、Git環境を構築したいと思います。

### **GitHubアカウントの作成**
リモートリポジトリをホスティングするサービスアカウントを作成する必要があります。種類は色々ありますが、私の場合はGitHubを使います。アカウントの作成手順は割愛させて頂きます（前述の通り、既にアカウント作成済みの為）。後、メールアドレスを晒したくない人は、アカウント作成後に下記の設定状態は最低限確認しておいた方が良いと思います。

|設定|意味|私の設定|
|:-|:-|:-:|
|Keep my email addresses private|メールアドレスを非公開にする|ON|
|Block command line pushes that expose my email|GitからGitHubへコミットをプッシュする際、非公開メールアドレスでプッシュされた場合にブロックする|ON|

![スクリーンショット1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/ba533791-400c-0d31-1921-2749085f80c3.png)

:::note info
後述する「Gitの初期設定」でメールアドレスを設定するのですが、このメールアドレスとGitHub上のメールアドレスが一致していないと、コミットログ等が自分と紐付きません。私と同じようにGitHubのメールアドレスを非公開にしている人は、上記画像の赤下線部のメールアドレス（GitHubが自動生成してくれているメールアドレス）で紐付けて下さい。
:::

### **Gitのインストール**
VSCodeにはGitが入っていませんので、Ubuntu仮想マシンにGitをインストールしたいと思います。
まずはインストールされているか確認。

```bash:実行コマンド
$ git --version
```

```text:実行結果
git version 2.25.1
```

既にインストールされていたけど、バージョンが古い。現状の最新版は2.34.1。PPA(Personal Package Archives)を利用して、最新版にアップグレード。

```bash:実行コマンド
$ sudo add-apt-repository ppa:git-core/ppa
$ sudo apt-get update
$ sudo apt upgrade
```

:::note warn
2021.12.27現在、何故かリポジトリに繋がらず、更新できない。この作業は一旦保留にして、後日やってみる事にする。
↓
2022.04.17現在、この作業をリトライしてみたところ、上記手順で無事Gitのバージョンアップが出来ました。実行結果は下記の通りです。
:::

```bash:実行コマンド
$ git --version
```

```text:実行結果
git version 2.35.3
```

[参考サイト]
Git公式：https://git-scm.com/downloads
Git PPA：https://launchpad.net/~git-core/+archive/ubuntu/ppa

### **Gitの初期設定**
Gitを使い始める時、最初にやるお決まりの作業。設定内容は下記の通り。

```bash:実行コマンド
$ git config --global user.name "{任意のユーザー名}"
$ git config --global user.email "{GitHubと紐付けたいメールアドレス}"
```

|設定項目|設定内容|私の設定|
|:-|:-|:-|
|user.name|コミットログ等に表示される名前|GitHubのユーザー名|
|user.email|コミットログ等に表示されるメールアドレス|GitHubが自動生成したメールアドレス|

:::note info
GitHubと紐付ける必要があるのはuser.emailの方だけで、user.nameは何でも良いようですが、混乱するのでuser.nameの方も一応合わせておきます。
:::

:::note info
globalオプションを付与すると、設定スコープはOSユーザー単位になります。localオプションを付与すると、設定スコープはリポジトリ単位になります。
:::
ちゃんと設定できたか確認。

```bash:実行コマンド
$ git config --list
```

```text:実行結果
user.name=hoge
user.email=hoge@users.noreply.github.com
```

# **ソース管理開始手順**
以前の投稿でも紹介しましたが、一般ユーザーのhomeディレクトリ配下にまとめてあるDocker関連ファイルのツリー構造を紹介しておきます。
![スクリーンショット2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/035cb634-2433-273b-e04d-e8e6c2adf6f5.png)
現状、コンテナは"linuc"と"blog"の２つがありますが、前者に関して、主にGitコマンドを使用して、ソース管理を開始していきたいと思います。後者に関しては、主にVSCodeのソース管理機能を使用して、ソース管理を開始していきたいと思いますが、投稿には載せません。GUIでの操作になるので、前者のコマンドの流れが理解できていれば、恐らく出来ると思いますので。

### **ローカルリポジトリの作成**
ローカルリポジトリを作成したいディレクトリへ移動。

```bash:実行コマンド
$ cd ~/workspaces/linuc/
```

ローカルリポジトリを作成。

```bash:実行コマンド
$ git init
```

```text:実行結果
Initialized empty Git repository in /home/hoge/workspaces/linuc/.git/
```

ローカルリポジトリの管理状況を確認。

```bash:実行コマンド
$ git status
```

```text:実行結果
ブランチ master

No commits yet

追跡されていないファイル:
  (use "git add <file>..." to include in what will be committed)
        .devcontainer/
        .env
        build/
        docker-compose.yml

nothing added to commit but untracked files present (use "git add" to track)
```

VSCodeのエクスプローラービューやソース管理ビューでも、ローカルリポジトリが認識された。
![スクリーンショット3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/e030698f-499e-5b55-1308-252a5ec676e4.png)
![スクリーンショット4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/fe4fe6de-c037-183c-4a81-3049f998d883.png)

### **.gitignoreファイルの作成**
.envファイルは環境依存情報がたくさん記載されており、ソース管理対象外にしたいので、.gitignoreファイルでGit追跡対象外にします。
.gitgnoreファイルを作成し、viエディターで編集。

```bash:実行コマンド
$ touch .gitignore
$ vi .gitignore
```

```vim:.gitignoreの中身
.env
```

ローカルリポジトリの管理状況を確認。.envファイルがGit追跡対象外になりました。

```bash:実行コマンド
$ git status
```

```text:実行結果
ブランチ master

No commits yet

追跡されていないファイル:
  (use "git add <file>..." to include in what will be committed)
        .devcontainer/
        .gitignore
        build/
        docker-compose.yml

nothing added to commit but untracked files present (use "git add" to track)
```

VSCodeのエクスプローラービューやソース管理ビューでも、.envファイルがGit追跡対象外になりました。
![スクリーンショット5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/21e5c9bc-d6e7-e319-5d85-cf1879390d11.png)
![スクリーンショット6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/b99253ef-3a06-6951-465b-e6269cb30c57.png)

### **コミット対象ファイルのステージング**
コミット対象ファイルを指定（ステージング）します。

```bash:実行コマンド
$ git add -A
```

:::note info
Aオプションは追加可能な全てのファイルをコミット対象にするという意味です。ファイルを個別に指定する場合には、Aオプションは付けずにファイル名を指定します。
:::

ローカルリポジトリの管理状況を確認。.env以外のファイルが全てステージ済みになりました。

```bash:実行コマンド
$ git status
```

```text:実行結果
ブランチ master

No commits yet

コミット予定の変更点:
  (use "git rm --cached <file>..." to unstage)
        new file:   .devcontainer/devcontainer.json
        new file:   .gitignore
        new file:   build/pc/Dockerfile
        new file:   docker-compose.yml
```

VSCodeのエクスプローラービューやソース管理ビューでも、.env以外のファイルが全てステージ済みになりました。
![スクリーンショット7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/d43ff4d5-3f33-6741-5aab-a344221e8840.png)
![スクリーンショット8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/38933418-23bf-87c3-2403-7380ce22d080.png)

:::note info
ちなみに、ファイル名の右横に"U"や"A"が表示されています。この他にも"M"や"D"もありますが、それぞれ次のような意味となります。
:::

|略称|正式名称|意味|
|:-|:-|:-|
|U|Untraced|一度もコミットされていない、または、Git追跡対象外|
|M|Modified|変更された|
|D|Deleted|削除された|
|A|Added|ステージングされた|

ステージングされた状態で、ファイルの比較をしてみます。下記コマンドのオプションは--stagedとしても同じ意味となります。こちらの方が私は分かりやすいかもです。

```bash:実行コマンド
$ git diff --cached
```

```text:実行結果
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 0000000..6d1f221
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,7 @@
+{
+    "name": "linuc",
+    "dockerComposeFile": "../docker-compose.yml",
+    "service": "pc",
+    "workspaceFolder": "${localEnv:HOME}",
+    "remoteUser": "${localEnv:USER}"
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..4c49bd7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.env
diff --git a/build/pc/Dockerfile b/build/pc/Dockerfile
new file mode 100644
index 0000000..ed050c2
--- /dev/null
+++ b/build/pc/Dockerfile
@@ -0,0 +1,15 @@
+FROM ubuntu:latest
+
+ARG USER_UID
+ARG USER_NAME
+ARG GROUP_GID
+ARG GROUP_NAME
+
+RUN groupadd -g ${GROUP_GID} ${GROUP_NAME} \
+  && useradd -m -s /bin/bash -u ${USER_UID} -g ${GROUP_GID} ${USER_NAME} \
+  && apt-get update \
+  && apt-get install -y sudo \
+  && echo "${USER_NAME} ALL=(root) NOPASSWD:ALL" > /etc/sudoers.d/${USER_NAME} \
+  && chmod 0440 /etc/sudoers.d/${USER_NAME}
+
+USER ${USER_NAME}
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..827ad96
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,19 @@
+version: '3'
+services:
+  pc:
+    build:
+      context: ./build/pc/
+      dockerfile: Dockerfile
+      args:
+        USER_UID: ${USER_UID}
+        USER_NAME: ${USER_NAME}
+        GROUP_GID: ${GROUP_GID}
+        GROUP_NAME: ${GROUP_NAME}
+    container_name: linuc_pc
+    hostname: linuc_pc
+    networks:
+      - net
+    tty: true
+networks:
+  net:
+    name: linuc_net
```

### **ステージ済みファイルのコミット**
特に問題無いので、コミットしたいと思います。無事、コミットされました。

```bash:実行コマンド
$ git commit -m "ソース管理を開始"
```

```text:実行結果
[master (root-commit) 151244e] ソース管理を開始
 4 files changed, 42 insertions(+)
 create mode 100644 .devcontainer/devcontainer.json
 create mode 100644 .gitignore
 create mode 100644 build/pc/Dockerfile
 create mode 100644 docker-compose.yml
```

VSCodeのエクスプローラービューやソース管理ビューでも、コミットが認識されました。
![スクリーンショット9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/09330d83-fef1-1c80-62ce-5d4e432e9e08.png)
![スクリーンショット10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/04f2b20b-e177-9f2a-a133-ee15b6910a20.png)

コミットログを確認します。

```bash:実行コマンド
$ git log
```

ちゃんとコミット履歴が記録されています。

```text:実行結果
commit 151244ef316a70fc1cf84898797eeb61dd93134b (HEAD -> master)
Author: hoge <hoge@users.noreply.github.com>
Date:   Mon Dec 27 11:55:58 2021 +0900
```

ローカルリポジトリの管理状況を確認。コミットされたので、変更点は無くなりました。

```bash:実行コマンド
$ git status
```

```text:実行結果
ブランチ master
nothing to commit, working tree clean
```

### **リモートリポジトリの作成**
GitHubでリモートリポジトリを作成します。
まず、GitHubにログインします。ログインしたら、画面右上[+]マークをクリックし、[New repository]をクリック。
![スクリーンショット11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/3948112d-4afe-a1bc-55d5-11837097d0e4.png)
[Repository name]を入力し、"Private"を選択したら、[Create repository]ボタンをクリック。
![スクリーンショット12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/63390c94-32da-59c2-809d-8d2162eb3e77.png)

:::note info
[Description]の入力、READMEファイルや.gitignoreファイルの作成、licenseの選択は省略します。今回は特に必要ありませんし、.gitignoreファイルは既にローカルリポジトリで作成済みである為。
:::

リモートリポジトリが作成されました。次の手順で使うので、赤枠部分のURLを控えておきます。
![スクリーンショット13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/a9f03366-b5b8-db76-7f10-645ead138a94.png)

### **リモートリポジトリへプッシュ**
いよいよローカルリポジトリのコミットをリモートリポジトリへプッシュします。
ターミナルに戻り、ローカルリポジトリにリモートリポジトリを登録します。つまり、ローカルリポジトリとリモートリポジトリを紐付けます。

```bash:実行コマンド
$ git remote add origin https://github.com/{Gitユーザー名}/linuc.git
```
続けて、ローカルリポジトリのコミットをリモートリポジトリにプッシュします。

```bash:実行コマンド
$ git push -u origin master
```
:::note info
uオプションは、ローカルリポジトリのmasterブランチを、origin（リモートリポジトリ）のmasterに紐付ける（上流ブランチにする）意味がある。これにより、以降は、git pushとするだけで良くなる。との事らしい・・・。イマイチ、ピンと来ていない感じです。
:::

"GitHub"拡張機能がGitHubの認証を進めて良いか確認してきます。[許可]ボタンをクリック。
![スクリーンショット14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/8f10d60d-1d1c-af1f-52b3-198ac0ea6c92.png)
ブラウザが起動し、次のような画面が表示されますので、[Continue]ボタンをクリック。
![スクリーンショット15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/557593fc-aa51-8881-676b-526e78bc897b.png)
確認画面が表示されるので、[Authorize github]ボタンをクリック。
![スクリーンショット16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/201942db-9e69-4a59-baf5-9e882eecea0c.png)
パスワードの確認を求められますので、パスワードを入力し、[Confirm password]ボタンをクリック。
![スクリーンショット17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/1efbd68d-4128-27ea-012a-c41d5035e089.png)
認証成功画面が表示されますので、[許可]ボタンをクリック。
![スクリーンショット18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/829053a3-a6f9-7be9-4431-aed31a3f0b8f.png)
最後に、このような確認画面が表示されるので、[開く]ボタンをクリック。
![スクリーンショット19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/90795b54-9b7e-9c4a-5196-adf814ed6c3a.png)
すると、ターミナルに次のような実行結果が表示され、プッシュが完了します。

```text:実行結果
Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 2 threads
Compressing objects: 100% (5/5), done.
Writing objects: 100% (9/9), 1.04 KiB | 1.04 MiB/s, done.
Total 9 (delta 0), reused 0 (delta 0)
To https://github.com/hoge/linuc.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.
```

VSCodeのソース管理ビューでも、プッシュが認識されました。
![スクリーンショット20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/cdd2e778-df7b-41d1-d8bb-7b8f2af79568.png)
GitHubも確認してみます。無事、プッシュされています。
![スクリーンショット21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/313a8c8b-fa4f-2e36-56ce-d65e5e966242.png)

---
### **おまけ**
"blog"コンテナに関しても、VSCodeのソース管理機能主体でソース管理を開始してみましたが、やはりGUIは直感的で分かりやすく、特に迷うところはありませんでしたので、本投稿への記載は割愛させて頂きます。一応、出来上がりはこんな感じです。
![スクリーンショット22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/8a82f88d-45a4-a2bd-6d9d-554377b72378.png)
この作業していて思ったのですが、Git追跡対象外にしたdata/html/とdata/mysql（Dockerコンテナでバインドマウントしているディレクトリ）の内、後者は別の方法でデータバックアップしないと、何か起きた時に環境を完全復活できないと思いました。別の方法でバックアップを検討したいと思います。前者はプラグインを開発しているわけではないので、特にバックアップは不要かと思っております。Compose Upすれば復元できるので。

:::note info
2022.04.17現在、data/html/やdata/mysqlのバックアップに関しては、WordPressのプラグインで対応しました。利用したプラグインは"BakuWPup"です。使い方はネットにたくさん情報がありますのでここでは割愛しますが、WordPress管理画面で該当プラグインをインストール後、バックアップジョブを定義するだけで利用できます。どうやってバックアップを実現するか悩みましたが、自分でプログラムを作り込む必要の無いこの方法が一番お手軽でした。
:::

---
# **最後に**
遅ればせながら、やっとGit/GitHubに入門できました。本来は、ブランチ運用したり、コンフリクトを解消したり、もっと言うと、IssuesやPull requestsを使いこなせてなんぼだと思います。また、Gitコマンドももっとたくさん学ばないといけないと思いますが、ハンズオンで身につけていくのが良いと思っていますので、今後、色々な開発作業をする中で必要に応じて覚え書きしつつ、徐々に身につけていきたいと思います。道のりはまだまだ長いですね。

お疲れ様でした！