一個指令快速部署 Vue Cli 到 GitHub Pages

前言

一般來說我們使用 Vue Cli 開發一個作品完畢之後都會需要部署到特定空間來展示作品,舉例來講 GitHub Pages 就是一個,那麼這一篇就來介紹該如何一個指令快速部署吧。

範例程式碼

這邊將會使用我先前做的一個串接 API 範例作品,也就是「六腳音樂大平台

這個範例作品是我先前在六角學院的線上問答會所介紹的範例作品,如果你對於 KKBOX OPEN API 非常感興趣的話也歡迎你可以參考這一支 Youtube 影片,這邊我就直接放上影片。

一鍵部署基礎教學

首先我們通常要部署一個專案之前都會先輸入 npm run build,然後就會打包編譯出 dist 這個資料夾,如果你是用原始的方式,例如:cd distgit init 次數多了其實也會煩,先前我的Vuejs部屬GitHub Pages 教學文章就是教你這樣做,但是開發時我們通常會很長 npm run build,所以接下來就會教如何一個指令部署到 GitHub pages

首先我們先在專案底下建立一個叫做 deploy.sh 的檔案,然後內容是以下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#!/usr/bin/env sh

# 發生錯誤時執行終止指令
set -e

# 打包編譯
npm run build

# 移動到打包資料夾下,若你有調整的話打包後的資料夾請務必調整
cd dist

# 部署到自定義網域
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 部署到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 部署到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
# 以這個專案來講就要改成這樣以下這樣,下面是走 ssh 模式
git push -f git@github.com:hsiangfeng/HexfootMusic.git master:gh-pages
# 除此之外,也可以改走 HTTPS 模式
# git push -f https://github.com/hsiangfeng/HexfootMusic.git master:gh-pages

cd -

接下來在終端機輸入
(ps. Window 用戶必須使用 git base 來執行指令。)

1
sh deploy.sh

你就會發現一件神奇的事情發生,它自動幫你打包編譯以及部署到 GitHub pages 上囉~

sh deploy.sh

其實這個做法在官方 Vue Cli 文檔就有教學,只是我一直都沒去認真翻文檔(該打)

此外 Vue Cli 官方還有提供相當多的其他部署方式,所以就留給你們自己摸索囉~

其他部署方式

補充說明 sh

sh 其實是 Linux 中的腳本檔案,全名是「shell」,是一個可以讓使用者執行各種任務的管理器,概念你可以看成類似 Gulp 一樣的任務管理器,所以在執行某些一系列指令時是相當好用的腳本指令唷。

Window 說明

由於 sh 在 Linux 系統下是可以直接執行的,所以如果你是 Mac 用戶,你是可以直接輸入 sh deploy.sh 直接執行指令,但是如果你是使用 Window 的話,那麼就必須使用 Git Bash,也就是 Git 的工具唷

圖源:Git 官方網站

懶人指令

上面的指令其實還需要去修改要走哪一個模式上傳,有時候其實還是很麻煩,更不用說如果我今天儲存庫換位子呢?那麼就會變成每次都要修改 deploy.sh 的檔案,這樣完全沒有符合一鍵快速部署的指令。

因此我寫了另一個懶人指令,連遠端儲存庫的 Url 都幫你省下來,這樣子才符合懶人(攤手)

但是要使用以下指令之前,這個專案必須已經有使用過 git clone 或是 git remote add origin [遠端儲存庫 Url],否則是會出現錯誤,因為無法取得遠端儲存庫 Url。

基本上透過以下的指令碼來講,我已經幫你寫好自動辨別它會走那一個模式傳輸,所以完完全全你只需要輸入 sh deploy.sh 就可以搞定囉。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# 發生錯誤時執行終止指令
set -e

# 取得目前專案的遠端分支
originUrl=$(git config --get remote.origin.url)

# 注意若是出現以下 Url 就是走 SSH
# git@github.com:hsiangfeng/HexfootMusic.git
# 反之,若是 HTTPs 的話則是以下
# https://github.com/hsiangfeng/HexfootMusic.git
# 通常來講走 SSH 可能會出現 GitHub Public Keys 錯誤,這部分 Google 一下就可以解決囉。

nowStatus=${originUrl:0:5}
echo $nowStatus
if [ $nowStatus = 'https' ]
then
echo '傳輸方式採用 HTTPs 模式'
echo '目前遠端分支 URL:'$originUrl
else
echo '傳輸方式採用 SSH 模式'
echo '目前遠端分支 URL:'$originUrl
fi

# 打包編譯
npm run build

echo '移動目錄到編譯出來的 dist 資料夾'
#移動到打包資料夾下,若你有調整的話打包後的資料夾請務必調整
cd dist
# 初始化並設置 Git
git init
git add .
git commit -m "update `date +'%Y-%m-%d %H:%M:%S'`";

# 上傳到到 gh-pages
# 如果是走 SSH 的話可能會比較不好調整
git push -f $originUrl master:gh-pages

cd -

懶人指令

最後如果你要讓你的電腦可以順利執行「懶人指令」的話,會建議你自己要有先使用過 git push 確保你的電腦有曾經成功上傳原始碼到 GitHub,如果沒有上傳過的話,會建議你自己嘗試先上傳過一次。

否則應該會有很高的機會出現權限驗證或者是沒有權限的問題,如果真的發生的話,那麼就會建議你試著 Google 解決囉。

美化兼強化版懶人指令碼

接下來這邊底下是我美化兼強化版懶人指令碼,最主要是方便辨識執行流程,但是這邊還增加了一些功能

  • 自動建立 vue.confing.js
    • 會自動辨識是否存在 vue.confing.js 檔案,若不存在則自動建立與寫入,這個流程只會執行一次。
    • publicPath 只會寫入「./」,詳細可以看裡面註解。
  • 辨識作業系統(目前主要是 Mac 與 Window)
    • 主要是因為色碼在 Window 錯有錯誤,所以才要辨識
  • 自動編譯 build Vue Cli
    • 你不用輸入 npm run build,流程會自動幫你跑完
  • 自動取得當前專案的 GitHub 遠端路徑並加入版本控制
    • 編譯完成後,他會自動幫你將 dist 加入版本控制與撈取你目前遠端分支,但這邊請注意,請務必執行過一次 git push 原始碼到你的 GitHub 儲存庫,否則有很高機率出錯。
  • 自動部署 Vue Cli 到 GitHub Pages
    • 編譯完成後會自動幫你部署到 GitHub Pages 並開始該分支。
  • 美美的終端機提示

以下是相關載點

美麗的一鍵部署

參考文獻

0%