今天來分享如何在 GitHub 上使用 Travis CI,來做自動部署吧!
在你建立完 Repository 後,每次都要下指令去手動部署,這樣不僅麻煩也浪費很多時間,這時候可以使用 CI/CD 去幫我們做自動部署,而 Travis CI 對 GitHub 有著高度的整合,讓使用者可以快速與 GitHub 的 Repository 串接完成,享受 CI/CD 的服務。
以下步驟跟著操作,即可建立自動部署
1. 登入 Travis CI
登入 Travis CI,並連動 GitHub 帳號
2.選擇要部署的 Repository
點擊右上頭像 ⇒ Settings
選擇你要建立部署的 Repositories
剛建立的儲存庫,不一定會馬上出現,上次等了一小時多才出現,
但有時候建立完又馬上就出現,我也不是很懂這是怎樣😂
3. 在 Repository 建立 .travis.yml
在儲存庫的 root 新增一個 .travis.yml 檔案
要有這支檔案才可以跑 CI/CD
1 | language: node_js |
- language :用什麼語言寫的
- node_js :設定 NodeJS 的版本
- install:安裝依賴套件,這邊是用 npm 所以直接下
npm install
- script: 部署要執行的指令,可以輸入多個, Travis CI 會一行一行執行
- deploy:
- provider:要部署到的地方,此設定為 GitHub Pages 上
- skip-cleanup:需設定為 true,否則 Travis CI 會把上方指令創建的檔案都刪除,也包含我們編譯出來的文件
- github-token:設置的值是
$GITHUB_TOKEN
,Travis CI 會去抓 Environment Variables 中新增的變數 - local-dir:指定要部署的目錄,如編譯後的檔案會放在 dist 中,即指定 dist
- keep-history:保留部署歷史紀錄
- target_branch:指定目標分支,預設是 gh-pages
- on:基於哪個分支建構
4.建立 Repository 的 GITHUB TOKEN
需要建立 Token,提供給 Travis CI 做環境變數
點擊頭像 ⇒ Settings
左側 sidebar 最下方,點擊 Developer settings
選擇 Tokens(classic)
選擇 Generate new token ⇒ Generate new token(classic)
在 Note 填上 Repository 名稱,勾選 workflow 並完成
將會生成出一組 token,這就是要在 Travis CI 設定的 GITHUB_TOKEN,複製起來到下個步驟
5.設定 Travis CI Environment Variables
回到剛剛的 Travis CI,選擇專案,點擊 More options ⇒ Settings
填寫 GITHUB_TOKEN 跟 VALUE 並 Add,
VALUE 填寫專案的 Token
新增後就會呈現灰色區塊
6.自動部署
以上都設定完即可部署
按下 Restart build
將會開始跑工作流程,可以看到工作進度
最後是完成或失敗都會顯示出來,整個流程的代碼
在 Repository 也可以點擊查看細節
點我看 專案 Demo
結語
自動部署只要設定一次就可以省去一堆麻煩的步驟,實在太方便了!大家一起來試試看吧~~~😉
🚀實體工作坊分享
玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課
最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程想學習更多關於前後端的線上課程,可以參考看看。
Hahow
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住六角學院
如果你是初學者,非常推薦六角學院哦!剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!也是很多工程師推薦的線上課程網站。