跳到主要內容

[Git]輕輕鬆鬆用Git-ftp來管理FTP上傳檔案

前言：

一直以來，我只是一個誤入前端世界的小小書僮，寫寫HTML+CSS+JS開心過生活；沒想到最近也開始要走入後端的異世界了～(對！就是有噴火龍、史萊姆、哥布林的那個異世界)
新手的我第一個就研究屬於電子商務open source的OPENCART(對！就是越級打怪)，它是PHP為底使用MVC架構下開發的，檔案結構又區分前後台和單元。
首先遇到的第一個問題，它的資料匣超多的，每次修改又必須要到MVC個別單元下修改檔案，在本機沒太大問題，但要FTP傳上正式站時，全部上傳有4千多檔案也太煩了，個別檔案上傳又區分太多資料匣不好找，少傳一個網站就掛點了～若不小心手滑拖拉檔案放錯地方，檔名又相同很容易蓋掉啊！！！




有沒有工具可以自動的只上傳更新的檔案呢？



正在煩惱時，我想起了一直不想碰的一個老字號魔法：版本控制git
git是版本控制工具，GitHub是雲端上傳同步空間，然後還真的查到了它有一個git-ftp的擴充功能，可以達到我想要的方式～


但其實我很怕git這個魔法，就是因為不習慣指令碼的操作方式，還好有不錯的GUI工具，由於之前曾買過大前輩高見龍的書，因此也使用同樣的工具。


很可惜，SourceTree只能幫忙到git的管理功能，git-ftp這個法術最後仍然需要使用終端機的指令來發動，還好，我寫碼的工具已經換成VS code了，它本身就帶有終端機；或是用git CMD或Windows本身的CMD命令提示字元，也是可以的。


準備：

主要安裝的就三個吧，終端機請用自己習慣好上手的方式即可：
(一)下載git安裝
(二)下載git-ftp安裝
(三)下載SourceTree安裝


(一)下載git安裝


安裝的全部步驟都用預設，下一步即可完成


(二)下載git-ftp安裝

https://github.com/git-ftp/git-ftp
大多數的文章都用git CMD指令安裝，我是個小小新手用不習慣，我用最傳統的古老的手法

(1)直接到git-ftp的頁面下載zip

(2)解壓縮後複製git-ftp這個檔案


(3)放置到git的安裝路徑下即可，稍後用指令來確認是否安裝好
C:\Program Files\Git\mingw64\libexec\git-core





(三)下載SourceTree安裝




第一步註用我Skip掉了，最後的SSL我也是先No跳過~



實作：

以上都準備好後，就可以來實作看看效果吧：
(一)建立專案資料匣
(二)在SourceTree建立git專案
(三)在config設定FTP帳密和路徑
(四)git-ftp初始化
(五)測試專案內容更新


(一)建立專案資料匣

(1)在檔案總管開新資料匣，並建立基本的檔案
test1.html & test2.html
這2支是要更新維護的測試檔，只是一般的html

.gitignore
這支是告知git有哪些東西要忽略，我放了gitignore.html和vendor資料匣


# 忽略目錄下
vendor/

# 忽略所有附檔名是 .tmp 的檔案
*.tmp



.gitignore檔案的內容


(二)在SourceTree建立git專案

(1)SourceTree建立git專案，指向剛才新開的資料匣

(2)可以看到下方已經捉到有更新的檔案名了，同時，資料匣裡也會出現一個.git的隱藏檔

(3)接下來是git的一點基本操作，按下Stage All，所有檔案移到上方；在下方註解處填上說明，按下Commit

(4)按下Commit後，會建立第一個節點，由於git-ftp會檢查要更新哪裡些東西，所以最少要建立一個節點喔


(三)在config設定FTP帳密和路徑

(1)SourceTree建立git專案後，其實資料匣裡已經出現一個.git的隱藏檔，裡面有一個config的檔案，用記事本或編輯器打開它吧～



