# 如何使用 Git? (遠端篇) --- ## 目錄 - 遠端建立專案 - 設定遠端連線 - 設定UpStream - 下載專案 - 同步遠端分支 - GUI 工具介紹 - GitFlow - 小知識 --- ## 遠端建立專案 ---- ### Github 建立遠端專案 <li style="text-align:start;font-size:30px;padding-left: 200px;">步驟ㄧ、建立專案名稱</li> <img src="https://i.imgur.com/UoaJ8sj.png" height="450"> ---- ### Github 建立遠端專案 <li style="text-align:start;font-size:30px;padding-left: 200px;">步驟二、選擇遠端建立專案的方式</li> <img src="https://i.imgur.com/7IwSfUT.png" height="450"> ---- ### Github 建立遠端專案 <li style="text-align:start;font-size:30px;padding-left: 150px;">步驟三、建立完成</li> <img src="https://i.imgur.com/6YBbXbt.png" height="200"> --- ## 設定遠端連線 ---- ### Repository URL <ul style="margin-left:80px;"> <li style="text-align:start;font-size:30px">HTTPS：每次上傳 code 到 Github 的時候，都要輸入一次 username、password</li> </ul> ```= https://github.com/boringpig/git-demo.git ``` <ul style="margin-left:-60px;"> <li style="text-align:start;font-size:30px">SSH：只要設定好一次之後，就不用再輸入帳號/密碼了</li> </ul> ```= git@github.com:boringpig/git-demo.git ``` ---- ### 透過 SSH 如何連線？ - SSH 跟 GitHub 建立連線是透過[RSA加密演算法](https://zh.wikipedia.org/wiki/RSA%E5%8A%A0%E5%AF%86%E6%BC%94%E7%AE%97%E6%B3%95) - RSA 金鑰是一對(一把私鑰 + 一把公鑰) - "公鑰"提供給 GitHub Server - "私鑰"存放在自己的電腦， - 建立連線會進行公私鑰配對及身分驗證 ---- ### 圖示 <img src="https://i.imgur.com/sKcwJOf.png" height="470"> ---- ### 如何產生公私鑰 <li style="text-align:start;font-size:30px;list-style:none;padding-left:50px;">1. 使用 ssh-keygen 產生金鑰</li> <p style="text-align:start;font-size:28px;margin-left:80px;margin-top:0px;">可以在 ~/.ssh 裡面看到 id_rsa 私鑰、id_rsa.pub 公鑰</p> ```= ssh-keygen -t rsa -C [備註] ``` <li style="text-align:start;font-size:30px;list-style:none;padding-left:50px;">2. 將公鑰上傳到 GitHub Server</li> ```= cat ~/.ssh/id_rsa.pub ``` ---- ### 加入到遠端 Server <li style="text-align:start;font-size:30px;list-style:none;padding-left:150px;">3. 遠端加入公鑰</li> <img src="https://i.imgur.com/tJXx6aW.png" height="400"> ---- ### 測試連線 <li style="text-align:start;font-size:30px;list-style:none;padding-left:50px;">4. 測試 SSH 連線是否成功</li> ```= ssh -T git@github.com ``` <img src="https://i.imgur.com/rtEHMIL.png"> ---- ### 設定遠端 Repo Url <li style="text-align:start;font-size:30px;padding-left:50px;">加入遠端 url</li> ```= git remote add <short name> <repo url> # example git remote add origin https://github.com/boringpig/git-demo.git ``` ---- ### 設定遠端 Repo Url <li style="text-align:start;font-size:30px;padding-left:50px;">查看專案遠端狀態</li> ```= git remote -v ```  ---- ### 其他 remote 指令 <li style="text-align:start;font-size:30px;padding-left:50px;">一般來說 Git 會把主要的 remote 命名為 origin</li> ```= # 修改 remote name git remote rename <short name> <new name> # 刪除 remote git remote rm <short name> ``` ---- ### 上傳分支 <li style="text-align:start;font-size:30px;padding-left:50px;">設定完就可以推到遠端</li> ```= git push -u <remote name> <branch name> # example git push -u origin master ``` <img src="https://i.imgur.com/JStMER2.png" height="300"> ---- ### 例外狀況 - 為何加完 SSH key 還要叫你打密碼  --- ## 設定UpStream ---- ### 為何要設定 <li style="text-align:start;font-size:33px;padding-left:30px;">設定 upstream 可以使分支追蹤指定的遠端分支</li>  ---- ### 如何設定 <li style="text-align:start;font-size:33px;padding-left:45px;list-style:none;">1. 在推到遠端順便設定 upstream</li> ```= git push -u origin master git push --set-upstream-to=origin master ``` <li style="text-align:start;font-size:33px;padding-left:45px;list-style:none;">2. 舊有分支設定 upstream</li> ```= git branch -u origin/master git branch --set-upstream-to=origin/master ``` <p style="color:red;text-align:start;font-size:33px;margin-left:45px;">* 設定完之後推到遠端就只要 git push</p> ---- ### 取消追蹤 ```= git branch --unset-upstream origin/master ```  --- ## 下載專案 ---- ### 下載指定分支 <li style="text-align:start;font-size:33px;padding-left:45px;">-b 指定分支，如果沒加參數預設為 master</li> ```= # 下載指定分支 git clone <repo URL> -b <branch name> # example git clone git@bitbucket.org:evolutivelabs/hidden-server.git -b develop ``` ---- ### 下載單一分支 <li style="text-align:start;font-size:33px;padding-left:45px;">--single-branch 只下載單一分支 </li> <li style="text-align:start;font-size:33px;padding-left:45px;">--depth 下載幾個 commit 數量 </li> ```= git clone <url> -b <branch> --single-branch --depth <number of commits> # example git clone git@bitbucket.org:evolutivelabs/hidden-server.git -b develop --single-branch --depth 1 ``` ---- ### 兩者相比 <li style="text-align:start;font-size:33px;padding-left:40px;">指定分支</li> <img src="https://i.imgur.com/XaDXq55.png"> <li style="text-align:start;font-size:33px;padding-left:40px;">單一分支</li> <img src="https://i.imgur.com/RESRNIY.png"> --- ## 同步遠端分支 ---- ### 為何要同步 <ul style="margin-left:80px;"> <li style="text-align:start;font-size:33px;">當遠端分支有更動，本地端要透過指令去同步 remote branch 不然不會知道遠端有變更</li> </ul> ```= git fetch --all ``` ---- ### 同步後 <ul style="margin-left:-40px;"> <li style="text-align:start;font-size:33px;">如果分支有設定 Upstream 就會更新本地端分支狀態</li> </ul> ```= git status ```  ---- ### 自動同步並合併 <ul style="margin-left:-5px;"> <li style="text-align:start;font-size:33px;">git pull 會先同步遠端分支的狀態，如果有變更自動合併</li> </ul> ```= git pull ``` ---- ### 強制更新遠端分支 <ul style="margin-left:-150px;"> <li style="text-align:start;font-size:33px;">直接把本地端的 branch 覆蓋遠端的 branch</li> <li style="text-align:start;font-size:33px;">-f 參數為 --force 的縮寫，代表"強制"的意思</li> </ul> ```= git push -f ``` ---- ### 刪除遠端分支 <li style="text-align:start;font-size:33px;padding-left:50px;">方法ㄧ、指令刪除</li> ```= git push origin :feature/xxx git push origin --delete feature/xxx ```  <li style="text-align:start;font-size:33px;padding-left:50px;">方法二、介面刪除</li> ---- ### 查看 remote 狀態 ```= # 查看遠端分支狀態 git remote show <remote name> ``` <img src="https://i.imgur.com/Iwn41ka.png" height="330"> ---- ### 刪除過時的分支 <li style="text-align:start;font-size:33px;padding-left:50px;">如果使用介面刪除 git fetch 無法同步到本地端</li> ```= git remote prune <remot name> git fetch --all -p git fetch --all --prune ``` --- ### GUI 介紹 ---- ### 為何需要 GUI 工具 <ul style="margin-left: 50px;"> <li style="font-size:35px;">很多 git 的指令，不常用容易忘記</li> <li style="font-size:35px;">在操作版控時不需要去記憶指令</li> <li style="font-size:35px;">圖像化的分支圖清楚了解分支狀態</li> </ul> ---- ### 常見工具 <li style="text-align:start;padding-left:160px;font-size:33px;"><a href="https://www.sourcetreeapp.com/">SourceTree</a></li> <img src="https://i.imgur.com/dFAeyDW.jpg" height="430"> ---- ### 常見工具 <li style="text-align:start;padding-left:160px;font-size:33px;"><a href="https://www.gitkraken.com/">GitKraken</a></li> <img src="https://i.imgur.com/pVeF6fE.png" height="430"> ---- ### GitKraken 介紹 <ul style="margin-left:40px;"> <li style="text-align:start;font-size:33px;">使用 Electron 作為基底開發</li> <li style="text-align:start;font-size:33px;">SourceTree 有的功能都有</li> <li style="text-align:start;font-size:33px;">提供 git reset 介面化操作</li> <li style="text-align:start;font-size:33px;">可以自由隱藏分支</li> <li style="text-align:start;font-size:33px;">提供拖拉進行分支合併更直覺</li> <li style="text-align:start;font-size:33px;">可以直接新增檔案進行提交</li> <li style="text-align:start;font-size:33px;">Commit Template</li> <li style="text-align:start;font-size:33px;">自定義 git flow</li> <li style="text-align:start;font-size:33px;">Issue Boards</li> </ul> --- ### Git + Work Flow ---- ### 為何需要定義 - Commit tree 好醜 - 胡亂開分支造成版本混亂 - 合併分支有解不完的衝突 - 正式站跟測試站容易版本不一致 ---- ### Git Flow <img src="https://i.imgur.com/y3P3kYF.png" height="480" width="500"> <p style="font-size:30px;">資料來源 <a href="https://nvie.com/posts/a-successful-git-branching-model/">A successful Git branching model</a></p> ---- ### Git Flow <ul> <li>主要分支</li> <ul> <li>master: 交付程式版本的分支</li> <li>develop: 開發中功能的分支</li> </ul> <li>輔助分支</li> <ul> <li>feature/xxx: 功能開發分支(從 develop 切出去)</li> <li>release/xxx: 發佈測試分支(從 develop 切出去)</li> <li>hotfix/xxx: bug 修復分支(從 master 切出去)</li> </ul> </ul> <p style="font-size:33px;color:red;text-align:start;margin-left:20px;">＊當 feature、hotfix 分支有異動務必同步合併回 develop</p> <p style="font-size:33px;color:red;text-align:start;margin-left:20px;">＊主要分支只能被合併不能 commit</p> ---- ### 缺點 不適合持續發怖，因為master、develop分支差異不大，沒必要維護兩個分支 ---- ### GitHub Flow  <p style="font-size:30px;">資料來源 <a href="https://guides.github.com/introduction/flow/">Understanding the GitHub flow </a></p> ---- ### GitHub Flow <ul> <li>主要分支</li> <ul> <li>master: 交付程式版本分支</li> </ul> <li>輔助分支</li> <ul> <li>refactor-authentication、make-retina-avatars等: 命名有描述性的分支</li> </ul> </ul> ---- ### 缺點 有時候合併到 master 並非馬上部署，會造成版本不一致狀況 ---- ### GitLab Flow <li style="font-size:35px;text-align:start;margin-left:100px;">"上游優先"（upsteam first）為原則</li> <li style="font-size:35px;text-align:start;margin-left:100px;">主要分支 master 是所有其他分支的"上游"</li> <li style="font-size:35px;text-align:start;margin-left:100px;">程式的變化必須由"上游"向"下游"發展</li> ---- ### GitLab Flow <li style="font-size:35px;text-align:start;list-style:none;margin-left:260px;">第一種、持續發佈</li> <img src="https://i.imgur.com/hDoeA0Q.png" height="480"> ---- ### GitLab Flow <li style="font-size:35px;text-align:start;list-style:none;margin-left:280px;">第二種、版本發佈</li> <img src="https://i.imgur.com/uCDtZLE.png" height="500"> --- ### 小知識 ---- ### 何謂 Issue <ul style="text-align:start;"> <li>issue 用於 Bug 追蹤或功能需求管理</li> <li>先新建 Issue，再新建對應的功能分支</li> </ul> <p style="font-size:30px;text-align:start;color:red;">＊當 commit 訊息加上#編號，就可以在 issue 底下看到該功能的 commit 紀錄。</p> ---- ### 何謂 Pull Request <ul style="text-align:start;"> <li style="font-size:40px;list-style:none;">字面上為 Pull (拉取) + Request (請求)</li> <li style="font-size:40px;list-style:none;margin-top:10px;">=> 合併別人修改後的程式</li> </ul> ---- ### Pull Request 例子 <li style="font-size:35px;text-align:start;margin-left:220px;">團隊維護專案</li> <img src="https://i.imgur.com/cEXRCzt.png" height="450"> ---- ### Pull Request 例子 <li style="font-size:35px;text-align:start;margin-left:250px;">開源專案</li> <img src="https://i.imgur.com/bSaXERZ.png" height="470"> --- ## 謝謝大家希望各位 Git 能力有所提升 😀 --- ### 相關連結 - [連猴子都能懂的git](https://backlog.com/git-tutorial/tw/reference/config.html) - [Git book](https://zlargon.gitbooks.io/git-tutorial/content/) - [30 天精通 Git 版本控管](https://github.com/doggy8088/Learn-Git-in-30-days/blob/master/zh-tw/README.md) - [為你自己學Git](https://gitbook.tw/chapters/config/user-config.html) - [GitKraken 強大的剛剛好的Git GUI神器](https://wellwind.idv.tw/blog/2018/04/03/git-using-gitkraken-1-basic/) - [Git 工作流程](http://www.ruanyifeng.com/blog/2015/12/git-workflow.html)