LoginSignup
0
0
はじめての記事投稿
Qiita Engineer Festa20242024年7月17日まで開催中!

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

Last updated at Posted at 2024-06-15

この記事を書くきっかけ

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

対象者

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

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

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

イメージ図

ローカルマシンでの作業(手元のパソコン)

  1. 変更を行う
    プロジェクトのファイルに必要な変更を加えます。例えば、Webアプリケーションのindex.htmlというファイルを修正したとします。

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

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

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

これで、GitHubのリモートリポジトリにローカルの修正が反映されました。


リモートサーバー(EC2)での作業

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

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

  3. リモートリポジトリから最新の変更をプル
    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初心者なので、間違いがあれば是非ご指摘ください。この記事が誰かの参考になれば幸いです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0