D7 - 加入版本控制,讓你的專案擁有「多重宇宙」

閱讀時間約 8 分鐘

好了,經過前幾篇的努力,我們的開發環境已經搭建完成,並進行了初步的測試。一切看起來都很順利,但在正式進入開發之前,我們還有一件重要的事情要做:加入版本控制。


你可能會想:「現在還早吧?我一個人開發,有必要嗎?」但相信我,版本控制就像是遊戲中的存檔點,或者電影裡的多重宇宙時間線,在你需要的時候,能讓你回到過去,或者探索不同的開發路線。


一、為什麼需要版本控制?

想像一下,你正在開發一個新功能,結果一不小心把原本運作正常的程式碼改壞了。如果沒有版本控制,你可能得花上好幾個小時,甚至幾天,來找出問題所在。但有了版本控制,只要輕鬆一個指令,就能回到之前的狀態,就像穿越到了平行宇宙,一切問題都不復存在。

個人經驗分享:有一次,我在專案中嘗試一個新框架,結果發現完全不適合。幸好當初有用 Git,把嘗試的部分放在新分支,最後輕鬆切回主分支,省了不少麻煩。

二、Git 就是你的「時間機器」

Git 可以說是開發者的時間機器,讓你在專案的時間線上自由穿梭。每一次的提交(commit),就像是遊戲的存檔點,你可以在任何時候回到這個點。更厲害的是,Git 還支持分支(branch),讓你可以在不同的時間線上探索,互不干擾。

加入版本控制後,你就擁有了「多重宇宙」的力量。錯誤的代碼?沒關係,那只是另一個平行宇宙的悲劇,在這個宇宙裡,我們可以重新開始!

三、開始使用 Git

1. 安裝 Git

首先,確保你的電腦已經安裝了 Git。如果還沒有,請到 Git 官方網站 下載並安裝。各個平台的安裝都非常簡單,這裡就不贅述了。

2. 初始化 Git 儲存庫

在專案的根目錄下,執行以下指令:

git init

這會在你的專案中建立一個 .git 目錄,Git 會在這裡存放所有的版本控制資訊。

3. 設定 .gitignore

我們不希望把一些不必要的檔案納入版本控制,特別是那些會隨系統變動的檔案,例如編譯後的檔案、環境設定檔等。

在專案根目錄下建立 .gitignore 檔案,內容如下:

# Node modules
web/node_modules/
web/.nuxt/
web/.output/

# Laravel vendor
api/vendor/
api/storage/
api/node_modules/

# Environment files
*.env
.env

# Composer lock
api/composer.lock

# Docker volumes
.docker-env/.db_data/

# Log files
*.log

# MacOS
.DS_Store

# IDE files
.idea/
.vscode/

這樣,Git 就會自動忽略這些檔案,不會把它們納入版本控制。

4. 首次提交

現在,我們可以將目前的專案狀態提交到 Git:

git add .
git commit -m "初次提交:建立專案結構與開發環境"

恭喜你,你的專案現在已經有了第一個存檔點!

四、將專案推送到 GitHub

雖然在本機使用 Git 已經不錯,但將專案推送到遠端儲存庫(如 GitHub)會更安全,也方便未來的協作。

1. 註冊 GitHub 帳號

如果你還沒有 GitHub 帳號,請到 GitHub 官方網站註冊一個。GitHub 是目前最流行的代碼託管平台,除了備份相關程式碼外,還有很多強大的功能等著你探索。

2. 建立新的儲存庫{這邊我就列個大概}

登入 GitHub 後,點擊右上角的「+」號,選擇「New repository」,然後:

  • Repository name:輸入你的專案名稱,例如 my-finance-app。
  • Description:簡單描述一下你的專案。
  • Public / Private:選擇儲存庫的可見性。如果你想讓專案公開,選擇 Public;如果只想自己看,選擇 Private。
  • Initialize this repository with a README:不要勾選,因為我們已經在本機有代碼了。
    點擊「Create repository」,GitHub 會為你建立一個新的儲存庫。

3. 連接遠端儲存庫

回到本機終端機,執行以下指令(請將 your-username 和 your-repo 替換為你的 GitHub 用戶名和儲存庫名稱):

git remote add origin https://github.com/your-username/your-repo.git
git branch -M main
git push -u origin main

這樣,你的專案就成功推送到 GitHub 上了!現在,即使你的電腦爆炸(當然希望不會),你的代碼也安全地存在於雲端。

五、日常使用 Git 的技巧

1. 維持良好的提交習慣

每當完成一個功能或修正一個 bug,記得進行提交。提交訊息要清晰明瞭,讓未來的自己一看就懂。例如:

git commit -m "新增財務記錄的 API 功能"

2. 使用分支管理開發

