--- title: Git 實際演練 tags: 網頁組 --- # Git 實際演練 - 前言 認識完 Git 是做什麼的之後，這個章節，我們要藉由一個實際的開發情境來練習如何操作 Git，本篇教學所示範的平台為 GitLab。 - [第一次 Git 工作坊文章](https://hackmd.io/@2HiJ3gJTTiub4kPJs9-McQ/HJReVaU4u) # 本節目標 - 透過實際範例練習 Git 的操作 # 共同儲存庫空間： 在有電、有網路的現代，我們所謂 GIT 共同儲存庫空間，也就是我們現在常見的 GitHub.com、GitLab.com 等平台提供者。 在這邊，大家都可以申請自己的專案，作為儲存自己的 GIT 儲存庫。 > 為什麼要用 GitLab？ :::warning GitLab 有完善的管理介面與權限控制，能夠自己搭建 GitLab ，Code 的隱私性勝於 GitHub ::: # 註冊 GitLab 首先我們要到 [GitLab 的官網](https://about.gitlab.com)進行註冊 ![](https://i.imgur.com/4KmxZtZ.gif) ## 設定 SSH key 為什麼我們需要設定 SSH key 呢，簡單來說我們使用 Git 上傳到 GitLab 時，我們是上傳到遠端伺服器，每次上傳都需要進行驗證，就是輸入帳號密碼，而有了 SSH key 之後，我們就不需要一直輸入帳號密碼，SSH key 就相當於一組金鑰，可以讓我們更快速地進行驗證。 > SSH key 更詳細的可以參考下列網址。 :::info [[Linux] SSH 金鑰是什麼？私鑰與公鑰？如何自己產生一個SSH金鑰？](https://richarlin.tw/blog/linux-ssh_key/) ::: ## 如何設定 SSH key 我們在終端機下以下指令 ``` ssh-keygen ``` ![](https://i.imgur.com/pxNUD2t.png) 就會產生出 SSH key 我們需要的在 C:\Users\你的使用者名稱\.ssh\id_rsa.pub ![](https://i.imgur.com/fUy8ReB.png) 複製下來後我們要到 GitLab 進行設定 ![](https://i.imgur.com/rDJhuKu.png) # 基本指令介紹 在進入實作之前，我們要先來認識 Git 的基本指令 ![](https://i.imgur.com/qU1PIID.png) 1. 在本地端寫完程式後，我們會進行 `git add` 的動作將修改過的檔案存進暫存區。 2. 接著我們會進行 `git commit` 的動作將檔案存進本地的儲存庫，進行 commit 時我們還會寫 commit 訊息，紀錄這次進行了怎樣的改動，每次的 commit 都會形成一個紀錄點。 3. 接著我們要將本地的儲存庫上傳到遠端的儲存庫，進行 `git push` 的動作 4. 而我們要將遠端的儲存庫存下來繼續開發，會進行 `git pull` 的動作 > commit 訊息可以參考以下文章 ::: info [Git Commit Message 這樣寫會更好，替專案引入規範與範例](https://ithelp.ithome.com.tw/articles/10228738) [如何優雅撰寫 Git Commit 訊息](https://w3c.hexschool.com/blog/7ce887b9) ::: 除了以上的動作之外，我們還有 `git checkout` 以及 `git merge` git checkout：我們可能會有許多的分支，每個分支都代表著一個儲存庫，我們可以使用 checkout 切換到不同的分支上。 > 分支 - 為什麼需要建立分支？ :::warning 1. 軟體開發人員可以安心開發自己的功能，不受到其他開發人員的影響 2. 可以透過分支來個別開發功能 3. 當發生問題時，可以更容易找出問題 ::: git merge：當兩支分支在不同的紀錄點上，我們要進行功能的合併時，就會使用 `git merge`。 ![](https://i.imgur.com/onFFUwh.png) # 模擬 git 使用情境 我們會模擬專案有的分支 - Master / Main（正式上線中的服務版本） - Test（測試的版本） - Dev（開發中的版本） - 功能分支（會從 dev 分支切出來） ![](https://i.imgur.com/XqiLAz7.png) 我們接到了任務，需要標題為 `Git 實作` 的網頁，接著要在裡面新增 `🥔 馬鈴薯好吃` 的內容。 我們先新增一個 GitPractice 的資料夾 ![](https://i.imgur.com/vS7IXbw.png) 接著我們進到資料夾內，右鍵開啟 git bash，我們先進行 git 的基本設定。 ``` git config --global user.name "user name" git config --global user.email "email" ``` 設定完後可以透過 `git config --list` 檢查資訊。 接著進行 git init 的動作，初始化這個資料夾。 ``` git init ``` ## 建立專案 先新增一個 index.html，內容如下 ```htmlembedded= <html> <head> <title>Document</title> </head> <body> </body> </html> ``` 接著回到終端機輸入 `git status` 檢查 Git 狀態，會發現我們有一個 Untracked 的 index.html :::success 指令：git status 檢查 Git 狀態 ::: ![](https://i.imgur.com/xibv6oH.png) 我們使用 `git add index.html` 將檔案存入暫存區 :::success 指令：git add `<file name>` 將檔案暫存到暫存區（Staging Area） ::: ![](https://i.imgur.com/WX2JBrG.png) 然後我們要將暫存好的檔案存到儲存庫，`git commit -m "Initial commit"` :::success 指令：git commit -m “commit 訊息” ::: ![](https://i.imgur.com/xqv1f7B.png) 存進去後，我們可以來查看 commit 的歷史紀錄 :::success 指令：git log ::: ![](https://i.imgur.com/9k8qjkw.png) 接著我們到 GitLab 上建立一個新專案 ![](https://i.imgur.com/puv3sVT.png) ![](https://i.imgur.com/eHuKdFg.png) ![](https://i.imgur.com/MKqJd8X.png) 成功之後可以看到這一頁，我們要把本地端綁定遠端的專案，在終端機中輸入指令 :::success git remote add origin 遠端儲存庫連結 ::: ![](https://i.imgur.com/sB7AUpz.png) 然後把我們本地端的專案上傳到遠端 :::success 指令：git push –u origin master ::: ![](https://i.imgur.com/GQsmm60.png) 成功後我們回到 GitLab 上就會看到以下畫面 ![](https://i.imgur.com/gU669K4.png) ## 模擬專案會有 maste 分支、test 分支、dev 分支 - Branch 從左側的 Respository 底下選到 Branches ![](https://i.imgur.com/2iy9nNb.png) 從 master 分支建立新的分支 test 和 dev ![](https://i.imgur.com/TZVyIAC.png) --- ![](https://i.imgur.com/HzheJOW.png) 完成後，會有三個分支 ![](https://i.imgur.com/wh0haLE.png) ## 模擬被主管指派了一個新的功能 - Issue > Issue 的用處 :::warning 1. 對應到問題與需求 2. 方便主管管理，掌握每個人的進度 ::: ## 模擬有兩個人在進行開發 - A：修改 index.html 標題為 Git Pratice - B：新增 index.html 內容以及標題 我們要建立一個新的 Issue ![](https://i.imgur.com/MkqlFBb.png) 我們要針對這次的需求輸入標題以及敘述，並把任務分派給自己 - Title：Feature.修改 index.html 標題為 Git Pratice ![](https://i.imgur.com/PbjdfC4.png) 建立好 Issue 以後，我們要從 dev 建立一個新的分支 > tips：分支很重要，要記得選對 > ![](https://i.imgur.com/JM7bDxe.png) 接著我們要扮演 B 建立另一個 Issue 以及分支，內容如下 - Title：Feature.新增 index.html 內容以及標題 - Description：新增 index.html 內容以及標題 - Assignee：自己 - 從 dev 分支底下建立一個 2-feature-index-html 分支 完成後，我們現在應該會有五個分支 ![](https://i.imgur.com/38Mizso.png) 接著進入開發，我們要先從遠端讀取分支資訊，之後切換到我們要進行修改的分支。 :::success 指令：git fetch ::: ![](https://i.imgur.com/y8gIw1b.png) 修改 index.html 內容 ```htmlembedded= <html> <head> <title>Git Pratice</title> </head> <body> </body> </html> ``` 修改完內容後，儲存到本地儲存庫 > tips：commit 訊息會和 issue 名稱相同 ![](https://i.imgur.com/aOylH1R.png) 接著推到遠端的分支上 ![](https://i.imgur.com/8GwVH3m.png) 然後可以到 GitLab 上確認有沒有成功，會看到 Last commit 的訊息變了，也可以點進 commit 內確認修改了哪些內容。 ![](https://i.imgur.com/HDGlwTD.png) --- ![](https://i.imgur.com/ilYOKAe.png) ### 查看 graph 利用不同顏色的點、線結合時間軸按照一定規律，呈現項目的版本演進記錄 - 驗證 push 有無成功 - 檢視整個專案大局觀 - 查看歷史版本演變紀錄 ![](https://i.imgur.com/50JDwyo.png) 我們剛剛扮演 A 把開發任務完成了，接著我們要扮演 B，所以我們現在切換到 `2-feature-index-html` 分支上 ![](https://i.imgur.com/TPkqS0d.png) 修改 index.html 的內容以及標題 ```htmlembedded= <!DOCTYPE html> <html> <head> <title>🥔 讚讚</title> </head> <body> 🥔 馬鈴薯好吃 </body> </html> ``` 按照跟上面一樣的流程 ![](https://i.imgur.com/c7SZCcX.png) 查看 graph ![](https://i.imgur.com/93Baod8.png) ## Merge Request（合併請求） 為了維持程式碼整潔，通常會有 Code Review（互相檢查代碼是否按照當初約好的方式一起寫 ex：變數名稱命名方式等…），因此可以達到同事之間互相檢查代碼的認證機制。 > CR 時會直接在 Merge Request 中的 Change 進行溝通，完成 CR 後就會按一個讚👍 開發完成後，我們需要進行功能的合併，要先發一個 Merge Request ![](https://i.imgur.com/TKtmzW4.png) --- 記得分支要選對 ![](https://i.imgur.com/fHEtPS7.png) GitLab 會自動幫你填上標題，Asignee 要記得分配給自己 ![](https://i.imgur.com/huEECMU.png) 建立成功 ![](https://i.imgur.com/yOjxfes.png) 接著我們要比照上面，換成 B 來建立 Merge Request 完成之後，我們現在會發現，兩個 Merge Request 都能夠進行 Merge 的動作 ![](https://i.imgur.com/sM8TqYB.png) 那我們先當 A，將第一個 Feature.修改 index.html 標題為 Git Practice 的 Merge Request 進行 Merge 動作 ![](https://i.imgur.com/mZHMHcd.png) Merge 成功 ![](https://i.imgur.com/CZEAoIA.png) --- ![](https://i.imgur.com/2xy6sRW.png) 因為我們剛有勾選 Delete Source Branch，所以會發現分支被刪掉了，這樣就代表 A 的任務完成了 ![](https://i.imgur.com/Dim7PDP.png) 那我們接下來回到 B，會發現不能進行 Merge 的動作 ![](https://i.imgur.com/9iCZlnW.png) ### 衝突 因為兩個人開發時改到了相同的地方，所以發生了衝突，這時我們就要來進行解衝突的動作。 我們先回到本地端，進行 `git fetch` 重新取得遠端分支的情況 ![](https://i.imgur.com/QQQHETj.png) 我們要來進行 rebase 的動作 ![](https://i.imgur.com/UvhNqrc.png) :::info [另一種合併方式（使用 rebase）](https://gitbook.tw/chapters/branch/merge-with-rebase) ::: :::success 指令：git rebase -i origin/dev ::: Enter 後會看到這個畫面，選擇你要的 Commit，並在前面加上 pick，儲存離開 :wq ![](https://i.imgur.com/2otiuOo.png) 可以看到他已經幫你自動 auto-merging index.html 這個檔案，但是發現 index.html 有 conflict，因此需要解衝突 ![](https://i.imgur.com/OVta3y8.png) 假如你也是使用 VS Code 的話就會看到這個畫面，你可以透過 VS Code 選擇你要的改動，也可以手動更改，我這邊選擇 Accept Incoming Change ![](https://i.imgur.com/nVr7dlm.png) --- ![](https://i.imgur.com/HNzkIRB.png) :::success 指令：git status 檢查 Git 狀態 ::: ![](https://i.imgur.com/7ebJf2F.png) 此時，告訴 git 你已經可以繼續下一個 commit 點的衝突，但是因為這邊只有一個 commit 需要解衝突，因此 git 會知道我們已經處理完衝突了~ ``` git add index.html git rebase --continue ``` >tips：一樣使用 :wq 離開 ![](https://i.imgur.com/ay4UwDg.png) ![](https://i.imgur.com/Dkv5aEI.png) 接著，我們解完衝突了，想要把程式碼上傳回遠端，會發現不能執行 push ![](https://i.imgur.com/fUAAI18.png) 這是因為我們本地端的程式碼與遠端上的程式碼不符合，所以我們在本地解完衝突後，需有使用 -f 參數強制推上去 :::success git push -f ::: > tips：-f 不能亂使用喔! ![](https://i.imgur.com/xgXOlMA.png) rebase 示意圖，我們原本是從第一個 commit 點切出來，但是使用 rebase 就可以更改成從最新的 commit 點切出來。 ![](https://i.imgur.com/kYgJ5mN.png) 到這裡我們就完全解完衝突了，可以回去 Merge Request 進行 Merge 的動作了。 ![](https://i.imgur.com/dVtTtmA.png) --- ![](https://i.imgur.com/NABntuC.png) ## 例外處理 假如我不小心合錯了，應該要怎麼辦呢？ ### Revert 我們可以使用 GitLab 提供的 GUI 快速進行 Revert 先回到 Merge Request 的畫面，會看到原本是 Merge 的位置，現在有 Revert 可以按 ![](https://i.imgur.com/guVyB1a.png) >tips：分支真的很重要，記得要選對 ![](https://i.imgur.com/gDHxzBM.png) --- ![](https://i.imgur.com/a8T7XjK.png) --- ![](https://i.imgur.com/SLBHiO2.png) 到這邊 Revert 就完成了，非常地快速又簡單 ## 課後延伸 以下還有一些 git 的指令，大家可以自行 google 查詢用法 ::: warning Google 是一位很棒的老師，大家都應該學著使用😎 ::: - \-\-amend 在[第一次 Git 工作坊文章](https://hackmd.io/@2HiJ3gJTTiub4kPJs9-McQ/HJReVaU4u)上課簡報內有提到 - rebase –i 其他用法 - cherry-pick - commit 序號的應用 - blame - Reset ::: warning 不論遇到什麼問題都能夠直接詢問學長姊，千萬不要害羞❕❕❕ ::: --- ## 參考資料 :::info [讓我們一起來，談把儲存庫發佈到網路上 Push Remote](https://ithelp.ithome.com.tw/articles/10224479) [[Linux] SSH 金鑰是什麼？私鑰與公鑰？如何自己產生一個SSH金鑰？](https://richarlin.tw/blog/linux-ssh_key/) [另一種合併方式（使用 rebase）](https://gitbook.tw/chapters/branch/merge-with-rebase) ::: --- git 的實際演練就到這邊結束了，大家可能還不會那麼快就接觸到專案，使用到 git，但是大家平常也可以多多練習 git，把你練習過的題目上傳到 GitHub 上面喔，大家在練習了自我介紹以及留言板後，也可以試著使用 GitHub Page 把你的網頁給 host 起來喔。 :::info [GitHub Page 官方網站](https://pages.github.com) [從零開始: 用github pages 上傳靜態網站](https://medium.com/%E9%80%B2%E6%93%8A%E7%9A%84-git-git-git/%E5%BE%9E%E9%9B%B6%E9%96%8B%E5%A7%8B-%E7%94%A8github-pages-%E4%B8%8A%E5%82%B3%E9%9D%9C%E6%85%8B%E7%B6%B2%E7%AB%99-fa2ae83e6276) :::