GitHubを使ったローカルマシンからWebサーバーへのデプロイワークフロー：Gitの基本操作ガイド

# この記事を書くきっかけ
Webアプリケーションをデプロイした後、ローカルで修正したファイルをGitコマンドのみで本番運用のサーバーに反映したいと思い、記事を書きました。

### 対象者
- Gitの基本コマンドの使い方を知りたい方
- gitコマンドだけでローカルからWebサーバーに変更履歴を反映させたい方
- masterとorigin/masterの違いを知りたい方
- git fetchとgit pullの違いを知りたい方

# ローカルマシンからWebアプリケーション（EC2）に反映するまでのワークフロー

ローカルマシンで行った変更をGitHubのリモートリポジトリにプッシュし、その後リモートサーバー（EC2）でプルすることで、Webサーバー上のWebアプリケーションに変更を反映することができます。その手順の流れを説明します。

**イメージ図**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642333/1954f724-cf16-a42d-385d-edcee8115361.png" width="500">

### ローカルマシンでの作業（手元のパソコン）
1. **変更を行う**
プロジェクトのファイルに必要な変更を加えます。例えば、Webアプリケーションのindex.htmlというファイルを修正したとします。

1. **変更をステージング**
変更されたファイルをステージします。
`git add .`
または
`git add index.html`

1. **変更をコミット**
変更をローカルリポジトリにコミットします。
`git commit -m "index.htmlの修正"`

1. **リモートリポジトリにプッシュ**
変更をGitHubのリモートリポジトリにプッシュします。
`git push origin master`

これで、GitHubのリモートリポジトリにローカルの修正が反映されました。
***
### リモートサーバー（EC2）での作業

1. **EC2インスタンスにSSHで接続**  
自分のローカルマシンのターミナルからEC2インスタンスにSSHで接続します。  
`ssh eric_user@eric_server_ip`


1. **プロジェクトのディレクトリに移動**
`cd <my_project>`
プロジェクトのディレクトリパスです。実際のプロジェクトディレクトリのパスに置き換えてください。

1. **リモートリポジトリから最新の変更をプル**
`git pull origin master`

- git pull：リモートリポジトリの変更をローカルリポジトリに取り込む
- origin：リモートリポジトリのデフォルト名
- master：プルしたいリモートブランチの名前


これにより、ローカルマシンで行った変更がGitHubのリモートリポジトリに反映され、その変更がEC2のWebサーバーにも反映されます。こうして、Webアプリケーションが最新の状態になります。

# 実際にやってみる
### 1. ローカルマシンでの作業（手元のパソコン）

ローカルでindex.htmlの変更を行う。
ターミナルを開く。
プロジェクトのディレクトリに移動する。
```
your_local_machine:~$ cd myapp　　# プロジェクトのディレクトリに移動する
your_local_machine:myapp$ ls -a　　# 直下に.gitがあるかを確認するにはls -aコマンド
.		.env		README.md	hundred		myapp
..		.git		accounts	manage.py	static
.DS_Store	.gitignore	db.sqlite3	media		templates
```
`git status`で状態を確認すると、index.htmlが修正されていると指摘される。
```
your_local_machine:myapp$ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   templates/index.html

no changes added to commit (use "git add" and/or "git commit -a")
```
ステージングエリアに仮登録して、ローカルリポジトリにコミットする。
```
your_local_machine:myapp$ git add templates/index.html
your_local_machine:myapp$ git commit -m "index.htmlの変更"
[master becc14c] index.htmlの変更
 1 file changed, 1 insertion(+), 1 deletion(-)
```
変更をGitHubのリモートリポジトリにプッシュする。
```
your_local_machine:myapp$ git push origin master
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 8 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 374 bytes | 374.00 KiB/s, done.
Total 4 (delta 3), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
To https://github.com/your_username/your_repository.git
   3c0dbd7..becc14c  master -> master
your_local_machine:myapp$ 
```
### 2.リモートサーバー（EC2）での作業

まず、SSH接続する。
```
your_local_machine:myapp$ ssh your_ec2_user@your_ec2_ip           
Last login: Thu Jun 13 09:59:37 2024 from your_local_ip
   ,     #_
   ~\_  ####_        Amazon Linux 2
  ~~  \_#####\
  ~~     \###|       AL2 End of Life is 2025-06-30.
  ~~       \#/ ___
   ~~       V~' '->
    ~~~         /    A newer version of Amazon Linux is available!
      ~~._.   _/
         _/ _/       Amazon Linux 2023, GA and supported until 2028-03-15.
       _/m/'           https://aws.amazon.com/linux/amazon-linux-2023/

12 package(s) needed for security, out of 19 available
Run "sudo yum update" to apply all updates.
[your_ec2_user@your_ec2_ip ~]$ 
```
プロジェクトのディレクトリに移り、プルする。
```
[your_ec2_user@your_ec2_ip project_directory]$ cd myapp
[your_ec2_user@your_ec2_ip myapp]$ git pull origin master
```
ユーザーネームとパスワードを入力する。
```
Username for 'https://github.com': your_username
Password for 'https://your_username@github.com': 
```
うまくいけば差分が表示されている。
```
remote: Enumerating objects: 7, done.
remote: Counting objects: 100% (7/7), done.
remote: Compressing objects: 100% (1/1), done.
remote: Total 4 (delta 3), reused 4 (delta 3), pack-reused 0
Unpacking objects: 100% (4/4), 354 bytes | 88.00 KiB/s, done.
From https://github.com/your_username/your_repository.git
 * branch            master     -> FETCH_HEAD
   3c0dbd7..becc14c  master     -> origin/master
Updating 3c0dbd7..becc14c
Fast-forward
 templates/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
[your_ec2_user@your_ec2_ip hundred]$ 

```
これで、EC2の方にローカルの変更が反映されているはずです。



### まとめ
ローカルマシンでの変更をWebアプリケーション（EC2）に反映する作業自体は何度もやっていましたが、その動作をいまいち理解していませんでした。今回、その作業に向き合ってみて、まだまだ知らないことが多いと痛感しました。
Git勉強中のGit初心者なので、間違いがあれば是非ご指摘ください。この記事が誰かの参考になれば幸いです。