分支就像是多重宇宙的不同時間線,讓你可以在不影響主線的情況下進行開發。當你想嘗試新的功能或實驗時,可以建立一個新分支:

git checkout -b feature/add-authentication

開發完成並測試無誤後,再合併回主分支:

git checkout main
git merge feature/add-authentication

3. 定期推送到遠端儲存庫

別忘了定期將你的提交推送到 GitHub,上傳到雲端既是備份,也是紀錄。

git push

4. 避免將敏感資訊提交到 Git

確保 .env 等包含敏感資訊的檔案被加入 .gitignore,避免不小心洩露 API 金鑰、密碼等重要資訊。

再次提醒:別問我為什麼知道這麼重要,因為我聽說,有人在公開的儲存庫中提交過自己的 AWS 密鑰,結果被亂刷了一大筆費用。那真是教訓啊!

六、Git 進階技巧

1. 回到過去

如果某次提交導致專案無法運作,你可以回到之前的版本:

git checkout <commit-hash>

2. 檢視歷史紀錄

查看所有的提交歷史,了解專案的演進:

git log

3. 撤銷更改

如果修改了檔案但還沒提交,想要撤銷,可以執行:

git checkout -- <file>

七、結語

加入版本控制,就像是給你的專案安裝了一個時光機,讓你能夠自由地在時間線上穿梭,探索各種可能性,而不用擔心犯錯。Git 和 GitHub 不僅僅是工具,更是開發者的好夥伴。

下一步

現在,我們的專案已經有了穩固的基礎和時間機器,接下來就可以正式開始後端 API 的開發了!讓我們繼續這場充滿挑戰和樂趣的冒險吧!

最後的叮嚀:

版本控制可能一開始看起來有點複雜,但相信我,一旦習慣了,你會覺得離不開它。就像你花了 N 個小時調整了代碼格式,只有自己看得出來,但這種內心的滿足感,才是開發的樂趣所在!


加油,我們在下一篇文章中見!