(2)你會看到原本有[core]的一些設定，在下方貼上ftp的設定
要注意的是，FTP若沒有直接到達網站資料匣，請記得在ip的後面加上路徑喔
像我的範例是放在git/目錄下

[git-ftp]
    url = ftp://255.255.255.255/git/
    user = dev@dev.xxx.xxx
    password = password


PS：多數的教學FTP設定都是用指令碼，我個人覺得太麻煩，直接改文字檔不是很方便嗎？

(3)在VScode裡打開終端機(或是用CMD)，先檢查一下git-ftp有沒有安裝好，輸入git ftp，若有看到action代表有功能了啦~


$ git ftp








(四)git-ftp初始化

(1)確認git-ftp沒問題後，大膽的輸入git ftp init吧~~~看看發生什麼事~它會上傳檔案耶！
init會把全專案傳送上去喔~只要作一次就可以了～


$ git ftp init



PS：檔案數量很多很大時，這裡uploading要花一些時間，像opencart有4千多個檔案，上傳花了10多分鐘，請給它一點耐心~

(2)打開FTP軟體，連上去空間看看，哇塞，真的有檔案傳上去了，
而且，還忽略了我不想要上傳的東西，真是太棒了！(感動落淚)




(五)測試專案內容更新

(1)目前已經完成了全專案自動上傳了，但這還沒達到目標，接下來，先把在本機專案裡，
test1.html作文案修改
test2.html刪除檔案

(2)回到SourceTree的WORKSPACE面板，git已經知道我們都幹了什麼好事！



(3)一樣的Stage All， 送出Commit，會看到已經建立了第2個節點了


(4)回到終端機，我們只是要上傳更新的內容，現在輸入push去更新即可


$ git ftp push





(5)FTP空間重新整理一下，哇塞，test1.html有更新了，而且，test2.html也不在了；
所以，連刪除檔案都同步了～完全不用怕手滑啊～







結語：

測試的效果我非常滿意，完全可以把檔案交給git去管理，FTP交給git-ftp去上傳，每天維護就發布一下commit，遇到BUG時，隨時可以到SourceTree裡回到前幾天的節點，再找找BUG是何時出現的，檢查完再回到今天把BUG修掉~

我的老天爺啊~我根本就是解鎖了時光機技能了啊~～～～

這篇文章只是玩玩git-ftp，對於我目前的需求超級實用，至於git和SourceTree還有很多管理的版本控制，等以後多人開發時再來玩看看～



參考文章：






標籤：

留言

張貼留言

這個網誌中的熱門文章

QNAP NAS 輕鬆架設網站(含虛擬主機)

前言： 之前公司網站一直使用EC2空間+Godaddy DNS代管，大約有10年的時間，當時公司有MIS人員協助設定，我知道它的功能很強大，但設定很複雜；這幾年下來偶爾遇到幾次官方來信通知，伺服器會重啟之類的，instance會被暫停，但只要去到後台再重新啟動就好～ 但愚人節那天再度出現網站連不上，不意外又是官方方面主動的維護什麼之類的，但這次我卻完全恢復不了網站，看信件內容只要重設重建網站start就好，或許對MIS是很輕鬆的事，但公司早就結束了，我也不好意思一直麻煩之前的MIS人員處理。 其實我要的只是簡單的網站，只希望穩定不要掛掉就好，對於官方總是主動的停掉服務我真的無法認同，況且最近又有漲價，每個月又被多扣好幾元的美金，這次恢復不了乾脆就停掉使用，也省下一筆費用。  上圖：愚人節時停掉我的主機，真的很有趣！ 上圖： 明明就已經重新runing還是無法連上網站 NAS架網站需求： 剛好去年買了台NAS主機，就來試試NAS架設網站吧。 (1)上網固定IP： 必須要有可以上網的固定IP(WAN)，我使用中華電信的寬頻固定IP上網。 (2)Domain 網域 ： 其實網址非必要性，用固定IP也可以連上網站~只是有網址好記，而且可以開設子網域(例:XXX.domain.com)。 (3)Router路由器： ASUS RT-N66U 官網介紹 好多年前買的大約3千出頭吧~必須有Port forwarding+UPnP的功能，這2個應該蠻基本的機型都有了。 上圖： ASUS RT-N66U 官網介紹 (4)NAS主機： QNAP TS431P2 官網介紹 當時原本覺得弄一台便宜的外接式硬碟盒就可以備份資料了，但最後還是選了NAS；其實NAS主機就是一台小型伺服器，大約1萬出頭(不含硬碟)，功能很多，可以同時滿足備份＋雲端＋伺服器。 上圖： QNAP TS431P2 官網介紹 NAS架網站概述： 首先爬文找到了這篇 QNAP架網站教學 ，寫得很完整了，但其實只說明了如何設定多個子網域，老手如我還是一臉茫然不知所措，只好整理一下觀念。 原則上，就是這四大部分 : (一)網域申請 (二)DNS設定 (三)路由器設定 (四)NAS設定
8 則留言
閱讀更多 »»»»»»»»»»

