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

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

前言

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

範例程式碼

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

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

一鍵部署基礎教學

首先我們通常要部署一個專案之前都會先輸入 npm run build，然後就會打包編譯出 dist 這個資料夾，如果你是用原始的方式，例如：cd dist … git 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 bash 意指 Git 提供的工具來執行指令。)

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 並開始該分支。
  • 美美的終端機提示

以下是相關載點

美麗的一鍵部署

參考文獻