這是一系列以軟體開發為主題的輕鬆分享,內容涵蓋了技術選擇、開發經驗、實戰應用等多方面的議題。無論是如何在眾多框架中做出選擇,還是如何應對技術轉移的挑戰,作者都用幽默、有趣的對話風格,將複雜的技術問題轉化為易懂的故事。
留言0
查看全部
發表第一個留言支持創作者!
本文指導如何驗收基於 Docker 的開發環境,檢查 Laravel 後端、Nuxt 前端、Nginx 反向代理和 MariaDB 資料庫是否正常運行。透過啟動容器、修改 hosts 檔案、測試各服務的運作,確保整個開發環境穩定。並且提供了常見問題的解決方案,幫助開發者順利驗收環境。
本文詳細介紹了如何使用 Docker 環境構建 Laravel 後端和 Nuxt 前端,並通過 Nginx 進行反向代理來協調它們的互動。從 docker-compose.yml 配置到各個服務的設定,讓開發環境穩定運行,並提供了常用的 Docker 指令以便於操作。
好了,到了這個階段,我們終於要進入 Docker 的世界了!前幾篇文章我們討論了系統規劃與需求,現在來到實作的部分,要為整個開發環境打好基礎。這篇文章將帶你一步步打造出一個基於 Docker 的開發環境,裡面包含了 Laravel(後端)、Nuxt(前端)、Nginx(伺服器),以及 MariaDB
這篇文章深入探討了開發個人財務管理系統的規劃過程,包括需求確認、環境建置及技術選型等關鍵步驟。作者強調在開發前進行充分的規劃與設計是成功的基礎,並提供了具體的工具與技術選擇,如PHP、Laravel和Docker。通過清晰的步驟指引,文章幫助讀者掌握系統開發的核心要素,確保順利推進專案。
獨自開發並不等於掌握所有技術,而是具備解決問題和完成專案的能力。透過選擇實用且具挑戰性的專題,如個人財務管理系統,開發者可以快速實現最小可行性產品(MVP)。本文將探討如何從前端或後端開始,搭建核心功能並優化系統,以提升用戶體驗,並持續學習和成長。
這個「我獨自開發」系列,來自我多年的工程師經歷。雖然常聽到大家說團隊合作,但實際上,很多時候我們都在獨自解決問題。無論是學新技術,還是完成某個功能,大部分的時間都是自己在面對螢幕、查資料、試錯誤、解Bug。 所以...
本文指導如何驗收基於 Docker 的開發環境,檢查 Laravel 後端、Nuxt 前端、Nginx 反向代理和 MariaDB 資料庫是否正常運行。透過啟動容器、修改 hosts 檔案、測試各服務的運作,確保整個開發環境穩定。並且提供了常見問題的解決方案,幫助開發者順利驗收環境。
本文詳細介紹了如何使用 Docker 環境構建 Laravel 後端和 Nuxt 前端,並通過 Nginx 進行反向代理來協調它們的互動。從 docker-compose.yml 配置到各個服務的設定,讓開發環境穩定運行,並提供了常用的 Docker 指令以便於操作。
好了,到了這個階段,我們終於要進入 Docker 的世界了!前幾篇文章我們討論了系統規劃與需求,現在來到實作的部分,要為整個開發環境打好基礎。這篇文章將帶你一步步打造出一個基於 Docker 的開發環境,裡面包含了 Laravel(後端)、Nuxt(前端)、Nginx(伺服器),以及 MariaDB
這篇文章深入探討了開發個人財務管理系統的規劃過程,包括需求確認、環境建置及技術選型等關鍵步驟。作者強調在開發前進行充分的規劃與設計是成功的基礎,並提供了具體的工具與技術選擇,如PHP、Laravel和Docker。通過清晰的步驟指引,文章幫助讀者掌握系統開發的核心要素,確保順利推進專案。
獨自開發並不等於掌握所有技術,而是具備解決問題和完成專案的能力。透過選擇實用且具挑戰性的專題,如個人財務管理系統,開發者可以快速實現最小可行性產品(MVP)。本文將探討如何從前端或後端開始,搭建核心功能並優化系統,以提升用戶體驗,並持續學習和成長。
這個「我獨自開發」系列,來自我多年的工程師經歷。雖然常聽到大家說團隊合作,但實際上,很多時候我們都在獨自解決問題。無論是學新技術,還是完成某個功能,大部分的時間都是自己在面對螢幕、查資料、試錯誤、解Bug。 所以...
你可能也想看
Google News 追蹤
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、優質公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件,包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化,幫助開發者提高工作效率,適合希望深入瞭解前端開發和網站架構的讀者。
Thumbnail
不論是 Astra、Blocksy 還是 Kadence 佈景主題,都有內建頁首與頁尾編輯器,你可以在外觀自訂器中以所見即所得的方式新增各種元素,像是選單、按鈕及社群圖示。
Thumbnail
這篇內容,將教你如何開啟新的GameMaker專案,並調整畫面佈局。也會講解,為何建議用英文語系,來進行遊戲開發。
版本控制 (Version Control), 是一種追蹤檔案被更改歷史的技術, 是團隊合作必備的工作實務[1]。 我在博士一二年級時期, 比較像是單打獨鬥, 與合作的學弟妹也是一對一溝通, 可以維持同步,把研究成果做出來。 然而,當我到博士三年級以後,
Thumbnail
如果所有裝置都可以透過單一檔案管理器統一管理這會有多方便? 紅茶最近在Github上找到專案,名叫Spacedrive。這個專案的宗旨,開發團隊希望未來只需要一個App就可以連接所有裝置和雲端空間,來更方便的管理自己手上的檔案。
Thumbnail
成功加入Anytype之後就可以開始探索這一個開源的筆記軟體了^_^ 開始Anytype之前..... 1.刪除所有初始物件 2.思考自己的使用需求 3.不著急學會所有功能
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
建構Anytype之前..... 1.清晰劃分工作區 2.選擇模板套用 3.改變外觀界面
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、優質公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件,包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化,幫助開發者提高工作效率,適合希望深入瞭解前端開發和網站架構的讀者。
Thumbnail
不論是 Astra、Blocksy 還是 Kadence 佈景主題,都有內建頁首與頁尾編輯器,你可以在外觀自訂器中以所見即所得的方式新增各種元素,像是選單、按鈕及社群圖示。
Thumbnail
這篇內容,將教你如何開啟新的GameMaker專案,並調整畫面佈局。也會講解,為何建議用英文語系,來進行遊戲開發。
版本控制 (Version Control), 是一種追蹤檔案被更改歷史的技術, 是團隊合作必備的工作實務[1]。 我在博士一二年級時期, 比較像是單打獨鬥, 與合作的學弟妹也是一對一溝通, 可以維持同步,把研究成果做出來。 然而,當我到博士三年級以後,
Thumbnail
如果所有裝置都可以透過單一檔案管理器統一管理這會有多方便? 紅茶最近在Github上找到專案,名叫Spacedrive。這個專案的宗旨,開發團隊希望未來只需要一個App就可以連接所有裝置和雲端空間,來更方便的管理自己手上的檔案。
Thumbnail
成功加入Anytype之後就可以開始探索這一個開源的筆記軟體了^_^ 開始Anytype之前..... 1.刪除所有初始物件 2.思考自己的使用需求 3.不著急學會所有功能
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
建構Anytype之前..... 1.清晰劃分工作區 2.選擇模板套用 3.改變外觀界面