Git(實際練習(GitLab))

--- title: Git(實際練習(GitLab)) tags: 暑假 --- Git(實際練習(Gitlab)) === ## 註冊GitLab ## 設定 SSH Key 為什麼我們需要設定 SSH key 呢，簡單來說我們使用 Git 上傳到 GitLab 時，我們是上傳到遠端伺服器，每次上傳都需要進行驗證，就是輸入帳號密碼，而有了 SSH key 之後，我們就不需要一直輸入帳號密碼，SSH key 就相當於一組金鑰，可以讓我們更快速地進行驗證。 ## 如何設定 SSH key 我們在終端機下以下指令 ``` ssh-keygen ``` ![](https://i.imgur.com/CsWxYcO.png) 就會產生出 SSH key 我們需要的在 C:\Users\你的使用者名稱\.ssh\id_rsa.pub 在這資料中會有ssh key 複製下來後我們要到 GitLab 進行設定 # 模擬 git 使用情境我們會模擬專案有的分支 - Master / Main（正式上線中的服務版本） - Test（測試的版本） - Dev（開發中的版本） - 功能分支（會從 dev 分支切出來） ![](https://i.imgur.com/XqiLAz7.png) 我們接到了任務，需要標題為 `Git 實作` 的網頁，接著要在裡面新增 `hi i am bananana` 的內容。我們先新增一個 Git-Practice 的資料夾 ![](https://i.imgur.com/kgGXKl7.png) 接著我們進到資料夾內，右鍵開啟 git bash，我們先進行 git 的基本設定。 ``` git config --global user.name "user name" git config --global user.email "email" ``` 設定完後可以透過 `git config --list` 檢查資訊。 ![](https://i.imgur.com/HKXhvqQ.png) 接著進行 git init 的動作，初始化這個資料夾。 ``` git init ``` ## 建立專案先新增一個 index.html，內容如下 ![](https://i.imgur.com/y8sAsp7.png) ``` <html> <head> <title>Document</title> </head> <body> </body> </html> ``` 接著回到終端機輸入 git status 檢查 Git 狀態，會發現我們有一個 Untracked 的 index.html ![](https://i.imgur.com/oAe420T.png) 使用 `git add index.html` 將檔案存入暫存區 :::success 指令：git add `<file name>` 將檔案暫存到暫存區（Staging Area） ::: ![](https://i.imgur.com/L36jeCe.png) 然後我們要將暫存好的檔案存到儲存庫，`git commit -m "Initial commit"` :::success 指令：git commit -m “commit 訊息” ::: ![](https://i.imgur.com/WdvEz0a.png) 存進去後，我們可以來查看 commit 的歷史紀錄 :::success 指令：git log ::: ![](https://i.imgur.com/C0YwL3V.png) 接著我們到 GitLab 上建立一個新專案 ![](https://i.imgur.com/puv3sVT.png) ![](https://i.imgur.com/eHuKdFg.png) ![](https://i.imgur.com/DrMzJFV.png) ![](https://i.imgur.com/4G0u5K5.png) 成功之後可以看到這一頁，我們要把本地端綁定遠端的專案，在終端機中輸入指令 :::success git remote add origin 遠端儲存庫連結 ::: >或是可以按clone方式也可以 ![](https://i.imgur.com/BKc9diX.png) 然後把我們本地端的專案上傳到遠端這裡打岔一下，以前程式碼倉庫名叫master 現在被預設改成main ![](https://i.imgur.com/bRtBwiQ.png) 分析原因：由於名稱不一樣，遠程和本地的倉庫不能連接上解决方式：統一遠程和本地的倉庫名稱即可 1、把本地的 master 倉庫名稱修改為遠端的 main 重命名命令： :::success git branch -m master main ::: ( git branch -m oldBranchName newBranchName) ![](https://i.imgur.com/jAdb0u8.png) 2.再做 push 動作(沒有-u) :::success 指令：git push origin master ::: ![](https://i.imgur.com/MQLcjal.png) 成功後我們回到 GitLab 上就會看到以下畫面 (main裡有index.html了) ![](https://i.imgur.com/bRtBwiQ.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/DIkiAlT.png) 完成後(再到原本地點查看( Repository> Branches))，會有三個分支 ![](https://i.imgur.com/oJlbXF2.png) ## 模擬被主管指派了一個新的功能 - Issue > Issue 的用處 :::warning 1. 對應到問題與需求 2. 方便主管管理，掌握每個人的進度 ::: ## 模擬有兩個人在進行開發 - A：修改 index.html 標題為 Git Pratice - B：新增 index.html 內容以及標題我們要建立一個新的 Issue 我們要針對這次的需求輸入標題以及敘述，並把任務分派給自己 - Title：Feature.修改 index.html 標題為 Git Pratice ![](https://i.imgur.com/QhIfHa7.png) 建立好 Issue 以後，我們要從 dev 建立一個新的分支 > tips：分支很重要，要記得選對 > ![](https://i.imgur.com/q69bsDt.png) 接著我們要扮演 B 建立另一個 Issue 以及分支，內容如下 - Title：Feature.新增 index.html 內容以及標題 - Description：新增 index.html 內容以及標題 - Assignee：自己 - 從 dev 分支底下建立一個 2-feature-index-html-git-pratice 分支完成後，我們現在應該會有五個分支 ![](https://i.imgur.com/6IxHruU.png) 接著進入開發，我們要先從遠端讀取分支資訊，之後切換到我們要進行修改的分支。 :::success 指令：git fetch ::: ![](https://i.imgur.com/e7VbXOd.png) 修改 index.html 內容 ```htmlembedded= <html> <head> <title>Git Pratice</title> </head> <body> </body> </html> ``` 修改完內容後，儲存到本地儲存庫 > tips：commit 訊息會和 issue 名稱相同接著推到遠端的分支上 ![](https://i.imgur.com/Q7l2b7Q.png) 然後可以到 GitLab 上確認有沒有成功，會看到 Last commit 的訊息變了，也可以點進 commit 內確認修改了哪些內容。 ![](https://i.imgur.com/H8nB035.png) --- ![](https://i.imgur.com/Zoadvqk.png) ### 查看 graph 利用不同顏色的點、線結合時間軸按照一定規律，呈現項目的版本演進記錄 - 驗證 push 有無成功 - 檢視整個專案大局觀 - 查看歷史版本演變紀錄 ![](https://i.imgur.com/50JDwyo.png) 我們剛剛扮演 A 把開發任務完成了，接著我們要扮演 B，所以我們現在切換到 `2-feature-index-html-git-pratice` 分支上 ![](https://i.imgur.com/rTKplrh.png) 修改 index.html 的內容以及標題 ```htmlembedded= <!DOCTYPE html> <html> <head> <title>hi</title> </head> <body> i am banana </body> </html> ``` 按照跟上面一樣的流程 ![](https://i.imgur.com/6LGFPwq.png) 查看 graph ![](https://i.imgur.com/93Baod8.png) ## Merge Request（合併請求）開發完成後，我們需要進行功能的合併，要先發一個 Merge Request ![](https://i.imgur.com/TKtmzW4.png) --- 記得分支要選對 ![](https://i.imgur.com/B89WArM.png) GitLab 會自動幫你填上標題，Asignee 要記得分配給自己 ![](https://i.imgur.com/jALpUST.png) 建立成功 ![](https://i.imgur.com/OfuH4T3.png) 接著我們要比照上面，換成 B 來建立 Merge Request 完成之後，我們現在會發現，兩個 Merge Request 都能夠進行 Merge 的動作 ![](https://i.imgur.com/QhiOzYf.png) 那我們先當 A，將第一個 Feature.修改 index.html 標題為 Git Practice 的 Merge Request 進行 Merge 動作 ![](https://i.imgur.com/mZHMHcd.png) Merge 成功 ![](https://i.imgur.com/PLnZ131.png) --- ![](https://i.imgur.com/2xy6sRW.png) 因為我們剛有勾選 Delete Source Branch，所以會發現分支被刪掉了，這樣就代表 A 的任務完成了 ![](https://i.imgur.com/Kxe0sOg.png) 那我們接下來回到 B，會發現不能進行 Merge 的動作 ![](https://i.imgur.com/PuZO7nH.png) ### 衝突因為兩個人開發時改到了相同的地方，所以發生了衝突，這時我們就要來進行解衝突的動作。我們先回到本地端，進行 `git fetch` 重新取得遠端分支的情況 ![](https://i.imgur.com/dgeijT5.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，因此需要解衝突假如你也是使用 VS Code 的話就會看到這個畫面，你可以透過 VS Code 選擇你要的改動，也可以手動更改，我這邊選擇 Accept Incoming Change :::success 指令：git status 檢查 Git 狀態 ::: 此時，告訴 git 你已經可以繼續下一個 commit 點的衝突，但是因為這邊只有一個 commit 需要解衝突，因此 git 會知道我們已經處理完衝突了~ ``` git add index.html git rebase --continue ``` >tips：一樣使用 :wq 離開 ![](https://i.imgur.com/ay4UwDg.png) ![](https://i.imgur.com/d2wuAnE.png) 接著，我們解完衝突了，想要把程式碼上傳回遠端，會發現不能執行 push ![](https://i.imgur.com/3irkkNH.png) 這是因為我們本地端的程式碼與遠端上的程式碼不符合，所以我們在本地解完衝突後，需有使用 -f 參數強制推上去 :::success git push -f ::: > tips：-f 不能亂使用喔! ![](https://i.imgur.com/Wq8WmsO.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/jnjJEOn.png) >tips：分支真的很重要，記得要選對 ![](https://i.imgur.com/cdXxMYY.png) --- ![](https://i.imgur.com/SLBHiO2.png) 到這邊 Revert 就完成了，非常地快速又簡單接著回到終端機輸入 `git status` 檢查 Git 狀態，會發現我們有一個 Untracked 的 index.html ## 刪除project 1.首先，在項目列表中選擇要删除的project 2.進入後，在左邊列表的Settings中的General 3.找到點擊Advanced 的Expend按钮 4.滑到最底下，看到“Delete this project” ![](https://i.imgur.com/5q6iVlV.png) ---- :::info [常用指令](https://hellojs-tw.github.io/git-101/cheat-sheet.html) [Git 實際演練 - 前言](https://hackmd.io/@cmrdb/SJF6sOujt/%2F1cAZJzaOTCuoB2dRBxpASw) []() :::