QNAP NAS 安裝SSL憑證 (https)

前言： 所謂的SSL憑證，其實也就是個安全認證的證明，免費到一年幾萬元都有，簡單說花愈多錢建立的證明，可以給來逛網站的人更多的信心，但也是防君子防不了小人吧(我覺得啦)。 在谷哥大神把沒有SSL的網址一律打為不安全的年代，只好乖乖的安裝吧～ 實作： 在自己NAS上安裝SSL，主要步驟就三個吧： (一)申請SSL (二)安裝到NAS (三)路由器設定 (一)申請SSL 免費和付費的差別，詳細可以參考 捕夢網的介紹 ，Let's Encrypt Free SSL免費的期限是3個月，所以要定期更換，使用上會比較麻煩一點，但對我而言省錢最重要，所以我選擇安裝這個。 申請方式請參考這篇： 免費線上取得網站SSL安全憑證 ，寫得很詳細，最後會下載一包憑證壓縮包，得到3個檔案，就可以開始下一步了。  (二)安裝到NAS 接下來到NAS的管理介面，進入控制台裡，選擇系統＞安全設定＞憑證與私人金鑰。 點選按鈕『取代現有憑證』，下拉選單『匯入憑證』，下一步。 有三個項目，對應剛下載回來的3個檔案，點選按鈕『套用』。 恭喜，已經完成安裝了。 接下來到應用服務＞網站伺服器。 勾選『使用安全連(HTTPS)』通訊埠用預設的443就可以了。 接下來到應用服務＞虛擬主機。 同樣網址增加HTTPS的協議，點選按鈕『套用』。  (三)路由器設定 我是使用ASUA的無線分享路由器，在虛擬伺服器裡面，要增加一個443的通訊埠，就可以對應到NAS裡了。 後記： 完成後再到瀏覽器輸入https自己的網址，就可以使用了，是不是很開心？ [重點提示]：免費的三個月到期唷!!!
張貼留言
閱讀更多 »»»»»»»»»»

QNAP NAS的FTP連線成功卻無法取得目錄

前言： 某天忽然發現FTP可以連上NAS，但無法取得目錄，忽然感到莫名其妙。上網爬文也沒找到解答，多次測試下，終於找到原因和解法。  FTP可以連上NAS，但無法取得目錄 實作： 主要步驟就二個吧： (一)NAS的FTP設定：取消外部SSL (二)FTP軟體設定：指定主動模式  (一)NAS的FTP設定：取消外部SSL 控制台＞網站＆檔案服務＞FTP：取消外部SSL  NAS的FTP設定：取消外部SSL (二)FTP軟體設定：指定主動模式 我是用FileZilla FTP軟體，在傳輸設定裡，選取主動模式 成功了，可以進入目錄
張貼留言
閱讀更多 »»»»»»»»»»